在9月底雙十一臨近的關口上，淘寶上線了 9.13 新版本，對首頁做出了巨大的改版，堪稱這 5 年來力度最大的改版幅度。
我們先來簡單看看新版本有哪些重要的改進：
如果只是通過視覺角度上來看，新改版必然是比過去的老版本 “清爽” 得多，畢竟精簡掉了大量的內容。尤其是兩個分頁器組件，除了占空間外，實在找不出什么要去點擊的必要。
輪播圖從頂部撤離和瓷片區進行合并，是一個比較有趣的設定，不僅廣告圖的面積減少，而且營銷推薦位全部集中到一起，使得模塊的劃分更集中。
現在的首頁從上到下的結構即：
如此化繁為簡的改造發生在淘寶APP身上，就像看一出浪子回頭的感人戲碼…
但不要這么容易被結構上的改造欺騙，改版后的淘寶降低了模塊的數量，但只是把減少的元素在其它地方呈現。即這次改版的重點——推薦瀑布流。
細心的同學應該都發現了，瀑布流卡片已經出現在了第一屏的底部，即使不用上滾也可以看見卡片的頭部了。
并且瓷片區也采用了瀑布流式的雙列布局，通過瓷片區白色背景的襯托，這半截露出的圖片反而顯得越發顯眼，越能吸引我們控制不住自己去上滾一下康康推薦了什么東西。
當我們開始瀏覽瀑布流的推薦內容以后，淘寶夾帶的大量私貨就進來了，我們來統計下總共有哪些類型：
實際的卡片類型，可能還不止我羅列出來的這些。這個本來是用來推薦商品的列表，已經演化成一個聚合了算法推薦內容的 “巴別塔”。
而其中最重要的商品卡片，甚至也不能直接點擊就跳轉到商品詳情頁中，而是添加了一個中轉頁面，進一步根據算法推薦相關商品，能直接跳轉進詳情頁的少數商品卡片，應該是有做廣告投放的定向導流。
這樣改版后的目的，不難分析出目的是為了進一步增加用戶 “逛淘寶” 的幾率和時間，讓本來打開應用就搜索—購買—關閉一條龍的用戶，也會不自覺陷入信息流的海洋中去。
可能很多人會覺得，難道不應該讓流程更短，購買步驟更容易，才符合優秀交互設計的定義嘛？
下面我們就做一些具體的分析吧！
對于一個商業應用來講，交互不是為了無條件迎合用戶的，雖然無論是 UX 還是 UED 的概念里，都愛強調用戶至上論，體驗為王之類的。但是…
1. 商業訴求 > 用戶體驗
只有在用戶量高速擴張，商業目標是需要用戶獲得良好體驗、口碑的情況下，用戶體驗的重要性才和大家在童話里了解的一致。更多的時候，是產品想喂用戶吃金坷垃時，我們要想辦法讓用戶心甘情愿的吃下去并快速成癮。
淘寶通過不同的方式獲取了大量用戶的數據，資料、喜好、購物傾向等等，在龐大的商品數支撐下，可以通過算法給你推薦無窮無盡的商品，總有你會感興趣的部分。
只要增加了信息流的曝光次數，不要讓用戶那么快完事，過早的陷入剁手的悔恨，抽起事后煙……
那么他們就會被這種簡單的產品形式俘獲，做多巴胺的奴隸。抖音是這樣的、微博是這樣的、知乎也是這樣的。為什么一個購物應用不想著最快的方式促成交易，而是讓用戶在里面繞圈子，原因也只能有一個 —— 流量。
大家都知道雙十一將近，各家電商平臺作妖時間又到了。但這兩年的電商行業已經發生了巨大的改變，那就是直播、短視頻帶貨形式帶來的變局。
這兩年，以抖音、快手為代表，興起的短視頻、直播帶貨風潮，已經成社會的熱門話題，薇婭沒事就在綜藝里和愛豆們一起帶貨，李佳琦身體有恙上微博熱搜，羅永浩靠帶貨上演 “真還傳”……
本來，購物方式的多元化，對于大型平臺來講是非常有幫助的。無論是十幾年前就開始出現的社會化電商平臺、返利網、或值得買，都可以促進電商行業的繁榮，促進平臺和整個產業鏈的發展。
但是，直播、短視頻的興起和過去的這些行業全部不一樣，它們本身并不依附于電商平臺，但卻擁有海量的流量和用戶基數。而當這樣的流量引擎在變現問題聚焦在電商時，直播和短視頻頭部平臺就有了和電商平臺們叫板的資格。
2. 直播電商規模，不算短視頻
主流的數據預測報告中，20年的直播電商規模都會達到萬億級別，直播電商的高速發展是沒法阻擋的大趨勢，它的發展會搶奪存量用戶的注意力，有大量的用戶購物逛商品，不在淘寶APP內，而是通過其它平臺轉化，再進來下單，或干脆在外部下單，這是絕對不能被容忍的。
所以淘寶不僅要緊跟趨勢，也要對抗外部的競爭，在今年加大對短視頻、直播的投入，也就順理成章。根據淘寶研究院的數據，過去三年直播帶貨的規模增長在 150% 以上，是全球增長最快的電商模式。
同時，雙十一的直播觀看用戶 18 年為 1793 萬人次，19 年為 4133 萬人次，同比增長 131%，對比 618 數據，毫無疑問今年肯定也會保持的增長。
并且前幾年淘寶雙十一喜歡玩的病毒式推廣活動成效已經越來越差，再讓用戶去集福，首頁上增加一大堆煙花繚亂的游戲和活動，已經不能再幫助雙十一獲得快速的增長了。
所以今年，淘寶在國慶前，上架了首頁新版本的設計，在應用形態上押寶信息流的算法推薦機制。不僅要開始改變用戶使用淘寶的習慣，也在為后續的雙十一做預熱，相信屆時會有大量的直播內容露出和短視頻推薦。
至于還有什么新花樣或殺手锏還沒秀出來，我們就拭目以待吧……
文章來源：優設 作者：超人的電話亭
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
蘋果在2019年6月發布的iOS13中增加了“黑暗模式”，用戶打開“黑暗模式”后，應用界面將會變為深色，隨后Google Android 10的發布同樣搭載“黑暗模式”。為了適配系統，不少APP紛紛推出了深色模式。
使用OLED屏幕的設備，在純黑色下可以有效降低耗能，進一步延長續航時間。除此之外，深色模式還可以有效解決OLED屏燒屏、費眼的問題。小摹對幾款常用APP的深色模式進行了體驗，并為大家分享我的體驗感受。從這些案例中，或許我們可以找到深色模式流行的原因。
微 信
深色模式是一種可以降低視覺疲勞且有助于用戶專注的全新外觀。與傳統夜間模式最大的區別是，深色模式不僅保證了弱光環境下的體驗，在強光下仍具有可讀性。
雖然深色模式也被叫做暗黑模式，但并不代表要將底色變為純黑。如果使用100%的純黑底色，長時間閱讀時，反而會造成眼睛疲勞。微信的深色模式里，聊天背景及主頁面底色采用的就不是純黑，而是深灰色。
此外，純黑和純白的高對比度也會造成視覺疲勞，因此微信的深色模式中，使用了淺灰色作為字體顏色，既能保持清晰顯示，又降低了對比度，減輕了用戶的閱讀負擔。如果設置了聊天背景，聊天背景圖片也會自動調暗，便于閱讀。
雖然整體色彩加深，但微信在設計時仍保持著清晰的層次。比如置頂聊天窗口的灰色會比其他窗口稍淺，聊天消息的標題和摘要也采用了明度不同的淺灰色來區分層級。除此之外，微信的彩色線型圖標在黑色背景上也變得更具科技感，顏值提升了不少。
微信的深色模式除了可以幫助用戶緩解夜間視力疲勞外，在白天使用也幾乎沒有障礙，總體來說，體驗感覺較好。
Q Q
如果說微信的深色模式更加注重顏值，那么騰訊旗下的另一款社交工具QQ則更加注重用戶的深夜閱讀體驗。
首先，微信在切換深色模式時，需要重啟軟件后才能生效。QQ在切換夜間模式時，則采用了一個平滑的漸變過渡，讓用戶可以快速適應場景切換。其次，為了減少夜間光線對人眼的刺激，QQ降低了信息與背景的對比度，對用戶頭像等圖片增加了遮罩，使其在弱光環境中看起來更加柔和。
當用戶開啟夜間模式時，還會有一個設計彩蛋：部分圖標會根據模式切換而改變。如消息圖標會從笑臉切換為休息的狀態，這種具有趣味性的設計，也會拉近用戶與產品之間的距離。
豆 瓣
普通模式下的豆瓣APP背景色為純白色，白天看偶爾都覺得有些刺眼，更不用說睡前必刷豆瓣的用戶有多煎熬。在被用戶罵了一輪又一輪之后，豆瓣APP終于也推出了夜間模式。
豆瓣的夜間模式和微信一樣，同樣保留了五顏六色的圖標。同時，豆瓣在設計時始終保證內容有良好的對比度和清晰的視覺層級，保證了信息結構的準確傳達。
在配色方面，為了避免“死黑”讓整個界面太過死板，豆瓣在黑色中還混入了藍紫色，讓背景色看上去更加通透。底部導航等主要按鈕則使用了豆瓣的主色調綠色，在夜間模式下既能清晰展示，又不會顯得過于刺眼，同時也保證了在強光模式下可以正常瀏覽。
知 乎
另一款社區APP知乎和豆瓣存在同樣的問題。知乎在設計夜間模式時，知乎采用了主色調藍色+深灰色的搭配，深藍和灰色作為背景，展示出的效果既有強烈的對比，又擺脫了深色的壓抑感。
與豆瓣不同，知乎的文本顏色選擇了對比度更低的灰色，通過字重進行區分。雖然這樣會讓整體頁面看起來比較和諧，但內容變得不夠突出，無法在最短時間看清標題，對于一個以內容為主的社區來說，無疑會給用戶帶來不太好的體驗。
知乎在設計夜間模式時目標應該很明確，即只考慮用戶在夜間的使用，因此整體色調都很暗，在強光環境下無法正常瀏覽。
bilibili動畫
B站剛推出深色模式時收到了許多批評，字體和背景色對比不強，視頻封面仿佛蒙了一層霧，一刀切的暗化處理，導致用戶瀏覽體驗極差。
在最近一次更新中，B站終于對深色模式進行了優化，適度提亮了視頻封面和圖標的亮度，將多彩型圖標調整為了單線型圖標，既統一了畫面風格，又提升了界面閱讀體驗。
設計深色模式時，必須注意各頁面的配色及對比度都要盡可能地統一。在深色模式下點開B站創作中心或推薦服務中的版塊時，加載畫面仍然是白色，突然出現的強光無疑會對眼睛造成刺激，對于用戶來說體驗感也極差。
百度網盤
高飽和度的色彩會在深色背景上產生炫光的視覺效果，引發視覺疲勞。百度網盤的深色模式下，背景接近全黑，圖標卻沒有太大的調整，給用戶帶來的閱讀體驗并不好。
同樣，由于背景顏色太深，導致百度網盤的文本和背景對比度太大，也存在難以閱讀的情況，對于誦讀困難癥患者來說，在閱讀時會感覺文字在旋轉、模糊。
在設計深色模式時，除了背景顏色盡量使用深灰色以外，還需要確保絕大部分區域保持深色，盡可能使用數量有限的色彩。把握好對比度和飽和度，才能設計出舒適的深色模式。
綜上所述，合理使用深色模式，可以降低屏幕亮度，不僅可以減少耗電量，還能減小對自己或他人眼睛的刺激。除此之外，深色模式對背景色、文字以及系統圖標的顏色都進行了優化處理，可以提升閱讀舒適度。對于喜歡深色或黑色系的朋友來說，深色模式更是一種不同于普通模式的全新體驗。
除了APP，不少生產力工具也都采用了深色界面，比如PS、摹客等。以摹客為例，用戶在進行設計時，深色界面不僅僅能降低眼睛疲勞度，還能突出你的設計內容，打造沉浸式的設計體驗。
隨著蘋果“黑色模式”的推出，深色模式逐漸成為APP設計的流行趨勢。作為設計師，也一定要掌握APP深色模式的設計技巧。從上述APP設計案例中，我為大家總結了以下幾點建議以作參考：
1.避免使用純黑色；
2.避免使用高飽和度的顏色；
3.文本顏色選用高亮色，但不宜使用純白；
4.做好情感化設計；
5.注意結構和層次感；
6.允許用戶自由切換深色模式和普通模式。
文章來源：UI中國 作者：摹客產品協作設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
所謂的“左右橫滑”交互英文名叫做“Horizontal Scrolling Lists”，最早可能起源于 Windows Phone 的橫向內容滑動設計。用于在同一個頁面的 X 軸方向拓展內容空間，“左右橫滑”的交互方式被廣泛應用于各類 App 中。
橫向滑動作為手勢交互的一個拓展，目的初衷是提升信息“內容和操作”的拓展性。
1. “內容”拓展性：
移動端的任何類型頁面內容都可能無法在一個界面呈現完整，因此滑動去呈現更多的內容，常見的當然是縱向滑動。但它無法承載所有類型內容呈現的問題，這個時候就需要橫向滑動來解決。
2. “操作”拓展性：
當一個頁面的內容已經是固定完整的，這時候需要用戶進行一些行為操作，如常見的下載、刪除、添加、管理…,而這些行為如果直接呈現在界面上必然導致混亂，因此需要配合一些橫向滑動激發這些行為，從而保證界面的流暢體驗。
橫向滑動從移動端手勢出現到現在十幾年的時間已經有了非常典型的使用場景，接下來我們就來列舉一下有哪些常見的類型：以下從「清晰度、效果」兩個緯度進行分解
解決內容拓展問題
這類場景通常是用戶最熟悉的，不論從認知清晰度、效果角度都是不錯的，主要原因是場景曝光度非常高、頻次非常高；比如Android\ios首頁橫滑切換app入口每天上百次的操作頻次；
解決內容拓展問題
這類切換方式適合內容相對聚焦和單一的產品，比如垂直類電商：wish、唯品會，所有內容僅僅是通過類目來區分的產品；微視：內容統一為小視頻…;百度地圖：橫滑查看更大范圍地圖…;由于內容的高度統一和整合，因此切換難度低，但在認知的初期會稍有一定的門檻，原因是大部分app都是縱向滑動feeds流，而且用戶記憶是海馬記憶，不會特別清楚記得app的操作，所以新打開app和新用戶會有一個認知過程，但門檻不高。
解決操作拓展問題（管理列表、IM列表、通訊錄list…）
解決操作問題
在所有類型中的橫滑，只有這種方式不是瀏覽型手勢而是操作型，通常這類功能隱藏在列表中，為了保證列表信息的有效性和美觀度，選擇隱藏操作功能，由于是低頻操作，所以初期需要用戶發現并成功使用該功能；不過目前很多list頁面都采用這種通用的交互手勢，因此用戶并不難發現。
最復雜也是最容易出現問題的
解決內容拓展問題
這是最容易出錯的一種場景，就是在整個界面中只有一個模塊采用橫向滑動，而其它內容又是縱向feeds流滑動；由于移動端內容的路徑多、入口多，因此用戶的核心操作流是：找入口——看信息——做任務；在這個過程中任何一個隱晦的、不常見的交互都很容易被用戶忽略，比如說：餓了么品質優選、唯品會二級類目、去哪兒旅游推薦…，這些案例其實是為了橫向空間拓展更多的內容而做此選擇，但通常情況下隱藏內容點擊率會驟降，很少有用戶耐心的橫滑瀏覽完成，因此設計師要嚴格把控數量以及內容的質量；在這里還有一種情況是很嚴重的，就是模塊級的橫滑內容與縱向列表之間有疊加交互，就會導致用戶反復在2中操作中完成任務，這一點非常不建議使用此手勢，當然以下案例并沒有這種情況。
1. 幾乎能夠100%適配到所有設備，保持了一致性
2. 為二級信息提供了展示空間，并且不占用頁面空間。
比如在圖片畫廊里的圖片，橫向滑動可以讓用戶預覽內容，可以劃過或者點擊查看。
3. 橫向滑動節約了縱向屏幕空間。
而不是將所有內容都展示在一個很長的頁面?？v向布局讓所有的信息都成小塊展示。但是橫向滑動更加靈活。現在，內容可以在橫向和縱向兩個方向同時展示。
4. 橫向滑動可以讓用戶預知分類里的內容，通過往一邊滑、向下滑，差不不同類別的內容。
兩個維度讓用戶可以在同一個界面中看到更多的類別和選擇。
5. 橫向滑動的內容需要保持高質量和持續吸引力才能提升點擊轉化。
1. 挑選合適的使用場景
單頁多維度的信息結構是“左右橫滑”最適合的應用場景。傳統的 List 適合縱向無限呈現單一屬性的內容（比如朋友圈或知乎的回答），而對于 App 首頁等多種信息聚合的頁面，就適合橫向開拓內容維度。
2. 顯眼并適宜的主題展示
3. 引導左右滑動（可見性）
4. 控制數量并避免極限情況
5. 低效率和錯誤的優先級
設計師們都喜歡“左右橫滑”的設計，不僅因為信息密度大，頁面層次好梳理，更多也是因為操作方式“酷”。但有經驗的設計師會盡可能拒絕“左右橫滑”，因為它的效率還是太低。而效率低，體現在兩個方面：
首先，就像上面說過的，更多的小白用戶對左右滑動的預期并不強，還是更加適應縱向滑動的傳統交互方式。違反了“Don’t Make Me Think”的基本原則。
其次，縱向和橫向優先級常常導致預期錯誤。以下圖 App Store 為例，所謂的內容都是 App，泳道只是用不同的維度把 App 組織起來。
如果你要購買其中一個資源位，你要更高優先級“泳道”中的第二屏位置，還是低優先級“泳道”中的第一屏位置呢？
文章來源：優設 作者：Jingwhale Design
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
