他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

滑屏的交互形式自從在 H5 中流行起來，便廣泛應用在產品宣傳、廣告、招聘和活動運營等場景中，作為微信朋友圈廣告慣用的形式，其影響力更是得到了強化與放大。如今滑屏H5可謂玲瑯滿目，數不盡數。

作為一個 UI工程師，接過很多類似的項目，也曾寫過滑屏的插件，在經歷了不同的需求的“洗禮”并踩過若干個坑之后，不禁反問自己：應該如何面對每一次類似的需求，在已有的經驗下如何做到體驗更好？如何節省工作量提率？面對性能優秀的 iOS 與性能良莠不齊的 Android 平臺，又如何做到體驗統一與性能最優？

汪方進，阿里巴巴B2B事業群-用戶體驗設計部負責人。擁有多年設計行業從業經驗和深厚專業背景，2003年—2011年間任職于網易公司，期間曾擔任網易用戶體驗設計中心總監，親歷或主導網易郵箱、門戶、LOFTER、新聞客戶端、網易首頁等諸多海量級用戶產品的重大改版和體驗升級。2012年加盟阿里巴巴集團B2B事業群，負責阿里系內貿B2B平臺1688.com、村淘、零售通等業務的全站體驗設計工作，帶領團隊完成1688首頁、我的阿里、手機1688、1688行業頻道群、村淘網站等網站核心產品的重大改版和新突破。 長期致力于UED團隊“道—術—器”的思考與實踐，沉淀了從設計觀到方法論、從文化土壤到專業能力提升等整套UED團隊的發展思路和管理心法，為設計團隊帶來了新的思考視角和價值延伸。

在G20之后，我們有幸邀請了G20 logo的主創——浙江工業大學藝術學院的方宏章老師，來為我們做了一次關于字體設計的分享。

方宏章老師任教于浙江工業大學藝術學院，同時也是杭州九月九號工作室合伙人。作為一名平面設計師、策展人，方老師曾策劃2010紐約字體藝術指導俱樂部獲獎作品中國巡回展在杭州的展出，也曾策劃2012企鵝圖書設計藝術亞洲巡展，作品應邀參加寧波國際平面設計雙年展,亞洲平面設計雙年展等展覽。

在產品插畫中合理使用比喻既不是在插畫中使用比喻的修辭方式，也不是在把比喻內容用插畫表現出來這么簡單。

最近我被問到蠻多的一個問題是：在招聘插畫師時你主要考核什么方面？

既不是擁有獨特的個人特質，也不是深諳多種風格，更不是曾服務過的知名客戶列表或者作品出展過的地方，當然擁有這些資質也挺不錯的。我的答案是：設計師對比喻的使用程度。為團隊招聘插畫師的時候，我最想了解候選人是否理解如何通過愉悅輕松易懂的方式，借助比喻來傳遞復雜的想法。

第1件事是體驗。其實體驗VR的成本很低，你只需要一臺屏幕尺寸在4.7寸以上的手機和一副VR眼鏡就可以了。VR眼鏡最便宜的可以在淘寶上買谷歌的Cardboard，十幾塊錢，效果也很好。內容上不要滿足于那種虛擬電影院看3D電影的，那種不能算VR。請先翻墻（很重要），谷歌一下VR類的app，這里推薦幾個：Google Cardboard，VRSE，Discovery VR，InMind VR等。

眾所周知，我們的感知系統主要分為五覺，分別為視覺、聽覺、觸覺、嗅覺、味覺，而根據分析，其中90%的感知是來源于視覺系統。而為界面產品增加有趣的UI動效，便是利用了視覺刺激思維和人機交互細處理，來營造出更為有趣的人機互動模式，從而達到傳遞或獲取信息的結果。

下劃線 一般在文檔中常被用作增強注意，在過去打字機時代，下劃線成為了唯一的一種文字強調方式，具體的操作方法是在已經打出來的文字上面退格，再在同樣的地方打出下劃線。

而在網頁中，可以鏈接的文字（超鏈接）下面一般都有下劃線。在制作頁面的時候，當鏈接需要下劃線的時候，UI開發很自然的會想到使用text-decoration屬性來顯示，例如這樣：

以上顯示的是設計稿和瀏覽器渲染的實際效果，我們會發現瀏覽器渲染的效果和設計稿有出入，主要表現在下劃線的位置，這時候細心的設計師會要求你想辦法實現他們本來想要實現的效果。可惜的是，在這幾年的網頁排版技術發展中，并沒有更好的css屬性出現來支持下劃線的個性化設置，所以這個問題常常會被忽略。

這個一般在UI開發看來，可能覺得并沒有什么問題，難道說不應該使用text-decoration這個屬性嗎？

以往拿到一份視覺稿要做頁面適配，通常都是針對不同分辨率尺寸做斷點寫 media
query，然后看效果再微調。開發過程中視覺稿要是做了修改，修改的地方就得再走一遍分辨率測試和微調，這時想屎的心都有了。而且這些適配都是建立在已
知的分辨率尺寸庫上，如果市面新出來一款分辨率尺寸機型，呵呵，又要奔跑在測試微調路上。是不是能有用一套代碼就適應各種分辨率窗口，那么就不會再有上面
這些煩惱，且開發效率快和維護成本會降低很多。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

近期，我們對微云WEB端進行了一次“簡單”的改版。這篇文章簡要記錄了改版過程中的一些思考。

為什么要改版

微云WEB端與移動端體驗不一致。移動互聯網背景下，項目團隊把多數資源都分配給了移動端的研發，桌面端的功能和體驗得不到及時的跟進，導致用戶在兩個平臺上的體驗存在很大的落差。

微云WEB端的設計較為陳舊。蘋果iOS的快速發展使得整個UI設計行業日新月異，設計理念不斷進化向前，微云WEB端的設計已經多年未更新，早已經不起當下設計原則的檢驗。

改版前的思考

兩端的體驗對齊需要解決很多矛盾。想要將WEB端的體驗與移動端統一，并沒有想象中的那么簡單。聽起來好像只要把交互框架和視覺風格直接照搬過來就好了。但實際上要對齊的是兩種使用場景的體驗，這中間要調和的是小屏幕和大屏幕的矛盾，觸摸操作和鍵鼠操作的矛盾，兩種不同概念模式和心智模型的矛盾。

新的設計除了符合潮流，還要更具前瞻性 。想要做出可持續的設計，首先要明確設計潮流的走向，從擬物到扁平，從形式到內容，從工具化到情感化，設計潮流的走向一直沒有變，在以人為中心的前提下，越來越注重用戶更深層的需求。

項目團隊在WEB端的資源投入注定了設計更新迭代的頻率會很低。想要改版后的設計能夠長久地支撐產品的發展，需要設計師把眼光放遠，通過了解產品未來發展方向，做出更有前瞻性的設計。

求同存異的兩端統一

品牌統一性

在設計一款產品不同平臺客戶端的時候，首先要保證品牌的統一性。Logo、字體、品牌色、品牌調性甚至是文案的措辭規范都是需要嚴格保持一致的。保證品牌的統一性，有助于塑造品牌形象，增強用戶對產品的信任。

交互框架的對齊

我們先來對比一下移動端和WEB端的主界面，單純從視覺上，已經很難看出這是同一款產品。雖然在頁面結構上兩端并不一致，但各自也都符合所在平臺用戶的操作習慣。

舊版WEB端雖然在視覺風格上是扁平的，但是在信息層級上卻并不扁平，僅僅頂部的信息就有三層，過度的結構化使整體頁面看起來過于復雜，用戶很難將注意力集中到內容上。我們對WEB端頂部元素重新歸類整合，主要功能入口的布局和移動端進行了統一，通過引入移動端的編輯態邏輯，常態下隱藏了所有的操作按鈕，將頂部區域的三層信息減少為一層，使其看起來更加清爽。

正如上面所說，雖然我們追求多端統一的用戶體驗，但手機和電腦的操作場景差別很大，用戶在不同的平臺已經形成了不同的操作習慣。移動端的多級導航設計是針對小屏幕局限性做出的一種妥協。在空間足夠大的WEB端，所有的二級導航都可以平鋪出來，這樣可以減少一個層級，因此，我們保留了原有的左導航結構。通過對導航項歸類的方式與移動端統一。

品牌調性和視覺風格的對齊

在視覺風格上，微云移動端最具代表性的就是藍色的品牌色和線型的圖標， 在嘗試設計方案的過程中我們發現，由于WEB端尺寸比較大，大面積使用藍色會加重用戶的視覺負擔，分散用戶對內容信息的注意力，因此，在色彩方案上最終選擇了純白淺灰作為主色，藍色作為局部點綴，以下是改版后的一些核心頁面。

秉承著簡潔、自然、易識別的原則，我們對所有的小圖標進行了優化。簡化了舊版本中的復雜表達，并對默認態、hover態和選中態進行了規范。

文檔類型圖標也和手機端進行了對齊，將文件格式進行分類整合，同類型的格式采用同一個圖標，將格式后綴在文件名中顯示出來。在不影響識別的前提下大大降低了設計成本。

內容至上的前瞻性設計

全新的縮略圖模式

內容至上是當今設計的發展趨勢之一，結合微云未來的重點方向——辦公體驗，我們進行了一些對內容的深入思考。

在網盤的使用場景中，什么才是用戶關注的內容？早期的文件管理產品把文件圖標、文件名定義為內容，文件被包裝成一個個方塊，或是一行行的列表，文件間的差異只靠文字來體現。面對這樣的界面，用戶對文件的識別是十分低效的。這也是為什么在如今的網盤場景中，圖片是最容易識別的，因為它做到了文件本身內容的外顯。

在面對一個一個被包裝的文件時，用戶容易被觸發的行為局限于整理、刪除等基礎操作，只有在能夠看到文件本身內容的時候，才更容易觸發編輯、分享、共享協作等更加沉浸式和更具社交性的操作。這就好比你走進一個倉庫看到貨架上的一個個箱子，你會想要把他們分類、擺放得更整齊。但是當你走進一家商店，看到貨架上琳瑯滿目的商品時，你才會有挑選、對比和購買的沖動。

秉承著這個理念，我們反觀圖片之外的其他文件類型，道理是相同的；因此，我們在改版中引入了全新的縮略圖模式，在新的縮略圖模式下，單個文件的可視區域被放大，用來承載文件本身的內容。雖然一屏可以展示的文件數減少了，但展示出的有效信息是大大增加的，除了讓每個文件在視覺上有了獨特性，提高了檢索效率，也更容易觸發用戶更多的后續行為。這對于產品本身的價值相信大家都懂。

技術過渡時期的體驗補償

理想很豐滿，現實很骨感，讓更多的文件內容外顯在技術上必然要走一段路。在技術問題解決的過程中需要設計對體驗進行一些彌補，在縮略圖的文檔圖標的設計中，我們盡可能的把文件的內容樣式圖形化；同時，為了保證識別性，那些圖標比內容形式更具特征的文件，保留了圖標設計的形式。

寫在最后

微云一直致力于為用戶提供更更自然的使用體驗，無論在功能上還是在設計上，我們都秉承著以用戶為中心的原則，不斷打磨每個細節。WEB改版也是如此，這一期改版我們對WEB端的框架和方向進行了調整，在接下來的二期、三期.....我們會不斷深入到各個模塊，進一步提升WEB端的用戶體驗。在這個對于個人網盤來說最壞的時期，微云會長久的發展下去，我們不會停止前進的腳步，更多酷炫的新功能新體驗已經在路上。

藍藍設計( m.ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

編者按：卡片式設計一直是以強兼容性和“百搭”的形象出現在大眾的面前，但是它同樣有無法滿足用戶需求的時候，今天的文章我們就在實戰中聊聊這件事~

Material Design的流行讓卡片式設計走上神壇，卡片式設計在如今的網頁設計中更是隨處可見。尤其是那些偏向于大量信息匯總的頁面，卡片式設計幾乎是不二的選擇。

卡片常常被用作信息詳情的進入入口。

我們的用戶體驗團隊近期負責了好幾個重設計的項目。毫無疑問，其中有不少就是借用卡片式設計來實現的。而有意思的地方在于，我們通過這些項目實踐發現一些有意思的情況：卡片式設計在一些新聞類的網站，尤其是首頁和歸檔頁面，并不是那么適用。