通過(guò)一些案例進(jìn)行比較與實(shí)驗(yàn)，探索如何將 UI 深色模式設(shè)計(jì)得更好。
iOS 作為 UI/UE 設(shè)計(jì)的風(fēng)向標(biāo)，一直是行業(yè)的引領(lǐng)者，不管你愿不愿意承不承認(rèn)，他的每一次更新變化總能帶動(dòng) UI 設(shè)計(jì)行業(yè)的一些大大小小的變革，并且產(chǎn)生更多的追隨者，比如當(dāng)年的 iOS7 開(kāi)始的扁平化設(shè)計(jì)風(fēng)格，對(duì)后續(xù)設(shè)計(jì)風(fēng)格的影響直到現(xiàn)在已經(jīng) 7 年了。
在最近半年，iOS 在 UI 設(shè)計(jì)風(fēng)格上最大的變革莫過(guò)于 DarkMode（深色模式），在 DarkMode 之前，我們熟悉的 UI 界面往往都是淺白色界面為主，而從 iOS13 開(kāi)始正式使用了 DarkMode，界面突然可以變深色了，蘋(píng)果官方說(shuō)這樣設(shè)計(jì)可以讓眼睛更舒服地長(zhǎng)時(shí)間閱讀，為革命保護(hù)視力，而且更加省電增長(zhǎng)續(xù)航，具體結(jié)果我們不得而知，需要科學(xué)家們?nèi)ヲ?yàn)證了，但是對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō)帶來(lái)的挑戰(zhàn)就是要「黑白無(wú)?！沽恕?
其實(shí) DarkMode 從測(cè)試版算起已經(jīng)差不多推出了有半年的時(shí)間了，一些知名的 APP 產(chǎn)品早已經(jīng)有了自己的兼容方案，同時(shí) iOS 原生界面也給了我們很多最佳實(shí)踐案例，按道理大家對(duì)于 DarkMode 的設(shè)計(jì)方式方法應(yīng)該已經(jīng)掌握了差不多了，但直到這幾天微信正式推出了自己的 DarkMode 兼容方案，才發(fā)現(xiàn)對(duì) DarkMode 的探索還需要設(shè)計(jì)師們多多努力。謹(jǐn)以此文表達(dá)一下自己的觀點(diǎn)，不妥之處敬請(qǐng)海涵。
列表視圖（TableView）是 iOS 中最常見(jiàn)的界面組件，一般常見(jiàn)于設(shè)置與欄目列表頁(yè)面：
iOS 設(shè)置界面的淺色模式和深色模式看起來(lái)都非常協(xié)調(diào)。
下面我們看看微信發(fā)現(xiàn)頁(yè)面，這個(gè)頁(yè)面和 iOS 設(shè)置是很相似的。
如果單獨(dú)看微信發(fā)現(xiàn)頁(yè)面的淺色模式實(shí)際效果還是不錯(cuò)的。
但是直接轉(zhuǎn)換到深色模式下就感覺(jué)突然差的很多了，甚至可以說(shuō)是有點(diǎn)難看，這次微信真的做了一次黑天鵝？
到底是什么原因讓微信發(fā)現(xiàn)頁(yè)面在深色模式下視覺(jué)體驗(yàn)如此之差呢？
我們不妨將兩個(gè)功能布局都相似的深色進(jìn)行放在一起進(jìn)行一下比較：
組成色彩分析：
在色彩這塊在這兩個(gè)頁(yè)面中微信和 iOS 基本保持一致，四層灰度設(shè)計(jì)能更好的保持頁(yè)面整體干凈整潔且層次分明，但是在 A 背景色上，微信的背景色選擇了黑色偏綠的顏色，應(yīng)該是微信設(shè)計(jì)師還是想體現(xiàn)出產(chǎn)品的標(biāo)志色原色。
文字的顏色也較 iOS 略微深一點(diǎn)，但是在整體上影響并不大。
看來(lái)在主要色彩上并沒(méi)有什么問(wèn)題，那么為什么微信這個(gè)界面與 iOS 界面比起來(lái)視覺(jué)上要感覺(jué)差一些呢？
下面來(lái)看一下圖標(biāo)
圖標(biāo)設(shè)計(jì)分析：
圖標(biāo)上的差別主要在于線(xiàn)寬與外框，微信采用無(wú)外框統(tǒng)一線(xiàn)寬的線(xiàn)形圖標(biāo)，iOS 采用的是有外框剪影圖標(biāo)。
我們我們把圖標(biāo)進(jìn)行互換會(huì)怎么樣呢？
觀察到了嗎？別看錯(cuò)了！
是的，我故意把位置做了對(duì)調(diào)，左邊是 iOS，右邊是微信。替換圖標(biāo)后的微信明顯加分不少，整個(gè)界面都整齊多了，而 iOS 換了圖標(biāo)后明顯變得不夠整齊了，潦草很多。
那么結(jié)論是微信的無(wú)框線(xiàn)性圖標(biāo)在深色模式下兼容有問(wèn)題？是的，的確如此。但是等一下，還有一些細(xì)節(jié)你注意到嗎？換了圖標(biāo)的微信界面和之前的 iOS 界面比起來(lái)明顯還是有點(diǎn)不夠整齊，為什么呢 ？
我們回過(guò)頭來(lái)從細(xì)節(jié)再看一下 iOS 界面。
我們按照這個(gè)思路把剛才微信替換圖標(biāo)界面再排序一下！
△ 界面視覺(jué)體驗(yàn)明顯整齊了很多是不是！
疑問(wèn)：
為什么細(xì)線(xiàn)圖標(biāo)和無(wú)框圖標(biāo)會(huì)在深色背景表現(xiàn)不夠好，而在淺色背景下就沒(méi)問(wèn)題呢？
是不是所有的 UI 都會(huì)存在這樣的問(wèn)題呢？
我們?cè)賮?lái)看一些例子：
看來(lái)結(jié)論是一樣的，線(xiàn)性圖標(biāo)在深色背景下的表現(xiàn)都是差強(qiáng)人意，反觀帶框圖標(biāo)適應(yīng)性很強(qiáng)，淺色和深色模式下均能良好的適配，我來(lái)分析一下原因。
當(dāng)年伽利略用望遠(yuǎn)鏡往天上看，發(fā)現(xiàn)木星比金星大，換成肉眼看后金星則比木星大。他認(rèn)為是眼睛的某種視覺(jué)特性造成了這種現(xiàn)象。
德國(guó)物理學(xué)家赫爾曼把這種錯(cuò)覺(jué)稱(chēng)為輻照錯(cuò)覺(jué)，就是說(shuō)在黑暗背景下，亮度越高的物體看起來(lái)面積越大。
再來(lái)看一張圖片
哪個(gè)圓圈看起來(lái)更大，顯然是黑色背景下的白色圓形，實(shí)際上這只是一種錯(cuò)覺(jué)，所有圓圈是一樣大。
光亮刺激會(huì)使得神經(jīng)元產(chǎn)生非線(xiàn)性放大作用，導(dǎo)致刺激比實(shí)物本身看起來(lái)更大，白色圓形更亮，所以看起來(lái)更大一些。
線(xiàn)性圖標(biāo)是用線(xiàn)條勾畫(huà)圖案達(dá)到隱喻效果，一般線(xiàn)粗是 2px~6px 像素。
設(shè)計(jì)師在設(shè)計(jì)時(shí)都是以最終視覺(jué)作為參考，而設(shè)計(jì)稿本身多是淺色背景，所以在淺色背景的映襯下圖標(biāo)視覺(jué)會(huì)顯得稍大，視覺(jué)基本是平衡的，假如設(shè)計(jì)是 4px 而呈現(xiàn)出的效果其實(shí)是 6px 左右。
是不是覺(jué)得哪里有點(diǎn)不對(duì)了？按照這個(gè)邏輯黑色背景下白色線(xiàn)圖標(biāo)不應(yīng)該是視覺(jué)更大、更明顯嗎？
我們還需要考慮一個(gè)因素，那就是色彩，之前的幾個(gè)界面案例的線(xiàn)性圖標(biāo)都是彩色的，特別是黑色背景下，不同色彩的圖標(biāo)放在一起，會(huì)有明顯的忽大忽小的感覺(jué)，會(huì)讓界面感覺(jué)非常凌亂。
是不是感覺(jué)黃色最大，紅色的最?。康瞧鋵?shí)是一樣的，這還是相同形狀的，要是圖標(biāo)形狀不同感受會(huì)更明顯。
看一個(gè)實(shí)際中的例子：
由于都是單色線(xiàn)性圖標(biāo)，在淺色和深色下表現(xiàn)還都不錯(cuò)的，但是單色圖標(biāo)略顯界面單調(diào)，并不太建議這么設(shè)計(jì)。
毫無(wú)疑問(wèn)，未來(lái)的 UI 場(chǎng)景需要適配多背景色風(fēng)格，圖標(biāo)除了具備好看隱喻之外，更需要具備抗干擾性。
帶框圖標(biāo)是一個(gè)不錯(cuò)的解決方法，大膽預(yù)測(cè)帶框圖標(biāo)會(huì)將成為未來(lái)一段時(shí)間圖標(biāo)設(shè)計(jì)主流！
在這之前我得先提及一本書(shū)──《簡(jiǎn)約至上：交互式設(shè)計(jì)四策略》。這本書(shū)基本算得上是交互設(shè)計(jì)的入門(mén)必讀書(shū)籍了，非常適合身處項(xiàng)目環(huán)節(jié)中上游的人員閱讀與學(xué)習(xí)。
作者 Giles Colborne 在書(shū)中提出了四個(gè)令交互設(shè)計(jì)成果最大化的簡(jiǎn)易策略：合理刪除、分層組織、適時(shí)隱藏和巧妙轉(zhuǎn)移。這四個(gè)策略幾乎成為我設(shè)計(jì)與優(yōu)化每一個(gè)頁(yè)面時(shí)的自我指導(dǎo)方針。
我參閱了大量的應(yīng)用，想總結(jié)出它們是如何運(yùn)用導(dǎo)航欄來(lái)給產(chǎn)品賦能的。竟然很巧地發(fā)現(xiàn)，再花式的導(dǎo)航欄設(shè)計(jì)也難逃「四策略」手法。
首先，導(dǎo)航欄作為一個(gè)獨(dú)立控件，它本身就已經(jīng)是「分層組織」策略的一種表現(xiàn)形式。接下來(lái)我們來(lái)看看，優(yōu)秀的產(chǎn)品設(shè)計(jì)是如何運(yùn)用另外三種策略來(lái)設(shè)計(jì)好導(dǎo)航欄的。
導(dǎo)航欄不能輕易刪除，但凡事沒(méi)有絕對(duì)。什么時(shí)候我們可以合理地刪除導(dǎo)航欄呢？
Nike Run Club（下文簡(jiǎn)稱(chēng)NRC）是耐克官方出品的一款跑步記錄 APP。既然做產(chǎn)品要站在用戶(hù)角度出發(fā)，那我們就來(lái)復(fù)原一下主要功能的用戶(hù)使用場(chǎng)景。
當(dāng)你的老板要求你一天出 150 個(gè)界面設(shè)計(jì)的時(shí)候，你怕了，準(zhǔn)備跑路，同時(shí)又不想浪費(fèi)一天中任何一次記錄運(yùn)動(dòng)的機(jī)會(huì)。于是你打開(kāi) NRC，你的目的很明確：認(rèn)真地跑路，并記錄運(yùn)動(dòng)。
點(diǎn)擊「開(kāi)始」按鈕，當(dāng)你一旦開(kāi)始跑步，手機(jī)基本就不再使用了，直到跑步結(jié)束。
△ NRC在運(yùn)動(dòng)狀態(tài)下的界面刪除了導(dǎo)航欄
在用戶(hù)記錄跑步這樣一個(gè)單一事件中，NRC 知道你會(huì)專(zhuān)注運(yùn)動(dòng)，很少存在關(guān)注其他功能、瀏覽其他頁(yè)面的可能性。于是 NRC 可以很干脆地刪掉導(dǎo)航欄，而返回按鈕用了界面中的「結(jié)束」按鈕代替。
滴滴出行在呼叫快車(chē)時(shí)也做了刪除導(dǎo)航欄的處理。用戶(hù)一旦發(fā)單，開(kāi)始呼叫司機(jī)時(shí)，呼叫頁(yè)面內(nèi)的所有操作都只聚集在界面下方的一個(gè)視覺(jué)區(qū)域內(nèi)。
△ 滴滴出行在呼叫過(guò)程中刪除了導(dǎo)航欄
上面兩個(gè)刪除導(dǎo)航欄的示例有什么共通點(diǎn)呢？
第一，用戶(hù)在當(dāng)前頁(yè)面的事件狀態(tài)明確，不需要導(dǎo)航標(biāo)題提醒用戶(hù)當(dāng)前在什么位置，用戶(hù)也極少可能在當(dāng)前頁(yè)面發(fā)生其他事件操作，于是完全可以去除導(dǎo)航標(biāo)題與內(nèi)容控件。
第二，雖然刪除了返回按鈕，但都采用了很典型的「費(fèi)茨定律」，就算用戶(hù)誤操作，也能便捷地撤銷(xiāo)正在發(fā)生的事件。反而這比循規(guī)蹈矩地運(yùn)用導(dǎo)航欄來(lái)承載返回按鈕合理了許多。
△ 費(fèi)茨定律簡(jiǎn)易圖解
既然導(dǎo)航欄內(nèi)所有的規(guī)范元素都有可取代方案，為什么不刪除它呢？正如 Giles Colborne 在書(shū)中告訴我們的：大膽地刪除，但也不要極端到盲目刪除。
隱藏和刪除看起來(lái)十分相似，但其實(shí)不然。我們?nèi)绾螀^(qū)分這兩個(gè)技巧呢？
隱藏最常見(jiàn)的情況是，當(dāng)導(dǎo)航欄的出現(xiàn)會(huì)成為打擾用戶(hù)沉浸體驗(yàn)的障礙時(shí)，我們會(huì)選擇隱藏，例如看視頻、瀏覽圖片等顯示全屏媒體的場(chǎng)景，有導(dǎo)航欄反而會(huì)分散用戶(hù)的注意力。
△ 顯示全屏媒體時(shí)需要隱藏導(dǎo)航欄
不知道你有沒(méi)有發(fā)現(xiàn)到一個(gè)細(xì)節(jié)，在大多數(shù)情況下，需要沉浸體驗(yàn)的頁(yè)面不但會(huì)隱藏導(dǎo)航欄，同時(shí)也會(huì)隱藏狀態(tài)欄，導(dǎo)航欄中載有當(dāng)前頁(yè)面的標(biāo)題、導(dǎo)航按鈕和內(nèi)容控件；狀態(tài)欄中會(huì)載有時(shí)間、Wi-Fi 等系統(tǒng)設(shè)備信息。
iOS 在人機(jī)交互指南中提醒我們，顯示全屏媒體時(shí)，請(qǐng)考慮暫時(shí)隱藏狀態(tài)欄，但請(qǐng)避免永久隱藏。如果沒(méi)有狀態(tài)欄，當(dāng)用戶(hù)需要查看時(shí)間或其他設(shè)備信息時(shí)必須離開(kāi)應(yīng)用。設(shè)計(jì)師應(yīng)該讓用戶(hù)可以使用簡(jiǎn)單的手勢(shì)重新顯示隱藏的狀態(tài)欄。
△ 用戶(hù)可以方便地查看時(shí)間或其他設(shè)備信息
另一種情況是當(dāng)前頁(yè)面非常注重一屏內(nèi)容展現(xiàn)時(shí)，我們會(huì)隱藏導(dǎo)航欄。
京東在用戶(hù)搜索了商品之后，頭部有三個(gè)信息欄，非常冗長(zhǎng)。分別是：
△ 京東搜索商品后屏幕頭部的信息欄
用戶(hù)在搜索了商品之后，向上滑動(dòng)頁(yè)面，京東會(huì)隱藏導(dǎo)航欄和全局篩選欄。
一是因?yàn)橛脩?hù)搜索關(guān)鍵詞后，滑動(dòng)頁(yè)面大概率表示已經(jīng)開(kāi)始在挑選商品，這時(shí)候可以大膽地猜測(cè)用戶(hù)行為，認(rèn)為搜索與排序的重要級(jí)下降了，搜索結(jié)果垂直內(nèi)容篩選的重要級(jí)上升了，便可以只保留下重要的操作。
二是可以讓內(nèi)容區(qū)域高度增加，隱藏頂部?jī)蓚€(gè)欄目區(qū)域可以大致增加一個(gè)商品位的提前露出，增大了商品觸達(dá)用戶(hù)的可能性。這不就是 UI 設(shè)計(jì)為商業(yè)目標(biāo)賦能的一個(gè)案例嗎？
△ 隱藏導(dǎo)航欄，增加了屏幕利用率
基于導(dǎo)航欄層級(jí)始終高于頁(yè)面內(nèi)容的特性，隨著用戶(hù)劃出第一屏，許多 APP 做了重要內(nèi)容或重要控件轉(zhuǎn)移到導(dǎo)航欄的設(shè)計(jì)。
豆瓣在影評(píng)討論區(qū)，用戶(hù)上滑頁(yè)面時(shí)，會(huì)將當(dāng)前影片的信息轉(zhuǎn)移到導(dǎo)航欄。其實(shí)這種轉(zhuǎn)移很常見(jiàn)，許多內(nèi)容社區(qū) APP 都有這樣的交互設(shè)計(jì)，比如瀏覽的公眾號(hào)文章，再回到頂部試試。方便用戶(hù)時(shí)刻知道自己當(dāng)前所瀏覽的內(nèi)容是關(guān)于哪一個(gè)主題的。這一類(lèi)轉(zhuǎn)移是單純站在用戶(hù)體驗(yàn)角度的考量。
△ 豆瓣在屏幕滾動(dòng)后轉(zhuǎn)移影片信息到導(dǎo)航欄
但如果你仔細(xì)觀察，有一類(lèi)轉(zhuǎn)移卻是綜合了用戶(hù)體驗(yàn)與產(chǎn)品目標(biāo)的共同抉擇。如果你再稍微了解一點(diǎn)該產(chǎn)品背后的故事，甚至可以讓你洞悉到，為了鞏固產(chǎn)品的調(diào)性和目標(biāo)，PM 和 UI 們?cè)陧?yè)面設(shè)計(jì)時(shí)做了多少細(xì)枝末節(jié)的引導(dǎo)。
知乎在用戶(hù)瀏覽當(dāng)前問(wèn)題時(shí)向上滑動(dòng)頁(yè)面，也會(huì)像豆瓣一樣，將當(dāng)前問(wèn)題標(biāo)題轉(zhuǎn)移到導(dǎo)航欄上，但與此同時(shí)會(huì)將「寫(xiě)回答」的操作也轉(zhuǎn)移到導(dǎo)航欄。標(biāo)題轉(zhuǎn)移是出于用戶(hù)體驗(yàn)，和大多數(shù)內(nèi)容社區(qū)的做法大同小異；而「寫(xiě)回答」的按鈕轉(zhuǎn)移，正符合知乎想要打造一個(gè)內(nèi)容交流社區(qū)的產(chǎn)品調(diào)性，他們希望刺激用戶(hù)進(jìn)行問(wèn)答互動(dòng)，多輸出 UGC 內(nèi)容，希望用「寫(xiě)回答」的按鈕轉(zhuǎn)移進(jìn)一步激發(fā)用戶(hù)創(chuàng)作內(nèi)容的可能性。
△ 知乎轉(zhuǎn)移「寫(xiě)回答」讓用戶(hù)更方便地進(jìn)行問(wèn)答互動(dòng)
京東在店鋪首頁(yè)上滑頁(yè)面時(shí)，會(huì)將「關(guān)注」按鈕轉(zhuǎn)移到導(dǎo)航欄，方便用戶(hù)在瀏覽的過(guò)程中可以隨時(shí)收藏店鋪，增加了用戶(hù)對(duì)品牌店鋪的關(guān)注度和復(fù)購(gòu)的可能性。京東靠自營(yíng)模式發(fā)家，近幾年來(lái)開(kāi)始慢慢重視 B2C 市場(chǎng)，在這個(gè)小小的關(guān)注按鈕上，是不是可以算略顯端倪呢？雖然我不能非?？隙?，可能提高用戶(hù)收藏操作只是為了輔助京東更好地進(jìn)行營(yíng)銷(xiāo)權(quán)重劃分，不過(guò)「關(guān)注」按鈕的轉(zhuǎn)移，確實(shí)能為 B2C 業(yè)務(wù)的滲透提供一份助力。
△ 京東轉(zhuǎn)移「關(guān)注」讓用戶(hù)更方便地收藏店鋪
所以我這里說(shuō)到的「轉(zhuǎn)移」的目的，其實(shí)和 Giles Colborne 在書(shū)中講到的并不十分一致，Giles Colborne 是希望設(shè)計(jì)師將當(dāng)前頁(yè)面低頻、冗雜的操作轉(zhuǎn)移到另一個(gè)頁(yè)面中去，而我提到的「轉(zhuǎn)移」反而是產(chǎn)品越注重什么功能，越可以利用導(dǎo)航欄層級(jí)的先天優(yōu)勢(shì)來(lái)實(shí)現(xiàn)轉(zhuǎn)移。
合理刪除、分層組織、適時(shí)隱藏和巧妙轉(zhuǎn)移已經(jīng)是我做設(shè)計(jì)和分析界面常用的一個(gè)手法，它并不一定是萬(wàn)能的，但是它多多少少可以輔助我們做出更合理的設(shè)計(jì)。
這篇文章想要告訴大家的是，在平臺(tái)規(guī)范里的導(dǎo)航欄是死板又相對(duì)靜態(tài)的，但在四個(gè)策略的輔助下，結(jié)合用戶(hù)的操作手勢(shì)，也可以將它變得十分靈活，幫助頁(yè)面實(shí)現(xiàn)更好的用戶(hù)體驗(yàn)。不要被規(guī)范限制的太死，轉(zhuǎn)換設(shè)計(jì)師的角色變成用戶(hù)，你可以研究出更多好玩的操作。隨便打開(kāi)一個(gè)應(yīng)用，去研究研究，你可能會(huì)樂(lè)在其中的。
文章來(lái)源：優(yōu)設(shè) 作者：UCD耍家
如今我們的生活，到處都是大幅圖像廣告，紛擾喧鬧的各類(lèi)短視頻與直播。這是一個(gè)快節(jié)奏時(shí)代，我們更傾向閱讀圖像。為什么我們偏愛(ài)圖像視覺(jué)超過(guò)文字？從人類(lèi)進(jìn)化角度來(lái)看，原始時(shí)代的祖先通過(guò)五感感知著這個(gè)世界，其中通過(guò)視覺(jué)來(lái)感知判斷生活，其他四感輔助之。即使后面我們發(fā)明了文字，但發(fā)展至今，對(duì)圖像的本能吸引力依舊強(qiáng)烈。因?yàn)?strong style="outline:0px;margin:0px;padding:0px;">在我們認(rèn)知的潛意識(shí)里圖像相較于文字更能讓我們快速輕松理解并記憶。
圖像如此重要，設(shè)計(jì)作品中當(dāng)然也必不可少。因?yàn)閳D片，它能一定程度上決定畫(huà)面基調(diào)；引導(dǎo)視覺(jué)流程；調(diào)劑平衡多段文字信息的枯燥性，讓閱讀變得輕松容易。
在UI設(shè)計(jì)中，我們經(jīng)常需要把設(shè)計(jì)輸出物拿給產(chǎn)品經(jīng)理或者其他有設(shè)計(jì)決斷力的人看，UI設(shè)計(jì)中圖片使用的好與壞，能很大程度上影響著決策者的感知，以及你的設(shè)計(jì)過(guò)稿率。
如下左圖：商品視角、調(diào)性、細(xì)節(jié)，都沒(méi)有右圖來(lái)的統(tǒng)一、有質(zhì)感。單看這兩張圖，會(huì)讓用戶(hù)有這樣的心理感知：左圖感覺(jué)像山寨盜版商城；右圖則會(huì)認(rèn)為是嚴(yán)肅官方認(rèn)證商城。所以，在同樣頁(yè)面布局下，不同的圖片使用與處理，能讓UI頁(yè)面的品質(zhì)有較大的感知差異。
圖片的使用如此重要。那么，我們?cè)谡阶鯱I設(shè)計(jì)前，首先需要弄清楚圖片在頁(yè)面的占比情況以及后續(xù)圖片的支撐來(lái)源問(wèn)題。
在構(gòu)思UI頁(yè)面階段，首先需要了解以下兩個(gè)問(wèn)題：1.圖片區(qū)域占比問(wèn)題；2.圖片來(lái)源問(wèn)題。當(dāng)頁(yè)面圖片占比多，且讓用戶(hù)自定義，那么需要預(yù)估到APP上線(xiàn)后設(shè)計(jì)可控率會(huì)降低。換句話(huà)說(shuō)，實(shí)際上線(xiàn)效果會(huì)不盡人意。如下圖：由于淘寶和網(wǎng)易嚴(yán)選平臺(tái)屬性不同，在圖片品控上就有著不同的視覺(jué)感受。當(dāng)然，不是說(shuō)淘寶做的不好，而是當(dāng)一個(gè)平臺(tái)集納不同的店鋪，不同調(diào)性的產(chǎn)品類(lèi)型，即使有圖片規(guī)范，也難如統(tǒng)一品類(lèi)、調(diào)性的產(chǎn)品來(lái)的統(tǒng)一。
弄清圖片內(nèi)容的可控性問(wèn)題后，開(kāi)始進(jìn)入設(shè)計(jì)環(huán)節(jié)，那么我們?cè)撊绾芜x擇圖片？
在不同的場(chǎng)合有恰當(dāng)合適的場(chǎng)景搭配，是十分基礎(chǔ)且重要的事情。在UI設(shè)計(jì)中，任何一個(gè)部分的設(shè)計(jì)以及元素運(yùn)用都需要為產(chǎn)品服務(wù)。圖片也不例外。如果你是廚房類(lèi)APP，頭圖選用小清新感的圖片，就顯得不夠合適，帶有環(huán)境食材元素的圖片才更讓用戶(hù)有共鳴。
2.是否能清晰表達(dá)產(chǎn)品核心內(nèi)容？
圖片是否主體明確？能一眼正確無(wú)誤的傳達(dá)核心內(nèi)容？會(huì)不會(huì)因?yàn)槠渌卦負(fù)屃酥黧w視覺(jué)，找不到視覺(jué)重點(diǎn)？
3.是否美觀、有品質(zhì)、讓人想擁有？
圖片是否能表達(dá)美好生活以及美好品質(zhì)的向往？光影關(guān)系是否自然？圖片是否高清有細(xì)節(jié)？
當(dāng)明白圖片如何選擇后，還想和你分享一些冷門(mén)且重要的圖片過(guò)稿小技巧。記下來(lái)，將大大提升你的設(shè)計(jì)過(guò)稿率。
漂亮圖片有很多，如果我們都以漂亮為基準(zhǔn)，找出來(lái)的圖片也會(huì)形色各異。由于用戶(hù)的實(shí)際使用場(chǎng)景是：瀏覽一個(gè)完整APP，統(tǒng)一風(fēng)格調(diào)性比美更重要。如果商品角度不一樣；飽和度高低不同；抽象與具象等，都會(huì)形成產(chǎn)品不統(tǒng)一，用戶(hù)視覺(jué)不適應(yīng)等問(wèn)題。
有時(shí)我們?yōu)榱粟s時(shí)間，直接用圖片填充插件，讓圖片區(qū)域自動(dòng)填充。但我還是想要給到你這樣一個(gè)建議：一個(gè)專(zhuān)業(yè)且成熟的設(shè)計(jì)師，即使是設(shè)計(jì)初稿，也不能隨便拿張圖，湊合一下。任何時(shí)候的匯報(bào)，都需要有著處女座對(duì)于事物的完美要求，過(guò)自己這關(guān)。因?yàn)槿魏螘r(shí)候你的表達(dá)與表現(xiàn)，都形成了你在別人心目中專(zhuān)不專(zhuān)業(yè)的看法，從而影響著后續(xù)的設(shè)計(jì)話(huà)語(yǔ)權(quán)問(wèn)題。如下圖都是商城陳列頁(yè)面，右側(cè)的圖片給出上線(xiàn)的實(shí)際效果，更貼合產(chǎn)品，方便設(shè)計(jì)決策者給出建議方向，或做出決策。
我們都是視覺(jué)動(dòng)物，不管你是否愿意承認(rèn)：我們常常通過(guò)視覺(jué)表象，才決定是否愿意去更深入的了解某個(gè)東西。
設(shè)計(jì)就是在做產(chǎn)品視覺(jué)表象的表達(dá)，我們需要盡可能使用貼切的，漂亮的圖片。讓UI視覺(jué)看起來(lái)更加美觀，讓用戶(hù)愿意停留，認(rèn)可以及信賴(lài)平臺(tái)。
轉(zhuǎn)自：站酷-丘丘的設(shè)計(jì)筆記
對(duì)于以下場(chǎng)景，你是不是有那么一點(diǎn)點(diǎn)熟悉：
視覺(jué)A：「視覺(jué) B，把你之前的稿子發(fā)我下，我的頁(yè)面里也有組件 A」
視覺(jué)A：「稿子里的組件 A 怎么跟視覺(jué) C 剛剛發(fā)群里的不一樣啊，我以哪個(gè)為主？」
視覺(jué)B：「剛剛業(yè)務(wù)通知組件 A 得修改，這次大促有 30+ 個(gè)頁(yè)面都用到，這修改量這么大咋辦？」
交互A：「這個(gè) tab 上的文字看不清」，視覺(jué)A：「我覺(jué)得挺清晰的了」
開(kāi)發(fā)：「為什么每次給的設(shè)計(jì)稿，明明長(zhǎng)得都差不多，可尺寸就差了幾個(gè)像素，我又得寫(xiě)新的樣式表進(jìn)去」
以上的對(duì)話(huà)，在大型且多人合作的項(xiàng)目中尤為常見(jiàn)。
隨著大促項(xiàng)目體量越來(lái)越大，參與人員越來(lái)越多，這些問(wèn)題越發(fā)明顯，直接影響了活動(dòng)的視覺(jué)統(tǒng)一性和整體的工作效率。因此我們開(kāi)展了營(yíng)銷(xiāo)組件庫(kù)的設(shè)計(jì)。
組件庫(kù)就是界面設(shè)計(jì)常用控件或元件的集合，「組」是設(shè)計(jì)元素的組合方式，「件」由不同的元件組成。
其工作方式和樂(lè)高原理差不多，玩家（設(shè)計(jì)師）通過(guò)小元件（設(shè)計(jì)元素）或組件（模板）的不同組合形式，層層搭建和嵌套，最終組成建筑（頁(yè)面）。
△ 樂(lè)高W16搭建過(guò)程，圖片來(lái)自「什么值得買(mǎi)」
△ 頁(yè)面設(shè)計(jì)過(guò)程
1. 保證用戶(hù)體驗(yàn)的一致性
對(duì)于大促這種含有多個(gè)子項(xiàng)目，涉及到 30+ 的頁(yè)面同期輸出的復(fù)雜項(xiàng)目，每個(gè)獨(dú)立的子項(xiàng)目雖然在需求上有一定區(qū)別，但整體的用戶(hù)體驗(yàn)需要滿(mǎn)足基本的一致性，減少用戶(hù)認(rèn)知和負(fù)擔(dān)，提高用戶(hù)的使用效率。組件庫(kù)的建立，其統(tǒng)一的設(shè)計(jì)語(yǔ)言能保持設(shè)計(jì)結(jié)果的統(tǒng)一性，避免多人多風(fēng)格的現(xiàn)象。
2. 提升效率
不同行業(yè)、不同產(chǎn)品、不同項(xiàng)目的組件庫(kù)因其業(yè)務(wù)特點(diǎn)不同，其差異會(huì)非常大。那怎樣的組件庫(kù)才能滿(mǎn)足「大促營(yíng)銷(xiāo)類(lèi)」的項(xiàng)目需求？
分析研究
行業(yè)設(shè)計(jì)：行業(yè)優(yōu)秀的設(shè)計(jì)系統(tǒng)、組件庫(kù)搭建思維，以及其源文件，是最寶貴的學(xué)習(xí)資源。
主站設(shè)計(jì)：保證全站設(shè)計(jì)的一致性的同時(shí)，也是重要的學(xué)習(xí)參考；
過(guò)往問(wèn)題：對(duì)過(guò)去項(xiàng)目的橫向和縱向?qū)Ρ群头治觯斫鈽I(yè)務(wù)結(jié)構(gòu)以及特點(diǎn)，從需求出發(fā)，拆解頁(yè)面表達(dá)結(jié)構(gòu)和所需組件的特點(diǎn)。
設(shè)計(jì)方向
通過(guò)前期的分析，明確了針對(duì)營(yíng)銷(xiāo)大促類(lèi)組件庫(kù)的設(shè)計(jì)方向：
拆分重組的組件化思維，解決模板靈活性和一致性的訴求
在設(shè)計(jì)方法上，我以 2013 年 Brad Forst 提出的原子設(shè)計(jì)方法論作為指導(dǎo)。方法的本質(zhì)其實(shí)就是將頁(yè)面拆解為最小元素（原子），然后原子可以演變成分子，分子通過(guò)多維度的組合形式成為組織，再到模板，最終生成頁(yè)面（原理如下圖）。
營(yíng)銷(xiāo)需求的多變性體現(xiàn)在分子的組合方式各不相同，但其共用特征是最小元素（原子）基本相同，因此統(tǒng)一最小元素，定義其組合的規(guī)則，即可從源頭把控設(shè)計(jì)的一致性。同時(shí)通過(guò)特定的組合原則，設(shè)計(jì)師結(jié)合各項(xiàng)目需求根據(jù)組合和應(yīng)用原則（布局、文字等）進(jìn)行設(shè)計(jì)，從而實(shí)現(xiàn)其靈活性。
原子設(shè)計(jì)理論延展閱讀：
明確了設(shè)計(jì)方向和設(shè)計(jì)方法后，結(jié)合營(yíng)銷(xiāo)項(xiàng)目自身的特點(diǎn)，開(kāi)始了組件庫(kù)的設(shè)計(jì)實(shí)施，整體流程如下：
梳理組件庫(kù)
將近幾期具有典型代表的頁(yè)面收集整理分析，主要是為了以下 2 個(gè)方面的內(nèi)容
ps：組件庫(kù)強(qiáng)調(diào)的是通用和復(fù)用，因此無(wú)需把所有模塊都納入整理清單，做「合適」的，而不是大而全但可能臃腫的組件庫(kù)。關(guān)于這個(gè)組件庫(kù)的體量應(yīng)該如何選擇，可以看下文末的參考文獻(xiàn)。
設(shè)計(jì)環(huán)節(jié)
梳理完組件庫(kù)，按照原子設(shè)計(jì)方法論組件嵌套的形式進(jìn)行組件設(shè)計(jì)。在 Brad 的概念里，是將系統(tǒng)分為了 5 個(gè)層級(jí)，但針對(duì)營(yíng)銷(xiāo)業(yè)務(wù)的多變性，要滿(mǎn)足復(fù)用性和靈活性，越往上的層級(jí)復(fù)用性越差，因此在現(xiàn)階段，采用了 3 個(gè)層級(jí)「原子-分子-組織」構(gòu)成營(yíng)銷(xiāo)組件庫(kù)。
「全局考慮」在設(shè)計(jì)的整個(gè)過(guò)程中，需考慮每個(gè)組件后續(xù)的使用場(chǎng)景以及設(shè)計(jì)師的使用方法，利用 sketch 功能（symbol 嵌套、豐富的配置項(xiàng)、響應(yīng)式設(shè)計(jì)等），可以設(shè)計(jì)出一個(gè)高通用性的組件（如下圖），以此達(dá)到增強(qiáng)每個(gè)組件的復(fù)用性，以及精簡(jiǎn)組件庫(kù)的目的。（因文章篇幅受限，詳細(xì)內(nèi)容可見(jiàn)文末參考文獻(xiàn)）
下面為每一個(gè)層級(jí)的詳細(xì)設(shè)計(jì)：
第一層：「原子」是最基本和最小顆粒度的單位，工作中常以「元素」命名，例如：顏色、文字、圖標(biāo)、分割線(xiàn)等
布局：系統(tǒng)布局規(guī)范，需要通過(guò)統(tǒng)一的設(shè)計(jì)元素和間距規(guī)范去引導(dǎo)使用者們使用并且能夠適配不同屏幕尺寸，目的是達(dá)到一致性，可適配、可控性原則。
「網(wǎng)格系統(tǒng)」通過(guò)前期的研究，網(wǎng)格系統(tǒng)采用的是目前最常用的「8點(diǎn)網(wǎng)格」，能更好地適配不同屏幕尺寸，2 倍的變化均能更好地保持偶數(shù)，不出現(xiàn)小數(shù)點(diǎn)的情況。
「設(shè)計(jì)原則」遵循格式塔理論：建立良好的信息層級(jí)，能讓用戶(hù)快速獲取和理解有用、感興趣的信息，并產(chǎn)生下一步行為。
顏色體系：「色值標(biāo)準(zhǔn)」為保證文本可識(shí)別性，結(jié)合Web內(nèi)容無(wú)障礙指南（WCAG）2.0標(biāo)準(zhǔn)，做了以下定義：
顏色對(duì)比度檢測(cè)工具：https://contrast-finder.tanaguru.com/
「衍生色設(shè)定規(guī)則」規(guī)律性設(shè)定衍生色，更好地打造頁(yè)面信息層級(jí)
根據(jù)以上規(guī)則設(shè)定顏色體系
文字體系：項(xiàng)目中字體根據(jù)實(shí)現(xiàn)類(lèi)型分為系統(tǒng)字體以及圖片字體
「系統(tǒng)字體」為了較好的用戶(hù)瀏覽體驗(yàn)，設(shè)計(jì)中優(yōu)先采用開(kāi)發(fā)直接寫(xiě)的系統(tǒng)實(shí)現(xiàn)的字體類(lèi)型，不會(huì)因適配而產(chǎn)生文字不清晰或做圖時(shí)不同系統(tǒng)渲染效果不同導(dǎo)致的不統(tǒng)一。
「圖片字體」考慮到版權(quán)，以及字體在不同系統(tǒng)下渲染差異化的原因，選擇了免費(fèi)商用的思源黑體。
基礎(chǔ)原子：「靈活性設(shè)置」充分考慮應(yīng)用場(chǎng)景，利用 sketch 功能提高其包容性和靈活性。
第二層：「分子」原子排列組合構(gòu)成了分子，工作中多以「模板」命名，例如：品牌模板、單品模板等
「局部到整體，整體到局部」原子和分子，其實(shí)是一個(gè)系統(tǒng)中，相互依賴(lài)的元素。因此在分子的設(shè)計(jì)過(guò)程中，會(huì)遇到原子包容性不足的情況，因此實(shí)際設(shè)計(jì)中，是不斷在原子分子之間切換設(shè)計(jì)，不斷完善各自的設(shè)計(jì)。
第三層：「組織」原子、分子排列組合構(gòu)成了組織，工作中多以「模塊」命名，例如：商品列表、內(nèi)容卡片、入口模塊、瀑布流圖等
「保持克制，寧缺毋濫」該層面設(shè)計(jì)時(shí)，「局部影響整體，整體影響局部」的關(guān)系體現(xiàn)得更為明顯，會(huì)在原子/分子/組織三個(gè)層面不斷切換，進(jìn)一步完善各個(gè)層面的設(shè)計(jì)。但過(guò)程中需保持克制，所有的設(shè)計(jì)應(yīng)是圍繞「復(fù)用性」和「靈活性」進(jìn)行設(shè)計(jì)的，而非組合方式越多越好，多即意味著一致性在一定程度會(huì)受到影響。因此，應(yīng)是從過(guò)往項(xiàng)目中，預(yù)測(cè)未來(lái)可能出現(xiàn)的情況，窮舉后提取通用的組合規(guī)則后進(jìn)行設(shè)計(jì)。
過(guò)程中多嘗試不同方案設(shè)計(jì)，結(jié)合實(shí)際項(xiàng)目測(cè)試，擇取最優(yōu)方案。
整理設(shè)計(jì)文件，輸出設(shè)計(jì)規(guī)范文檔和使用說(shuō)明。除了整理設(shè)計(jì)文件，梳理設(shè)計(jì)規(guī)范外，組件庫(kù)相當(dāng)于一個(gè)產(chǎn)品，需要有一份使用說(shuō)明，為用戶(hù)提供基礎(chǔ)學(xué)習(xí)，提升團(tuán)隊(duì)成員的使用效率。
4. 迭代設(shè)計(jì)和維護(hù)
一個(gè)優(yōu)秀的組件庫(kù)絕不是 30 天速成班就結(jié)束的項(xiàng)目，而是一款產(chǎn)品，需有專(zhuān)人長(zhǎng)期的跟進(jìn)和維護(hù)，例：優(yōu)化組件包容性；補(bǔ)充組織的種類(lèi)等，從而逐步建立起適用于團(tuán)隊(duì)的組件庫(kù)。
1. 打造組件庫(kù)的幾個(gè)關(guān)鍵步驟
2. 項(xiàng)目成果
組件庫(kù)在 19 年雙 11 項(xiàng)目中的應(yīng)用，統(tǒng)一性顯著提升，對(duì)比往年節(jié)省 76 人/天，平均效率提升 30%，其中主會(huì)場(chǎng)提升了 50%。
3. 項(xiàng)目反思
4. 設(shè)計(jì)小感悟：
這里討論的是從細(xì)節(jié)處提升表單的設(shè)計(jì)
最近一直在做公司的內(nèi)部辦公項(xiàng)目，涉及到了排版和表單的問(wèn)題最多，而且大部分都是來(lái)自于網(wǎng)頁(yè)端的改版，因此在畫(huà)界面的時(shí)候，關(guān)于表單里很多小細(xì)節(jié)都不太清楚，并且界面十分的冗長(zhǎng)，因此就想把這段時(shí)間關(guān)于表單的設(shè)計(jì)做一個(gè)簡(jiǎn)單的總結(jié)，希望能幫到大家。
我們今天換個(gè)角度來(lái)說(shuō)，最近學(xué)了原子設(shè)計(jì)，所以我們從原子的角度上將表單拆開(kāi)來(lái)說(shuō)，讓我們更全面細(xì)節(jié)的了解表單，分為以下六個(gè)模塊：結(jié)構(gòu)、標(biāo)簽、操作、幫助、驗(yàn)證、反饋，首先我們先了解一下表單是什么？
表單是我們?cè)诰W(wǎng)頁(yè)和APP中使用頻率比較高的模塊，大多是數(shù)據(jù)采集的功能，并且都是需要用戶(hù)自己填寫(xiě)或者編輯的，因此會(huì)在很多功能模塊中見(jiàn)到，例如12306的信息填寫(xiě)頁(yè)，個(gè)人中心信息、評(píng)論和動(dòng)態(tài)發(fā)布以及登錄頁(yè)等等。
我從項(xiàng)目當(dāng)中最深切的感受就是產(chǎn)品太摳了，網(wǎng)頁(yè)上的信息哪個(gè)都舍不得刪，整個(gè)搬下來(lái)，導(dǎo)致頁(yè)面使用下來(lái)用戶(hù)的體驗(yàn)很差，雖然很多時(shí)候表單里的一些內(nèi)容是無(wú)法去掉的，但是還是希望能夠簡(jiǎn)化表單，如下圖所示：
用戶(hù)注冊(cè)表單時(shí)要一并填寫(xiě)姓名和生日，這種與注冊(cè)無(wú)關(guān)的信息填寫(xiě)除了增加用戶(hù)的提高留時(shí)間之外，降低對(duì)產(chǎn)品的好感度
信息的填寫(xiě)最好是從用戶(hù)相對(duì)無(wú)抵觸的信息開(kāi)始逐漸到隱私的信息，而不是一開(kāi)始就讓用戶(hù)萌生退意，如下圖所示：
自如的房東簽約里的內(nèi)容個(gè)人覺(jué)得門(mén)檻還是挺高的，剛選擇完自己的行業(yè)，就要填寫(xiě)公司的名稱(chēng)和地址，以及學(xué)歷信息，這種比較隱私的問(wèn)題一開(kāi)始就讓用戶(hù)填寫(xiě)，其實(shí)會(huì)讓用戶(hù)對(duì)這個(gè)產(chǎn)品萌生退意。
如果實(shí)在是信息量很大但一定要在一個(gè)界面里展示，那么就將相關(guān)的內(nèi)容進(jìn)行分類(lèi)組合，并且通過(guò)增加一些額外的空間或者主標(biāo)題來(lái)分類(lèi)。如下圖所示：
12306、愛(ài)彼迎以及知乎的個(gè)人信息填寫(xiě)都比較多，但是將信息分類(lèi)以后，就增加了頁(yè)面呼吸和節(jié)奏感，從而幫助用戶(hù)更加輕松完成表單。
而且這里在設(shè)計(jì)的時(shí)候需要注意的一個(gè)是分割形式，上圖的三個(gè)例子分別使用了背景分割和留白分割，其中留白分割在填寫(xiě)時(shí)使用的比較多，因?yàn)榇蠹乙⒁獾氖窃诰庉嫚顟B(tài)是有很多填寫(xiě)提示的下劃線(xiàn)，背景分割或者分割線(xiàn)分割勢(shì)必會(huì)造成視覺(jué)上分割感更強(qiáng)，因此在編輯狀態(tài)留白風(fēng)格是比較好的選擇辦法。
但是展示的時(shí)候分割線(xiàn)確實(shí)比較好的選擇辦法，如下圖所示：
在表單中，標(biāo)簽問(wèn)題比較多的在于標(biāo)簽的位置放在那里，我們經(jīng)?？吹降挠凶髮?duì)齊、右對(duì)齊、頂部對(duì)齊和浮動(dòng)標(biāo)簽。如下圖所示：
浮動(dòng)標(biāo)簽和頂部對(duì)齊目前來(lái)說(shuō)是使用的比較少的情況，這種位置符合自然視線(xiàn)，能夠快速幫助用戶(hù)完成表單，但是卻用的不是很多，因?yàn)殛P(guān)于表單的填寫(xiě)，產(chǎn)品還是希望用戶(hù)能夠慢下來(lái)的，通過(guò)左右閱讀，讓用戶(hù)仔細(xì)閱讀標(biāo)簽，如下圖所示：
目前手機(jī)端使用較多的是右對(duì)齊為主，畢竟用戶(hù)理解和填寫(xiě)速度都屬于適中。
在操作的設(shè)計(jì)問(wèn)題上，我們一般拿不準(zhǔn)的就是不知道按鈕要放在界面右上角還是下方，我們先說(shuō)第一種：
這是目前不管是設(shè)計(jì)還是使用，都是界面中出現(xiàn)頻次比較高的一種方式，如下圖所示：
這種形式適用于界面信息內(nèi)容不多，并且用戶(hù)的可控性比較強(qiáng)，在UGC的產(chǎn)品中較多出現(xiàn)。
優(yōu)勢(shì)：按鈕的視覺(jué)層級(jí)不是很高，方便用戶(hù)更專(zhuān)注于當(dāng)前頁(yè)面的填寫(xiě)
缺點(diǎn)：按鈕在右上角，不太方便用戶(hù)一只手操作。
用主題色作為按鈕的主色，并且固定在界面底部位置，如下圖所示：
優(yōu)點(diǎn)：位于屏幕下方，方便用戶(hù)點(diǎn)擊，同時(shí)視覺(jué)層級(jí)高能夠吸引用戶(hù)的注意力
缺點(diǎn)：會(huì)遮擋表單，導(dǎo)致用戶(hù)會(huì)錯(cuò)過(guò)一些信息，因此這樣的按鈕大部分都是會(huì)放在信息不重要或者不用完全都填寫(xiě)的表單界面上。
這里的底部與第二種不同，第二種是固定在界面的底部，但是這種是固定在表單的底部，如下圖所示：
優(yōu)點(diǎn)：符合用戶(hù)的閱讀習(xí)慣，同時(shí)能夠引導(dǎo)用戶(hù)將表單信息看完，因此這種比較適合用在表單有必填項(xiàng)目的表單中使用。
缺點(diǎn)：如果表單內(nèi)容比較少，在視覺(jué)上就會(huì)顯得擁擠
幫助提示大多出現(xiàn)在產(chǎn)品的登錄頁(yè)和隱私信息的填寫(xiě)界面，不同的步驟需要考慮不同的情況。
未填寫(xiě)時(shí)給與用戶(hù)的提示，這種情況是最常見(jiàn)的表單形式，如下圖所示：
將需要用戶(hù)填寫(xiě)的表單信息給予的一定的提示和解釋?zhuān)矒嵊脩?hù)在面對(duì)大量需要填寫(xiě)信息時(shí)的情緒。
填寫(xiě)驗(yàn)證后出現(xiàn)報(bào)錯(cuò)或者不符合要求時(shí)，需要作出反饋，可以有下圖幾種情況：
上圖中兩種不同的情況，針對(duì)性的報(bào)錯(cuò)和局部的報(bào)錯(cuò)，都分別代表了不同的場(chǎng)景，個(gè)人認(rèn)為針對(duì)性的報(bào)錯(cuò)在登錄頁(yè)的報(bào)錯(cuò)上也能夠極大的提高用戶(hù)的體驗(yàn)。
在用戶(hù)未對(duì)當(dāng)前頁(yè)面有操作時(shí)，按鈕需有不同的表現(xiàn)形式，讓用戶(hù)對(duì)操作的行為及結(jié)果有預(yù)先的心理感知，如下圖所示：
很多操作前的按鈕都會(huì)置灰，顯示不可點(diǎn)擊的狀態(tài)，除了給用戶(hù)提示之外，也是為了避免誤操作，當(dāng)然現(xiàn)在還有一種方法就是如果誤觸頁(yè)面會(huì)有提示
點(diǎn)擊按鈕后給頁(yè)面增加一些微動(dòng)效，提起用戶(hù)的興趣，同時(shí)提升表單的轉(zhuǎn)化率。
轉(zhuǎn)自；站酷-潘團(tuán)子
本文分享國(guó)際化司機(jī)端首頁(yè)改版完整思考過(guò)程，化繁為簡(jiǎn)提升司機(jī)使用效率，提升產(chǎn)品用戶(hù)體驗(yàn)。
隨著滴滴國(guó)際化業(yè)務(wù)腳步不斷加快，司機(jī)端始終是作為承載全球化業(yè)務(wù)運(yùn)力的基礎(chǔ)保障。
同時(shí)，在移動(dòng)通信技術(shù)高速發(fā)展的背景下，不同國(guó)家間的傳輸速度與硬件設(shè)備差距正在不斷縮小，用戶(hù)對(duì)應(yīng)用產(chǎn)品的期望由基礎(chǔ)的可接受、可使用、功能齊全，向更易用、簡(jiǎn)約、更為專(zhuān)注的產(chǎn)品使用體驗(yàn)上轉(zhuǎn)變。
在新階段下，「為全球司機(jī)用戶(hù)提供一個(gè)「克制」「可依賴(lài)」的產(chǎn)品使用體驗(yàn)」、「為業(yè)務(wù)拓展提供有力的體驗(yàn)支撐」是體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)在新的階段下提出的目標(biāo)。
2018 年 9 月我們與產(chǎn)品同學(xué)深入拉美當(dāng)?shù)貙?duì)司機(jī)側(cè)進(jìn)行為期 2 周的產(chǎn)品體驗(yàn)調(diào)研。雖然在當(dāng)?shù)氐臅r(shí)間較為短暫，但是我們依舊感受到了拉美國(guó)家的習(xí)俗文化和人文特點(diǎn)。
相比中國(guó)人的含蓄內(nèi)斂，巴西與墨西哥人顯然更加熱情隨和。
在巴西，這個(gè)世界上假期最多的國(guó)家，處處體現(xiàn)著人們對(duì)生活的享受才是自始至終的追求。無(wú)論是世界杯一個(gè)月狂歡長(zhǎng)假，還是周末下午兩點(diǎn)開(kāi)門(mén)的商區(qū)，總會(huì)讓人羨慕的同時(shí)刷新你對(duì)享受生活的認(rèn)知。
而娛樂(lè)至上的墨西哥人，熱情友好，能歌善舞，我們常說(shuō)的放飛自我在這里幾乎成為墨西哥人每天的生活常態(tài)。他們喜歡享受當(dāng)下，后天下之憂(yōu)而憂(yōu)。他們覺(jué)得工作賺錢(qián)就是為了更好的休息，大多數(shù)人每天都是開(kāi)朗樂(lè)觀的處世態(tài)度。
同樣，落后的基礎(chǔ)建設(shè)、糟糕的交通狀況、教育水平低下、價(jià)格昂貴的電子產(chǎn)品以及相對(duì)不太穩(wěn)定的社會(huì)環(huán)境，也是它們共同存在的問(wèn)題。
在當(dāng)?shù)兀覀兺ㄟ^(guò)實(shí)地調(diào)研與用戶(hù)訪談等方式，針對(duì)產(chǎn)品體驗(yàn)的問(wèn)題與司機(jī)進(jìn)行面對(duì)面溝通。收集了很多寶貴的用研資料與司機(jī)訴求，如司機(jī)希望平臺(tái)為他們推薦訂單引導(dǎo)，司機(jī)希望獲得更多的實(shí)時(shí)動(dòng)態(tài)訊息和司機(jī)每天都可以查看自己的收入狀況等，集中體現(xiàn)在效率、感知、體驗(yàn)這三大方面。
其次，伴隨著業(yè)務(wù)的不斷增長(zhǎng)，越來(lái)越多的功能使得我們的產(chǎn)品變的更加復(fù)雜，舊版的框架布局早已是不堪重負(fù)，無(wú)論是現(xiàn)存的體驗(yàn)優(yōu)化問(wèn)題，還是未來(lái)業(yè)務(wù)功能的拓展問(wèn)題，舊的框架體系都是難以為繼，無(wú)法再通過(guò)簡(jiǎn)單的修補(bǔ)來(lái)滿(mǎn)足用戶(hù)和業(yè)務(wù)未來(lái)的訴求。
改版升級(jí)對(duì)產(chǎn)品本身來(lái)說(shuō)是一件非常重要的事情，需要對(duì)多方因素進(jìn)行慎重考慮。經(jīng)過(guò)多次的溝通討論，權(quán)衡改版對(duì)產(chǎn)品可能產(chǎn)生的利弊關(guān)系，采用小步快跑，快速試錯(cuò)，分階段分模塊的方式進(jìn)行。
首頁(yè)既作為承載核心功能（發(fā)車(chē)）的載體又是其他重要板塊的分發(fā)的入口，在內(nèi)容呈現(xiàn)與用戶(hù)感知上都存在很大的體驗(yàn)提升空間；我們通過(guò)拆解業(yè)務(wù)中長(zhǎng)遠(yuǎn)需求規(guī)劃得知，大多數(shù)重點(diǎn)需求依賴(lài)于首頁(yè)框架布局，而現(xiàn)存首頁(yè)框架無(wú)法滿(mǎn)足業(yè)務(wù)訴求；在競(jìng)品的改版中首頁(yè)的變化最大，并在司機(jī)群體中取得比較正向的反饋；通過(guò)上述分析，決定率先對(duì)首頁(yè)進(jìn)行優(yōu)化改造。
首先我們與產(chǎn)品、運(yùn)營(yíng)側(cè)進(jìn)行深入討論，結(jié)合用戶(hù)訪談?wù)淼挠脩?hù)訴求，對(duì)此次首頁(yè)改版的目標(biāo)達(dá)成一致。
在舊版的框架體系中，大量信息在首頁(yè)呈現(xiàn)，功能層級(jí)復(fù)雜，重點(diǎn)功能難以突破和查找，關(guān)聯(lián)較弱的信息架構(gòu)嚴(yán)重影響和分散了司機(jī)的關(guān)注點(diǎn)。隨著業(yè)務(wù)模式不斷擴(kuò)展，首頁(yè)新需求類(lèi)型逐漸增多，一套更加具備靈活的拓展能力和管理能力的首頁(yè)框架尤為重要。
首先我們將舊版的首頁(yè)布局打破重建，對(duì)現(xiàn)有模塊進(jìn)行整理。功能相似、定義模糊、司機(jī)操作相對(duì)低頻的模塊進(jìn)行合并、刪減。
對(duì)司機(jī)高頻操作模板進(jìn)行場(chǎng)景劃分，將相關(guān)信息進(jìn)行聚合處理，通過(guò)對(duì)入口的強(qiáng)化，來(lái)明確司機(jī)對(duì)不同模塊的認(rèn)知。
出車(chē)管理
將與出車(chē)相關(guān)信息進(jìn)行組織聚合，結(jié)合司機(jī)不同的使用場(chǎng)景，將功能與模塊進(jìn)行結(jié)合，加強(qiáng)認(rèn)知，減少司機(jī)多余的思考與判斷，快速響應(yīng)，提升工作效率，同樣也為業(yè)務(wù)在有關(guān)出車(chē)功能方面提供靈活可拓展的組件框架。
收入管理
通過(guò)顯示司機(jī)最關(guān)注的今日收入信息，為司機(jī)提供方便快捷的查看功能，使司機(jī)更專(zhuān)注于工作本身。同時(shí)對(duì)收入管理入口起到了強(qiáng)化認(rèn)知作用。
信息管理
對(duì)關(guān)于個(gè)人相關(guān)的信息通知及功能操作進(jìn)行聚合，方便司機(jī)對(duì)個(gè)人信息進(jìn)行快速查看，提高查看效率。
通過(guò)對(duì)框架模塊的標(biāo)準(zhǔn)化定義，后續(xù)的業(yè)務(wù)需求便可以進(jìn)行歸類(lèi)管理，根據(jù)不同需求的不同屬性，結(jié)合功能使用場(chǎng)景，選擇合適的模塊進(jìn)行展示，提高司機(jī)使用效率同時(shí)增加首頁(yè)的業(yè)務(wù)框架擴(kuò)展能力。
通過(guò)對(duì)框架的重構(gòu)，有效的解決了首頁(yè)信息承載壓力過(guò)大，功能層級(jí)復(fù)雜的問(wèn)題，同時(shí)地圖的面積相比舊版首頁(yè)也大幅增加，信息呈現(xiàn)更加簡(jiǎn)潔、輕量。
出車(chē)操作作為首頁(yè)的核心功能，通過(guò)調(diào)研得知，司機(jī)普遍反映在舊版首頁(yè)中存在出車(chē)操作感知弱、收出車(chē)狀態(tài)區(qū)分不明顯的問(wèn)題，對(duì)司機(jī)的操作體驗(yàn)和感知體驗(yàn)造成了比較大困惑。
在首頁(yè)改版過(guò)程中我們著重對(duì)出車(chē)操作進(jìn)行了設(shè)計(jì)分析，基于對(duì)業(yè)務(wù)的了解和競(jìng)品的分析，得出以下三個(gè)結(jié)論：
通過(guò)「兩強(qiáng)一弱」，減少司機(jī)困惑提升發(fā)單效率的同時(shí)，間接的延長(zhǎng)司機(jī)的在線(xiàn)時(shí)長(zhǎng)。
完成頁(yè)面設(shè)計(jì)后我們發(fā)現(xiàn)，操作按鈕通過(guò)靜態(tài)視覺(jué)角度去表達(dá)收出車(chē)空間位置關(guān)系是十分困難的，僅通過(guò) Toast 提示會(huì)造成用戶(hù)理解的斷層，于是提出使用動(dòng)效去進(jìn)行「搭線(xiàn)」串聯(lián)，搭線(xiàn)發(fā)車(chē)前按鈕的點(diǎn)擊和收納后的位置提醒進(jìn)行視覺(jué)體驗(yàn)上的串聯(lián)，從而達(dá)成感知增強(qiáng)，解決視覺(jué)體驗(yàn)層面不容易解決的問(wèn)題。
豐富的訂單獎(jiǎng)勵(lì)活動(dòng)是我們與競(jìng)品相比重要的競(jìng)爭(zhēng)優(yōu)勢(shì)，司機(jī)在完成定量訂單的同時(shí)提供了更多的額外收入。查看每日獎(jiǎng)勵(lì)活動(dòng)，已成大多數(shù)司機(jī)每日上線(xiàn)必做的事情。
與舊版相比，在新版首頁(yè)中通過(guò)提升獎(jiǎng)勵(lì)入口層級(jí)，縮短了查看獎(jiǎng)勵(lì)活動(dòng)操作路徑，從而方便司機(jī)快速查看。
通過(guò)首頁(yè)透?jìng)鞯莫?jiǎng)勵(lì)卡片，司機(jī)在首頁(yè)即可獲取到推送的獎(jiǎng)勵(lì)相關(guān)信息，及時(shí)獲取到獎(jiǎng)勵(lì)預(yù)告和進(jìn)度，提升了司機(jī)工作效率的同時(shí)加強(qiáng)了司機(jī)對(duì)獎(jiǎng)勵(lì)活動(dòng)的感知。
在經(jīng)歷了快速奔跑的粗放階段，我們也在思考司機(jī)端產(chǎn)品究竟以怎樣的品牌氣質(zhì)傳遞給海外的司機(jī)群體。
在當(dāng)?shù)?，我們?cè)谒緳C(jī)心目中更像是合作伙伴，憑借真誠(chéng)互利的態(tài)度贏得了當(dāng)?shù)厮緳C(jī)的用戶(hù)。
真誠(chéng)、熱情與融合我想這就是我們想要傳達(dá)的核心品牌情感，而克制、可依賴(lài)將作為產(chǎn)品體驗(yàn)的設(shè)計(jì)原則貫穿始終。
顏色系統(tǒng)
司機(jī)端顏色系統(tǒng)在基于現(xiàn)有品牌色基礎(chǔ)上，結(jié)合不同國(guó)家顏色文化的理解，新增加符合本地化的輔助色系，以提升產(chǎn)品的親和力，傳遞品牌情感。
文字系統(tǒng)
針對(duì)司機(jī)用戶(hù)的操作使用場(chǎng)景，對(duì)文字字號(hào)梯度進(jìn)行提升，通過(guò)文字粗細(xì)、顏色、大小加強(qiáng)信息對(duì)比度，使司機(jī)在更多復(fù)雜場(chǎng)景下可快速獲取重要信息，提升閱讀體驗(yàn)。
在此次改版中新引入 Barlow 與 DIN Alternate 字族作為模式數(shù)字展示字體，兩款字體分別為 Android 及 iOS 系統(tǒng)下默認(rèn)包含字體，相比 Roboto 與 SF Pro text 兩款字族，在數(shù)字展示上更為明確、識(shí)別性更強(qiáng)，同時(shí)因?yàn)樽陨怼咐w瘦」的特性，在屏幕橫向面積上節(jié)省更多空間。
業(yè)務(wù)在不同的階段有不同的側(cè)重方向及打法，設(shè)計(jì)側(cè)根據(jù)業(yè)務(wù)所處階段應(yīng)及時(shí)的調(diào)整自身的目標(biāo)定位，快速響應(yīng)，積極探索設(shè)計(jì)的機(jī)會(huì)和突破點(diǎn)，在不同的階段發(fā)揮自身價(jià)值，助力業(yè)務(wù)達(dá)成共同目標(biāo)，為用戶(hù)創(chuàng)造更便捷的產(chǎn)品使用體驗(yàn)。
首頁(yè)改版從立項(xiàng)到設(shè)計(jì)再到研發(fā)，多部門(mén)同學(xué)緊密配合，在有限的時(shí)間內(nèi)最大化的完成預(yù)期上線(xiàn)效果。
全量上線(xiàn)后，通過(guò)問(wèn)卷對(duì)首頁(yè)改版進(jìn)行滿(mǎn)意度收集，司機(jī)對(duì)新版首頁(yè)的滿(mǎn)意度平均值高達(dá) 93%。取得的成績(jī)離不開(kāi)每一位參與改版的同學(xué)支持，也得益于國(guó)際化團(tuán)隊(duì)自始至終對(duì)產(chǎn)品體驗(yàn)的重視與認(rèn)同。
作為司機(jī)端體驗(yàn)升級(jí)的第一步，首頁(yè)改版只是一個(gè)開(kāi)始，希望通過(guò)不斷的打磨優(yōu)化，秉持初心，為全球司機(jī)提供更克制、可依賴(lài)的出行平臺(tái)。
文章來(lái)源：優(yōu)設(shè)
運(yùn)營(yíng)類(lèi)活動(dòng)是在某一段時(shí)間內(nèi)進(jìn)行的，有明確業(yè)務(wù)目標(biāo)（業(yè)務(wù)轉(zhuǎn)化、品牌傳播）及營(yíng)銷(xiāo)群體，依賴(lài)游戲化手段帶來(lái)優(yōu)秀用戶(hù)體驗(yàn)，從而獲得成功的一類(lèi)活動(dòng)。
1. 生命周期短
運(yùn)營(yíng)類(lèi)活動(dòng)生命周期較短，常在某一段時(shí)間（可能是周期性的），一般跟隨時(shí)節(jié)熱點(diǎn)或者運(yùn)營(yíng)節(jié)奏來(lái)進(jìn)行。較短的生命周期給設(shè)計(jì)、開(kāi)發(fā)、數(shù)據(jù)等帶來(lái)較大挑戰(zhàn)，設(shè)計(jì)程式化提供基本設(shè)計(jì)思路，組件化降低設(shè)計(jì)成本。
2. 業(yè)務(wù)目標(biāo)明確
運(yùn)營(yíng)類(lèi)活動(dòng)一般以產(chǎn)品營(yíng)銷(xiāo)、品牌運(yùn)營(yíng)為目標(biāo)，發(fā)放各類(lèi)優(yōu)惠券大眾目標(biāo)用戶(hù)，從而帶來(lái)業(yè)務(wù)轉(zhuǎn)化，或者營(yíng)銷(xiāo)企業(yè)品牌，比如常見(jiàn)的年底 h5。
3. 有一定故事場(chǎng)景及氛圍
運(yùn)營(yíng)類(lèi)活動(dòng)需要較強(qiáng)的故事場(chǎng)景。良好的場(chǎng)景設(shè)計(jì)、氛圍營(yíng)造可以帶來(lái)沉浸式的用戶(hù)體驗(yàn)，與用戶(hù)建立情感共鳴。從而提升用戶(hù)參與度、帶來(lái)好的業(yè)務(wù)轉(zhuǎn)化。
故事場(chǎng)景結(jié)合時(shí)節(jié)熱點(diǎn)，同時(shí)考慮活動(dòng)需要營(yíng)造的體感氛圍。
4. 人群細(xì)分
運(yùn)營(yíng)類(lèi)活動(dòng)的特征在發(fā)起之初就有特殊的運(yùn)營(yíng)目的和特定特征的用戶(hù)群體。為實(shí)現(xiàn)最優(yōu)的業(yè)務(wù)轉(zhuǎn)化，需要在設(shè)計(jì)之初明確活動(dòng)覆蓋的用戶(hù)人群。同時(shí)在各個(gè)環(huán)節(jié)都能考慮到特定用戶(hù)群體的不同需求，尤其是在業(yè)務(wù)轉(zhuǎn)化的過(guò)程中，好的人群細(xì)分往往帶來(lái)事半功倍的效果。
5. 游戲化
引入游戲機(jī)制及游戲元素。
運(yùn)營(yíng)類(lèi)活動(dòng)結(jié)合時(shí)節(jié)熱點(diǎn)，通過(guò)富有故事性的視覺(jué)傳達(dá)（插圖、動(dòng)效、聲音等設(shè)計(jì)元素）帶給用戶(hù)沉浸式的體驗(yàn)，與用戶(hù)建立情感共鳴，從而有效的鼓勵(lì)用戶(hù)行為。
沉浸體驗(yàn)的營(yíng)造對(duì)設(shè)計(jì)師提出了更高要求，可以從活動(dòng)設(shè)計(jì)的故事感、用戶(hù)代入感、產(chǎn)品互動(dòng)感、主體差異感幾個(gè)方面來(lái)思考入手。
運(yùn)營(yíng)類(lèi)活動(dòng)中廣泛應(yīng)用了游戲化機(jī)制和元素，它們是活動(dòng)成功的有效保障。設(shè)計(jì)時(shí)綜合考慮業(yè)務(wù)及用戶(hù)需求，從用戶(hù)動(dòng)機(jī)激勵(lì)、行為引導(dǎo)的角度出發(fā)，將運(yùn)營(yíng)活動(dòng)游戲化。可以在活動(dòng)參與深度的各個(gè)階段引導(dǎo)用戶(hù)操作，從而達(dá)成活動(dòng)目標(biāo)。以下列舉了運(yùn)營(yíng)活動(dòng)中常見(jiàn)的用戶(hù)動(dòng)機(jī)，后續(xù)我會(huì)從用戶(hù)參與路徑出發(fā)，盡可能詳細(xì)的描述在用戶(hù)參與的每一個(gè)階段起作用的為動(dòng)機(jī)，以及實(shí)現(xiàn)的手段。
大獎(jiǎng)帶來(lái)的誘因效應(yīng)
動(dòng)輒百萬(wàn)的大獎(jiǎng)獎(jiǎng)勵(lì)幾乎已經(jīng)成為運(yùn)營(yíng)活動(dòng)的標(biāo)配，在動(dòng)機(jī)理論中，用戶(hù)行為的產(chǎn)生來(lái)源于需要，需要導(dǎo)致內(nèi)驅(qū)力，引發(fā)行為，從而推動(dòng)用戶(hù)實(shí)現(xiàn)特定的目標(biāo)。當(dāng)目標(biāo)的誘惑力很大時(shí)，即使沒(méi)有內(nèi)部驅(qū)動(dòng)也能激發(fā)行為。這也是眾多運(yùn)營(yíng)類(lèi)活動(dòng)大獎(jiǎng)存在的理由。
占便宜的心理
愛(ài)占便宜是人的本性，從心理學(xué)角度講，占便宜就像是額外得到的驚喜和獎(jiǎng)賞，可以讓人產(chǎn)生滿(mǎn)足感！用戶(hù)在這種心理作用下，會(huì)為了小利益去做出設(shè)計(jì)預(yù)設(shè)的行為，將業(yè)務(wù)需求設(shè)置在‘占便宜’的路徑中可有效提高參與、轉(zhuǎn)化率。比如在設(shè)計(jì)中用中獎(jiǎng)動(dòng)態(tài)彈幕來(lái)強(qiáng)化用戶(hù)參與的動(dòng)機(jī)，提高參與率。
有趣和好奇心
人天生具有好奇心，它幫助我們適應(yīng)不斷變化的環(huán)境、發(fā)現(xiàn)新的資源，是一種「無(wú)法抗拒」的行為動(dòng)機(jī)。在運(yùn)營(yíng)活動(dòng)中，用戶(hù)會(huì)被有趣的活動(dòng)頁(yè)面，未知的規(guī)則設(shè)計(jì)所吸引，從而開(kāi)始主動(dòng)「探索」。這也是用戶(hù)參與的動(dòng)機(jī)之一，設(shè)計(jì)中精致的 UI、有效的頁(yè)面信息傳達(dá)保證了用戶(hù)好奇的有效性。
即時(shí)反饋及階段性成就
「即時(shí)反饋」是沉迷現(xiàn)象發(fā)生的原因。學(xué)習(xí)之所以痛苦正是因?yàn)槠浞答佹溌诽L(zhǎng)，你只有在考試或者應(yīng)用到所學(xué)知識(shí)時(shí)才能獲得反饋，還有可能是負(fù)面的。在活動(dòng)設(shè)計(jì)中，每一次用戶(hù)操作都會(huì)有及時(shí)、細(xì)膩的反應(yīng)，可以給用戶(hù)帶來(lái)精神愉悅，同時(shí)設(shè)計(jì)的階段性成就又給用戶(hù)帶來(lái)成就感，用戶(hù)會(huì)不知不覺(jué)中在活動(dòng)中越走越遠(yuǎn)。
隨機(jī)獎(jiǎng)勵(lì)的多巴胺效應(yīng)
人類(lèi)的本能熱衷于冒險(xiǎn)，隨機(jī)的、不確定的獎(jiǎng)勵(lì)能夠刺激大腦分泌多巴胺，帶來(lái)愉悅感，從而刺激用戶(hù)行為的重復(fù)。在活動(dòng)設(shè)計(jì)中，常用到這一理論，比如抽獎(jiǎng)機(jī)制。
所有權(quán)與擁有感
當(dāng)用戶(hù)感到他們擁有或控制某樣?xùn)|西時(shí)，會(huì)自然而然的強(qiáng)化它的屬性、發(fā)揮其價(jià)值。尤其是通過(guò)適當(dāng)?shù)母冻龊妥陨砼Γ脩?hù)還可能不合理的高估其價(jià)值。在活動(dòng)設(shè)計(jì)中，常使用戶(hù)通過(guò)易實(shí)現(xiàn)的行為獲得權(quán)益，通過(guò)「幸苦操作」強(qiáng)化了擁有感，提升其心理價(jià)值，從而促進(jìn)用戶(hù)對(duì)權(quán)益的使用。
稀缺性與用戶(hù)渴望
稀缺性的心理學(xué)原理在于人們想要獲得某樣?xùn)|西的原因僅僅是它太罕見(jiàn)，或者無(wú)法立刻獲得。它破滅了人們對(duì)情況的控制感，人們會(huì)為了重獲控制而采取行動(dòng)。設(shè)計(jì)時(shí)，可以利用這種心理鼓勵(lì)用戶(hù)做出期望的行為。常見(jiàn)的有時(shí)間限制、權(quán)利限制等。
使命感/社交影響/損失規(guī)避……
運(yùn)營(yíng)類(lèi)活動(dòng)中數(shù)據(jù)和策略思維是保證活動(dòng)效果最大化的有效手段?；顒?dòng)需求提出時(shí)，即考慮可能的參與用戶(hù)細(xì)分；活動(dòng)開(kāi)始時(shí)，考慮引流途徑和引流方式、物料的差異化；活動(dòng)進(jìn)行時(shí)，根據(jù)用戶(hù)細(xì)分策略化任務(wù)推送，根據(jù)埋點(diǎn)數(shù)據(jù)監(jiān)測(cè)積極調(diào)整相關(guān)設(shè)計(jì)元素。事無(wú)巨細(xì)才能確?；顒?dòng)成功。
文章來(lái)源：優(yōu)設(shè)
目錄：
一、鍵盤(pán)與命令類(lèi)型
二、設(shè)計(jì)要點(diǎn)
三、有意思的鍵盤(pán)交互
畢竟該處是表單輸入的交互終點(diǎn)，用‘前往（Go）、登錄（Join）’這些命令詞是不是更準(zhǔn)確些呢？
文章來(lái)源：UI中國(guó)
設(shè)計(jì)并不只是為了區(qū)分市場(chǎng)定位，在視覺(jué)上對(duì)產(chǎn)品做一些修修補(bǔ)補(bǔ)。設(shè)計(jì)需要從品牌自身出發(fā)，設(shè)計(jì)出來(lái)的產(chǎn)品才能與用戶(hù)產(chǎn)生情感交流、為品牌而發(fā)聲，這樣的設(shè)計(jì)才能真正為品牌創(chuàng)造長(zhǎng)尾的價(jià)值。
前陣子和朋友去看車(chē)，我們?nèi)サ牡谝患业晔俏譅栁郑譅栁种鞔虻钠放评砟钍恰赴踩埂缚煽俊?，?dāng)時(shí)我在沃爾沃店里看的每一輛車(chē)的外形就像從金屬盒子進(jìn)化來(lái)的，棱角分明、線(xiàn)條硬朗，同時(shí)每個(gè)部件都相當(dāng)厚實(shí)，當(dāng)時(shí)我坐在車(chē)?yán)锏臅r(shí)候，感覺(jué)自己像是坐進(jìn)了一個(gè)大保險(xiǎn)箱，里三層外三層把我包裹起來(lái)，坐在里面特別有安全感。
我們?nèi)サ牧硪患业晔菍汃R，寶馬的品牌概念主打的是「時(shí)尚」「運(yùn)動(dòng)」，所以寶馬車(chē)給人的感覺(jué)和沃爾沃又完全不同了。它的流線(xiàn)感非常明顯，而且這種流線(xiàn)型設(shè)計(jì)一直延伸到車(chē)內(nèi)的每一個(gè)部件。印象特別深的是，車(chē)?yán)镒蔚睦笾ζぜy和我們常見(jiàn)的品皮質(zhì)特別相似，讓我感覺(jué)自己像是坐進(jìn)一個(gè)時(shí)尚的愛(ài)馬仕箱包里。
其實(shí)無(wú)論是工業(yè)設(shè)計(jì)，還是我們的用戶(hù)界面設(shè)計(jì)，好的設(shè)計(jì)給用戶(hù)的感受與品牌理念是相契合的。設(shè)計(jì)中的每一個(gè)細(xì)節(jié)都是圍繞品牌自身而展開(kāi)，設(shè)計(jì)出來(lái)的產(chǎn)品才能夠成為品牌的具象化延伸，與用戶(hù)產(chǎn)生情感交流的同時(shí)也會(huì)讓用戶(hù)更加忠誠(chéng)于我們的品牌。具體怎么做？這需要我們運(yùn)用統(tǒng)一的設(shè)計(jì)語(yǔ)言來(lái)完成。
什么是設(shè)計(jì)語(yǔ)言？從設(shè)計(jì)的層面理解，當(dāng)你看到一組功能與形式相互融合，向你訴說(shuō)其特色與優(yōu)點(diǎn)的產(chǎn)品，從而喚起你的情感反應(yīng)時(shí)，你正在體驗(yàn)的就是設(shè)計(jì)語(yǔ)言。簡(jiǎn)單講，當(dāng)你的品牌運(yùn)用設(shè)計(jì)語(yǔ)言的時(shí)候，你的產(chǎn)品會(huì)跟人說(shuō)話(huà)：會(huì)告訴人們它能做什么，怎么做，以及你的品牌是個(gè)什么樣的品牌。而這個(gè)設(shè)計(jì)語(yǔ)言也將會(huì)從前期的風(fēng)格設(shè)定到后期的設(shè)計(jì)執(zhí)行，始終貫穿在我們整個(gè)產(chǎn)品設(shè)計(jì)的流程當(dāng)中。
首先從一開(kāi)始的風(fēng)格設(shè)定，比如每次我們?cè)O(shè)計(jì)師接到一個(gè) brief 都會(huì)先做視覺(jué)推導(dǎo)。但是我之前的視覺(jué)推導(dǎo)是這樣的：比如現(xiàn)在為一個(gè)類(lèi)似拼多多的產(chǎn)品做設(shè)計(jì)，然后搜集了一圈競(jìng)品的界面，發(fā)現(xiàn)拼多多、聚劃算、淘寶特價(jià)都是這種線(xiàn)框的、扁平的設(shè)計(jì)風(fēng)格，所以最后推導(dǎo)的結(jié)論就是——因?yàn)槲覀兤促?gòu)面向的用戶(hù)群體是低消費(fèi)人群，而競(jìng)品的設(shè)計(jì)風(fēng)格是 xxxx 的，所以我們的用戶(hù)偏愛(ài)這種 xxxx 設(shè)計(jì)風(fēng)格，所以我們需要用這種風(fēng)格去設(shè)計(jì)我們的頁(yè)面。
搜狐總監(jiān)總結(jié)的競(jìng)品分析方法：
其實(shí)這是一種循環(huán)論證，并不能推導(dǎo)出真正有價(jià)值的內(nèi)容。就像你問(wèn)一個(gè)胖子「你為什么這么胖呀」，胖子說(shuō)「因?yàn)槲页缘枚唷?，你又?wèn)「為什么要吃這么多呀」，胖子又說(shuō)「因?yàn)槲遗?，所以需要吃多點(diǎn)」。
競(jìng)品分析雖說(shuō)也是一種前期設(shè)計(jì)調(diào)研的方法，但如果我們的設(shè)計(jì)只依賴(lài)于參考其他人怎么做，最后我們?cè)O(shè)計(jì)出來(lái)的產(chǎn)品不僅沒(méi)辦法向人們表達(dá)一個(gè)完整的品牌理念，而且我們的設(shè)計(jì)跟其他競(jìng)品看起來(lái)很相似，失去了自己的特點(diǎn)與優(yōu)勢(shì)。
所以，在我們?cè)O(shè)定產(chǎn)品的設(shè)計(jì)風(fēng)格的時(shí)候就需要運(yùn)用統(tǒng)一的設(shè)計(jì)語(yǔ)言，產(chǎn)出能夠表達(dá)我們品牌特質(zhì)的設(shè)計(jì)。那具體怎么做？這里涉及 2 個(gè)關(guān)鍵點(diǎn)，一個(gè)是如何找到你的品牌特質(zhì)，另一個(gè)是如何針對(duì)這個(gè)品牌特質(zhì)找到對(duì)應(yīng)的設(shè)計(jì)語(yǔ)言。
首先，想要找到我們的品牌特質(zhì)，我們可以從一個(gè)很有意思的原型中得到啟發(fā)。如果想讓我們的品牌真正能夠影響用戶(hù)，讓用戶(hù)為我們的品牌買(mǎi)單，我們的品牌就需要基于用戶(hù)內(nèi)心最深層次的需求，明白用戶(hù)買(mǎi)單的動(dòng)機(jī)在哪里。這時(shí)候我們?cè)賹?duì)應(yīng)這些深層次的動(dòng)機(jī)和需求做出設(shè)計(jì)，效果自然會(huì)事半功倍。那么如何能把品牌和用戶(hù)的動(dòng)機(jī)需求連接起來(lái)呢？我們可以借助心理學(xué)家榮格的原型理論來(lái)一一對(duì)應(yīng)。
榮格的原型連接了人們最深層次的動(dòng)機(jī)和感覺(jué)體驗(yàn)，表達(dá)了人們的基本需求，最重要的是他將這些需求都具像化為一個(gè)個(gè)角色。所以我們可以從中找到自己品牌的角色，并且在往后的發(fā)展中根據(jù)這個(gè)角色設(shè)定我們的品牌特質(zhì)和設(shè)計(jì)語(yǔ)言，進(jìn)而與用戶(hù)建立根深蒂固的聯(lián)系（相當(dāng)于為我們的品牌打造一個(gè)「人設(shè)」）。我們先看看榮格的原型具體有哪些：
1. 開(kāi)拓者
我們也有稱(chēng)之為探求者、朝圣者，它是敢于冒險(xiǎn)的、首創(chuàng)的、獨(dú)立的、不墨守成規(guī)的，更多的尋求自我實(shí)現(xiàn)和改變，擁有自由的價(jià)值觀、自給自足的。開(kāi)拓者通常會(huì)在未知的領(lǐng)域，開(kāi)創(chuàng)新的路徑。同時(shí)是個(gè)驅(qū)動(dòng)力很強(qiáng)的非常有個(gè)性的人，能夠忍受探索新路上形單影只的孤獨(dú)。屬于這種角色設(shè)定的品牌比如有星巴克、路虎都是。
2. 守護(hù)者
守護(hù)者通常是說(shuō)無(wú)私的、有同情心的、仁慈的人，給弱勢(shì)群體提供幫助和支持的，同時(shí)具有慷慨大方、自我奉獻(xiàn)的精神。守護(hù)者更多立志于他人的安危和福利，像這種角色的品牌稍微少點(diǎn)，通常是一些救濟(jì)會(huì)、慈善組織等等。
3. 愛(ài)人
愛(ài)人相關(guān)的特點(diǎn)像熱情的、美麗的、感性的尋求真愛(ài)和愉悅，追求愛(ài)的價(jià)值觀和親密關(guān)系。愛(ài)人通常是通過(guò)給予和獲得愛(ài)的強(qiáng)烈愿望所驅(qū)動(dòng)的，這個(gè)不局限于愛(ài)情，友誼也包含在內(nèi)，主要是意味著情感，所以一般是香水或者化妝品品牌都是運(yùn)用這個(gè)原型角色。就像 dior，當(dāng)然還有巧克力費(fèi)列羅等等。
4. 魔術(shù)師
我們知道魔術(shù)師的形象通常是愛(ài)惡作劇的、滑稽的，有時(shí)候能夠跨界，打破禁忌，并且自身帶有樂(lè)趣，善于改變的。魔術(shù)師通?？释麡?lè)趣，從單調(diào)的生活中解脫出來(lái)，敢于打破禁忌，質(zhì)疑不可能的事物。這種角色設(shè)定的品牌我們可以很快想到那個(gè)愛(ài)玩有趣、經(jīng)?？缃绾献鞯陌偈驴蓸?lè)。
5. 創(chuàng)造者
創(chuàng)造者更強(qiáng)調(diào)藝術(shù)感、想象力、創(chuàng)新性，以及自我表現(xiàn)的價(jià)值觀和美感上的愉悅性。創(chuàng)造者通過(guò)精心制作用來(lái)表現(xiàn)自我的事物，讓人們耳目一新從而得到認(rèn)可。像這種強(qiáng)調(diào)創(chuàng)造力的品牌比如樂(lè)高，用有限的積木組合、創(chuàng)造出無(wú)限種可能。
6. 反叛者
反叛者也可以說(shuō)是不法之徒、外來(lái)者，這種角色通常是具有變革性的、反常的、打破常規(guī)的，表達(dá)一種價(jià)值觀的解放。反叛者通常存在于社會(huì)邊緣的，被大部分社會(huì)群體看成局外人甚至異類(lèi)的角色，我們也可以看成是亞文化的一種轉(zhuǎn)變。像這種主打標(biāo)新立異、反常規(guī)的品牌，最著名的就是哈雷。
7. 魔法師
前面我們提到了魔術(shù)師，那么魔法師相對(duì)于魔術(shù)師而言，會(huì)帶有更多的非現(xiàn)實(shí)的想象，精神上的超凡魅力，帶來(lái)轉(zhuǎn)變的、形而上的意識(shí)的擴(kuò)張。通俗地說(shuō)，是帶有更多迷信元素的。但是最重要的是，魔法師趨向于駕馭各種能量和環(huán)境，進(jìn)而給人們帶來(lái)身體上以及精神上的轉(zhuǎn)變。同樣，像這種強(qiáng)調(diào) magic 的品牌我們第一個(gè)可以想到迪士尼，典型的魔法世界。
8. 智者
我們也可以稱(chēng)之為「圣人」，智者通常是一種富有哲理性的、知識(shí)淵博的形象，忠于追求真理、樂(lè)于分享知識(shí)，也是智慧的代名詞。智者經(jīng)常被當(dāng)成真理的捍衛(wèi)者以及智慧的來(lái)源，為人們指明方向，幫助大家前進(jìn)的代表。這種角色設(shè)定適用于一些知識(shí)輸出的品牌，比如哈佛大學(xué)、金融時(shí)報(bào)等等。
9. 天真
這是 11 個(gè)原型中唯一一個(gè)形容詞而不是角色名詞，它代表著信任、純潔、健康樂(lè)觀，有希望的、誠(chéng)實(shí)善良并且擁有簡(jiǎn)單的快樂(lè)。天真代表著樂(lè)觀主義，不管處境如何都能保持希望和信仰，更像是紛雜世俗中的一片凈土或者是一個(gè)烏托邦世界。而像這種原型設(shè)定一樣傳達(dá)樂(lè)觀、希望、天真的品牌有麥當(dāng)勞、可口可樂(lè)等等。
10. 統(tǒng)治者
統(tǒng)治者象征著權(quán)威、控制、至高無(wú)上，同時(shí)也有承擔(dān)、效率、和諧的屬性。統(tǒng)治者被得到和控制權(quán)利的欲望所驅(qū)動(dòng)，通過(guò)對(duì)事物的掌控來(lái)防治混亂發(fā)生。同時(shí)也是一種責(zé)任承擔(dān)的表現(xiàn)，以有組織的的方式來(lái)完成義務(wù)。屬于這種角色設(shè)定的品牌比如有 IBM、花旗銀行等等。
11. 英雄
每個(gè)人心目中的英雄不盡相似，但是他們的共性都是勇敢的、有原則的，勇于克服障礙，同時(shí)敢于接受挑戰(zhàn)、伸張正義，面對(duì)逆境的時(shí)候堅(jiān)韌不拔。這種角色設(shè)定的品牌比如強(qiáng)調(diào)挑戰(zhàn)、正義、勇敢的耐克、聯(lián)邦快遞等等。
總而言之，原型是將我們用戶(hù)內(nèi)心最深層次的需求，具象化成一個(gè)角色，我們的品牌對(duì)應(yīng)上這些角色，相當(dāng)于對(duì)應(yīng)上了我們用戶(hù)最深層次的需求，為我們品牌和用戶(hù)產(chǎn)生情感交流打下基礎(chǔ)。同時(shí)，它可以為我們?cè)O(shè)計(jì)師想為品牌找到對(duì)應(yīng)的設(shè)計(jì)風(fēng)格的時(shí)候，提供更多維度的靈感。而這之后的過(guò)程，就涉及到剛才提到的第二個(gè)關(guān)鍵點(diǎn)，如何為我們的品牌找到對(duì)應(yīng)的設(shè)計(jì)語(yǔ)言？
我們從前面的心理原型中了解到品牌的角色設(shè)定之后，圍繞這個(gè)角色將會(huì)有一系列的關(guān)鍵詞去描繪這個(gè)角色的特質(zhì)。我們將這些抽象的、描繪品牌特質(zhì)的關(guān)鍵詞具像化，則可以得到描繪品牌自身的設(shè)計(jì)元素。具體我們可以借助一個(gè)圖形四象限來(lái)完成：
我們將圖形的基本構(gòu)成（點(diǎn)、線(xiàn)、面）作為我們的坐標(biāo)延伸——寬窄曲直，用這四個(gè)屬性我們可以組合出非常多不同形態(tài)的圖形元素。比如說(shuō)，我們用「寬+曲」組合出來(lái)的圖形可以是：實(shí)心的圓形、波浪曲線(xiàn)等等；再比如說(shuō)我們用「窄+直」可以組合出：細(xì)直線(xiàn)、帶有直角邊的矩形等等。
同時(shí)，在圖形屬性的坐標(biāo)上，我們還需要延展出一些帶有這種屬性的事物或印象。比如，生活中帶有曲線(xiàn)的事物，像有花瓣、棉絮等等，這些事物給人的印象是柔和、溫暖的表現(xiàn)；而直線(xiàn)的事物，我們聯(lián)想一下生活中的帶有直角的事物，比如像玻璃、霓虹燈管等等，這些表現(xiàn)前衛(wèi)、鋒芒畢露的事物。
像上面綠色部分的認(rèn)知印象，針對(duì)每一個(gè)維度可以聯(lián)想出很多關(guān)鍵詞與事物，那么在我們延展出更加詳細(xì)的四象限之后，這時(shí)候可以再次拿出，我們前面說(shuō)到的，原型角色的關(guān)鍵詞，再和剛才的圖形四象限進(jìn)行比對(duì)，利用象限中的圖形基本屬性，來(lái)組合出屬于我們品牌的設(shè)計(jì)元素。具體怎么做，我舉一個(gè)京東直播改版的案例。
首先基于京東品牌特質(zhì)（原型設(shè)定是英雄），圍繞英雄這一個(gè)原型我們會(huì)有很多關(guān)鍵詞去形容它，比如敢于挑戰(zhàn)、堅(jiān)韌不拔等等。不過(guò)，京東直播作為京東 App 的主要欄目，更希望吸引更多的年輕人以及女性群體的參與，所以在京東直播里，我們表現(xiàn)的是更加年輕、女性向的英雄——驚奇隊(duì)長(zhǎng)，一位自信、勇敢挑戰(zhàn)的女英雄形象。因?yàn)橄袢嗽诓煌瑘?chǎng)合下都會(huì)有不同的表現(xiàn)，對(duì)于品牌來(lái)說(shuō)也是如此，我們?cè)O(shè)計(jì)師也需要根據(jù)不同的場(chǎng)景或者子產(chǎn)品的需求，基于原型的核心理念再做出適應(yīng)性的設(shè)計(jì)，讓我們?cè)O(shè)計(jì)的品牌更像一個(gè)生命體，而不是一成不變的事物。
那么我們圍繞年輕、女性、自信這個(gè)主題再腦暴出更多相關(guān)的關(guān)鍵詞。比如具象的可以代表女性的事物：口紅、高跟鞋；比如一些抽象的內(nèi)容，我們可以把他們具像化，比如年輕的「活力」，我們可以用泡泡、花朵來(lái)表現(xiàn)，女性的「優(yōu)雅」可以用香水、絲帶表現(xiàn)，英雄的「自信勇敢」用笑容表現(xiàn)。
不過(guò)，我們知道用戶(hù)界面設(shè)計(jì)相對(duì)于平面設(shè)計(jì)的海報(bào)、插畫(huà)而言，更重要的是對(duì)產(chǎn)品信息功能的輔助，所以這里的設(shè)計(jì)元素運(yùn)用會(huì)更加克制，這意味著需要我們回歸到更基礎(chǔ)的層面。所以我們需要從剛才的具象事物（比如花朵、笑容）中提取出他們的基礎(chǔ)屬性，比如花瓣是圓弧形的、片狀的，笑容是向上的曲線(xiàn)。同時(shí)借助圖形四象限，用「寬+曲」的手法來(lái)表達(dá)我們的設(shè)計(jì)元素（年輕、女性向在第二象限，對(duì)應(yīng)的寬+曲屬性）。在后期設(shè)計(jì)過(guò)程中，融入這幾個(gè)元素再作出界面設(shè)計(jì)。
當(dāng)然，在整個(gè)設(shè)計(jì)流程中，設(shè)計(jì)語(yǔ)言的設(shè)定并不單單包含元素這一部分，還包括顏色、框架、布局等，各個(gè)方面的考量缺一不可。
為什么是相對(duì)統(tǒng)一而非絕對(duì)一致？因?yàn)槿藗儗?duì)大部分顏色的認(rèn)知其實(shí)是來(lái)自于自身的行為，受到心理、環(huán)境、文化等背景因素的影響，更多是一種個(gè)體的主觀感受。比如同樣的紅色，在中國(guó)是吉祥喜慶的代表，在國(guó)外普遍認(rèn)為危險(xiǎn)警告的顏色。比如黑色，在大部分年輕人眼里會(huì)認(rèn)為是酷的時(shí)尚的顏色，而相對(duì)年長(zhǎng)傳統(tǒng)的人則更多會(huì)覺(jué)得是邪惡、忌諱的顏色。所以我們并不需要過(guò)分強(qiáng)調(diào)建立絕對(duì)一致的色彩規(guī)則，這樣也能使我們?cè)O(shè)計(jì)的品牌更像是一個(gè)有靈性的生物，而不僅僅是一個(gè)僵硬的組織。
比如今年的京東 618 項(xiàng)目，時(shí)間跨度長(zhǎng)達(dá) 30 天，活動(dòng)頁(yè)面覆蓋上千個(gè)，設(shè)計(jì)師不可能一個(gè)個(gè)去指定顏色規(guī)范、或者讓同一個(gè)顏色適用于所有頁(yè)面，所以需要設(shè)定的只有色彩感覺(jué)和表現(xiàn)手法，這種統(tǒng)一的大方向。所以我們可以看到這些在 618 期間的設(shè)計(jì)，雖然不盡相同但能讓人清楚的感知到，這是來(lái)自同一個(gè)生態(tài)下的主題，并不會(huì)因?yàn)轭伾煌蜔o(wú)法識(shí)別。
雖然人們對(duì)大部分顏色的認(rèn)知來(lái)自于心理的主觀感受，但還有對(duì)另一部分的顏色的認(rèn)知是來(lái)自于人們的生理反應(yīng)。而這一部分，才是我們?cè)谠O(shè)計(jì)的時(shí)候需要注意的，關(guān)于造成人們「感知過(guò)強(qiáng)」和「感知過(guò)弱」的問(wèn)題。
1. 感知過(guò)強(qiáng) —— 顏色對(duì)抗通道
簡(jiǎn)單講，就是相當(dāng)于我們?cè)O(shè)計(jì)常說(shuō)的——對(duì)比色，雖然我們知道對(duì)比色可以給用戶(hù)帶來(lái)視覺(jué)刺激，但是并不建議在設(shè)計(jì)中大面積的、長(zhǎng)期的使用（紅綠或黃藍(lán)對(duì)比色），為什么呢？
因?yàn)槲覀兯f(shuō)的顏色，其實(shí)是人眼對(duì)頻率、光的波長(zhǎng)的感知，就像我們耳朵聽(tīng)的音高或一個(gè)音符時(shí)所感知的聲音的原理一樣。下圖是人們視網(wǎng)膜三類(lèi)視錐細(xì)胞對(duì)光的敏感度，以及人造紅、綠、藍(lán)色光感受器對(duì)光的敏感度。我們可以看到，低頻視錐（紅線(xiàn)）信號(hào)是紅色和黃色，中頻視錐信號(hào)是綠色，高頻則對(duì)應(yīng)藍(lán)色。而我們?cè)O(shè)計(jì)中常說(shuō)的對(duì)比色，其實(shí)就是通過(guò)這些視錐細(xì)胞的低、中、高頻信號(hào)的極值相減，才得來(lái)的顏色對(duì)抗組。所以這種通過(guò)對(duì)視錐細(xì)胞兩極的強(qiáng)烈刺激才得到的對(duì)比色，長(zhǎng)期使用下會(huì)讓人產(chǎn)生疲勞甚至煩躁的情緒，而在這種不穩(wěn)定的情緒下，用戶(hù)非常容易產(chǎn)生誤操作，甚至最終遷怒于你的產(chǎn)品不再使用。
所以我們作為設(shè)計(jì)師可以運(yùn)用一些方法來(lái)盡量控制對(duì)人眼的最極端的刺激，比如通過(guò)減少對(duì)抗色的面積，或者通過(guò)將對(duì)抗色組中的一個(gè)顏色用它的近色替換，等等。
2. 感知過(guò)弱 —— 色域跨度
除了以上，讓我們感知過(guò)強(qiáng)的顏色對(duì)抗通道，另一個(gè)需要注意的顏色問(wèn)題就是，讓人們感知過(guò)弱的色域跨度。我們有時(shí)候會(huì)遇到一個(gè)問(wèn)題就是，按鈕上的文字和按鈕的顏色融在一起，導(dǎo)致按鈕文字看不清。
這個(gè)問(wèn)題其實(shí)就是兩個(gè)顏色的色域跨度過(guò)小導(dǎo)致的，首先我們用 H（色相）S（飽和度）B（明度）的數(shù)值來(lái)劃分色域（如下圖）。在統(tǒng)一H（色相）值的情況下，規(guī)定了 10 個(gè)標(biāo)準(zhǔn)的S（飽和度）、B（亮度）值，以 10 為單位作為一個(gè)跨度。兩種顏色在這個(gè)色域中，至少要相差 5個(gè)跨度，用戶(hù)才能有效感知到兩種顏色的差異。
比如下圖中的藍(lán)色背景色值是 60，那么放置在這個(gè)背景中的文字 A，至少要跟這個(gè) 60 的位置相差 5 個(gè)跨度，也就是 10 這個(gè)位置。如果文字A 的色值只有 30，與背景色的 60 跨度小于 5，那么文字 A 在這個(gè)背景上會(huì)難以識(shí)別。以此類(lèi)推，深色模式中（如下圖）這個(gè)背景色值 100，那么在這個(gè)背景上的文字 A 色值，最多不能超過(guò) 50。
以上關(guān)于顏色對(duì)抗通道和色域跨度的問(wèn)題，就是我們需要了解的一些顏色運(yùn)用中的邊界，并在這個(gè)邊界以?xún)?nèi)讓設(shè)計(jì)保持最大的靈活度。所以對(duì)于顏色，我們需要強(qiáng)調(diào)的是相對(duì)統(tǒng)一的邊界極值，而不是絕對(duì)一致的色值。
如果我們把前面說(shuō)的設(shè)計(jì)元素和顏色看作品牌的皮膚，那么視覺(jué)框架則是品牌的骨骼。如果想讓我們的品牌成為一個(gè)能夠真正影響用戶(hù)的存在，不僅要有好看的皮囊——在設(shè)計(jì)元素和顏色上延續(xù)品牌基因，還要有強(qiáng)大的內(nèi)心——視覺(jué)框架要能足夠支撐起我們品牌的身軀。
視覺(jué)框架包括了層級(jí)和布局，我們需要在設(shè)計(jì)的過(guò)程中，加入對(duì)產(chǎn)品階段和品牌價(jià)值的思考。因?yàn)榫拖袢艘粯?，處于不同階段的人追求的東西會(huì)有所差異。同樣的對(duì)于品牌也是如此，處于不同產(chǎn)品階段會(huì)有不同的需求，相應(yīng)的品牌價(jià)值點(diǎn)也會(huì)有所差別。所以如果想讓設(shè)計(jì)的視覺(jué)框架能夠足以撐起品牌，在這其中將會(huì)涉及 2 個(gè)關(guān)鍵點(diǎn)：如何定位產(chǎn)品階段和品牌價(jià)值，以及如何圍繞產(chǎn)品階段與品牌價(jià)值點(diǎn)設(shè)計(jì)對(duì)應(yīng)的視覺(jué)框架。
首先是定位我們的產(chǎn)品階段和品牌價(jià)值，我們可以通過(guò)對(duì)照經(jīng)濟(jì)價(jià)值系統(tǒng)（如下圖）：產(chǎn)品的階段分為初級(jí)產(chǎn)品、產(chǎn)品、服務(wù)和體驗(yàn)這 4 個(gè)階段。
拿京東舉個(gè)例子，如果我們位于初級(jí)產(chǎn)品階段，我們的平臺(tái)就是這樣的（如下圖）：展示出所有商品信息，用戶(hù)需要根據(jù)信息聯(lián)系商品的供應(yīng)商，去和供應(yīng)商進(jìn)行交易。那么在這個(gè)階段的時(shí)候，品牌的核心價(jià)值在于對(duì)商品信息展現(xiàn)的完整性、全面性，只要這個(gè)平臺(tái)能夠覆蓋足夠多的商品，并展示完整的商品信息，這個(gè)階段的目標(biāo)就達(dá)到了；
如果我們位于產(chǎn)品階段，我們會(huì)對(duì)商品進(jìn)行分類(lèi)，并在平臺(tái)上提供統(tǒng)一的購(gòu)買(mǎi)渠道。相應(yīng)的，這個(gè)是以后的品牌價(jià)值在于，平臺(tái)能夠?qū)ι唐愤M(jìn)行精準(zhǔn)分類(lèi)或者實(shí)現(xiàn)統(tǒng)一的購(gòu)買(mǎi)渠道功能，讓用戶(hù)能夠在平臺(tái)上買(mǎi)到商品；
而當(dāng)我們位于服務(wù)階段，我們的平臺(tái)不僅可以購(gòu)買(mǎi)商品，我們還會(huì)提供售前售后的服務(wù)，對(duì)應(yīng)不同的客戶(hù)群體推薦不同的商品，或者提供定制化的服務(wù)等等。平臺(tái)除了實(shí)現(xiàn)交易功能，需要提高品牌的競(jìng)爭(zhēng)力，在競(jìng)品之間形成差異化，為人們提供一系列附加價(jià)值的服務(wù)，吸引更多用戶(hù)在我們平臺(tái)上下單才是目標(biāo)；
而如果我們位于體驗(yàn)階段，我們可以從視、聽(tīng)、味、嗅、觸覺(jué)給用戶(hù)帶來(lái)一系列的情感反應(yīng)，為每個(gè)個(gè)體營(yíng)造不同的回憶與感受。讓用戶(hù)與品牌產(chǎn)生情感上的互動(dòng)，在更深層次上影響用戶(hù)認(rèn)知并形成堅(jiān)固的情感紐帶，讓用戶(hù)忠于我們的品牌才是這個(gè)階段的目標(biāo)。
正因?yàn)椴煌漠a(chǎn)品階段，對(duì)應(yīng)的品牌價(jià)值與目標(biāo)不同，我們才需要針對(duì)產(chǎn)品階段，為品牌設(shè)計(jì)合適的視覺(jué)框架，到后期設(shè)計(jì)出來(lái)的產(chǎn)品才能更貼合地為品牌發(fā)聲。像今年京東 app 改版項(xiàng)目，在接到這個(gè) brief 之后，首先當(dāng)然會(huì)先看看當(dāng)時(shí)版本存在的問(wèn)題，下圖為當(dāng)時(shí)京東 7.0 版本。
當(dāng)時(shí)團(tuán)隊(duì)逐一列出了 7.0 版本存在的幾個(gè)主要問(wèn)題：
1. 品牌識(shí)別度低
我們可以發(fā)現(xiàn)在這個(gè)界面里很難發(fā)現(xiàn)京東的品牌元素，就算現(xiàn)在換一個(gè)品牌同樣這個(gè)界面也適用；
2. 業(yè)務(wù)分發(fā)局限
這個(gè)版本里的商品坑位是固定的，業(yè)務(wù)展現(xiàn)的數(shù)量和形式是局限的；
3. 運(yùn)營(yíng)維護(hù)成本高
banner 模塊采用通欄而且上下漸變的樣式，這需要商家制作運(yùn)營(yíng)圖片的時(shí)候，將主要內(nèi)容嚴(yán)格控制在我們的限制區(qū)域內(nèi)，這同時(shí)也增加了我們運(yùn)營(yíng)審核的工作量；
4. 樓層過(guò)長(zhǎng)、轉(zhuǎn)化率低
在 7.0 版本中，中間的樓層頻道長(zhǎng)達(dá) 7 屏，同質(zhì)化的內(nèi)容導(dǎo)致平臺(tái)商品的轉(zhuǎn)化率不高；
5. 促銷(xiāo)信息干擾
界面的促銷(xiāo)信息讓用戶(hù)眼花繚亂，難以讓用戶(hù)快速找到自己想要的商品；
6. 個(gè)性化感知不足
電商平臺(tái)內(nèi)容形式趨向單一化，沒(méi)有太多創(chuàng)新的表現(xiàn)。
有了這些具體的問(wèn)題項(xiàng)，設(shè)計(jì)師們開(kāi)始進(jìn)行針對(duì)性地視覺(jué)框架設(shè)計(jì)。比如，針對(duì)個(gè)性化感知不足的問(wèn)題，我們希望重新設(shè)計(jì)百寶箱區(qū)域，打破常見(jiàn)的圓底 icon 的樣式，每個(gè)圖標(biāo)的邊框都是不規(guī)則的，讓整個(gè)區(qū)域更有表現(xiàn)力，同時(shí)與其他電商平臺(tái)的界面形成差異化。再比如，針對(duì)促銷(xiāo)信息干擾的問(wèn)題，我們希望簡(jiǎn)化原本頻道入口的信息，將原本好幾個(gè) sku 信息對(duì)應(yīng)同 1 個(gè)入口，優(yōu)化為單個(gè) sku 與單個(gè)入口一一對(duì)應(yīng)，讓用戶(hù)保持專(zhuān)注力快速找到自己想要的頻道入口。
諸如此類(lèi)，當(dāng)時(shí)我們?yōu)檫@幾個(gè)問(wèn)題延展出許多設(shè)計(jì)上的解決方案，輸出了不少有創(chuàng)新性的視覺(jué)稿。但是隨著設(shè)計(jì)工作越往后進(jìn)行，我們發(fā)現(xiàn)手中的設(shè)計(jì)并不能很好地解決，品牌在當(dāng)前階段中面臨的實(shí)際問(wèn)題。
因?yàn)樵谇捌诳蚣茉O(shè)計(jì)的整個(gè)過(guò)程中，我們沒(méi)有把品牌定位這一因素考慮進(jìn)去，我們發(fā)現(xiàn)舊版本的問(wèn)題，埋著頭只想把這些問(wèn)題都解決了，卻忘記抬起頭看看我們的品牌現(xiàn)在在哪。我們前面說(shuō)過(guò)，對(duì)照經(jīng)濟(jì)價(jià)值系統(tǒng)，京東目前主要處于服務(wù)階段，還在逐漸邁向體驗(yàn)階段的進(jìn)程中。
而處于這個(gè)階段的京東，外部環(huán)境是電商平臺(tái)的逐漸趨同化；內(nèi)部環(huán)境是業(yè)務(wù)體量龐大，同時(shí)產(chǎn)品仍有上升空間。所以我們的階段目標(biāo)就是需要加深用戶(hù)對(duì)品牌的認(rèn)知，業(yè)務(wù)內(nèi)容需要更加具備兼容性、延展性，同時(shí)需要提高產(chǎn)品的業(yè)務(wù)分發(fā)能力。
結(jié)合這個(gè)階段性目標(biāo)，我們可以從舊版本存在的問(wèn)題中，發(fā)現(xiàn)這 4 個(gè)問(wèn)題才是當(dāng)前優(yōu)先級(jí)最高的、需要在當(dāng)前階段中解決的內(nèi)容。所以基于篩選后的 4 個(gè)問(wèn)題，我們開(kāi)始將設(shè)計(jì)往回收，從視覺(jué)框架上更多聚焦于這 4 個(gè)問(wèn)題的優(yōu)化。
比如針對(duì)業(yè)務(wù)分發(fā)局限性的問(wèn)題，對(duì)首頁(yè)下拉區(qū)域的布局進(jìn)行優(yōu)化：下拉刷新除了常規(guī)的刷新?tīng)顟B(tài)外，在營(yíng)銷(xiāo)活動(dòng)期間用戶(hù)可下拉跳轉(zhuǎn)至活動(dòng)頁(yè)面。我們將下拉路徑縮短 30%，共享元素空間兼容更多的業(yè)務(wù)內(nèi)容，充分利用首焦區(qū)域豐富業(yè)務(wù)的展現(xiàn)形式。
比如針對(duì)品牌識(shí)別度的問(wèn)題，將首頁(yè)頭部區(qū)域的層級(jí)進(jìn)行優(yōu)化：在京東品牌形象 Joy 中提煉出微笑曲線(xiàn)，將微笑弧度應(yīng)用在頭部的背景輪廓上，并且在整個(gè)頁(yè)面中統(tǒng)一植入品牌色京東紅，同時(shí)在當(dāng)前我們的品牌尚未成熟的階段，直接使用京東 logo 強(qiáng)化用戶(hù)對(duì)品牌的感知度和記憶點(diǎn)。
比如針對(duì)運(yùn)營(yíng)維護(hù)成本高的問(wèn)題，還記得前面說(shuō)的我們一開(kāi)始做的百寶箱的設(shè)計(jì)么，雖然那種設(shè)計(jì)是更具有差異化和創(chuàng)新性，但是目前產(chǎn)品量級(jí)大、業(yè)務(wù)入口多，而且這一區(qū)域涉及合作商家自己提供的素材露出，如果沒(méi)有統(tǒng)一的外框與規(guī)范的內(nèi)容，運(yùn)營(yíng)維護(hù)成本是相當(dāng)高的。所以我們保留了 icon 外框，同時(shí)規(guī)范每個(gè)框中只居中展示一個(gè)對(duì)應(yīng)的圖形，不能包含文字等其他元素。
最終我們可以看到，改版后的京東 app 無(wú)論是在品牌、業(yè)務(wù)層面，還是在多種復(fù)雜的運(yùn)營(yíng)場(chǎng)景中，都能實(shí)現(xiàn)作為平臺(tái)的兼容性和延展性。所以，在視覺(jué)框架的時(shí)候需要預(yù)先考慮產(chǎn)品階段，針對(duì)不同階段需求作出相應(yīng)的設(shè)計(jì)側(cè)重，讓設(shè)計(jì)出來(lái)的產(chǎn)品能夠更加貼合品牌本身。
經(jīng)過(guò)剛才的推導(dǎo)和框架設(shè)定，我們對(duì)眼前要做的產(chǎn)品設(shè)計(jì)風(fēng)格、視覺(jué)框架已經(jīng)確定的七七八八，界面的形態(tài)也初具雛形了。接下來(lái)要做的設(shè)計(jì)執(zhí)行階段就是我們?cè)O(shè)計(jì)師的魔法時(shí)刻，相信每位設(shè)計(jì)師都有自己的方式和能力讓我們的產(chǎn)品變得更優(yōu)美，所以關(guān)于這部分的內(nèi)容暫不在此贅述。
通過(guò)以上章節(jié)我們了解到，只有從品牌自身出發(fā)，設(shè)計(jì)出來(lái)的產(chǎn)品才能在每一個(gè)方面都延續(xù)品牌基因、展現(xiàn)出設(shè)計(jì)的整體性。一方面滿(mǎn)足品牌價(jià)值需求為品牌發(fā)聲，另一方面將用戶(hù)的所聞、所見(jiàn)、所感打造成一個(gè)特別的情感反應(yīng)，讓用戶(hù)更長(zhǎng)久的忠于我們的品牌。
不過(guò)，如果我們想要?jiǎng)?chuàng)造出能深化品牌基因的產(chǎn)品，我們?cè)谟脩?hù)方面也要投入和品牌方面同樣多的關(guān)注。因?yàn)椴粌H要看產(chǎn)品的外觀界面，還要看產(chǎn)品給用戶(hù)的感覺(jué)、使用方式和效果。比如用戶(hù)因?yàn)槭裁床疟荒愕漠a(chǎn)品吸引，用戶(hù)會(huì)從中得到什么，你的產(chǎn)品能帶給用戶(hù)什么感受，用戶(hù)如何才能為你的產(chǎn)品發(fā)生實(shí)際行動(dòng)，等等。正因?yàn)槲覀兯龅囊磺?，都?yīng)該對(duì)品牌產(chǎn)生支撐作用。所以不僅僅是品牌能夠識(shí)別和定義我們的產(chǎn)品，用戶(hù)的認(rèn)知體驗(yàn)也應(yīng)該成為我們?cè)O(shè)計(jì)考量的一部分。究竟怎樣做，才能讓我們的設(shè)計(jì)能夠有效的影響用戶(hù)、讓用戶(hù)為我們的品牌買(mǎi)單呢？
文章來(lái)源：優(yōu)設(shè)
卡片式設(shè)計(jì)對(duì)于我們來(lái)說(shuō)并不陌生，從設(shè)計(jì)類(lèi)網(wǎng)站上或市場(chǎng)上的一些 APP 中也會(huì)看到很多的卡片式設(shè)計(jì)的案例，卡片式設(shè)計(jì)也是 UI 設(shè)計(jì)中最常用的方式之一。
最近在新項(xiàng)目的設(shè)計(jì)中也嘗試使用了卡片式設(shè)計(jì)，結(jié)合實(shí)際項(xiàng)目中的一些思考進(jìn)行總結(jié)并歸納出一些卡片式設(shè)計(jì)的小知識(shí)點(diǎn)。同時(shí)希望通過(guò)本次的總結(jié)進(jìn)行知識(shí)沉淀，以及跟大家一起探討下卡片式設(shè)計(jì)。
在現(xiàn)實(shí)生活中的卡片式設(shè)計(jì)可以說(shuō)是無(wú)處不在，例如身份證、交通卡、銀行卡、名片、便利貼、撲克牌、游戲卡……諸如此類(lèi)的生活常見(jiàn)品都是以卡片的方式存在，其共同點(diǎn)都使用一個(gè)容器承載著內(nèi)容，并且具有「便攜性、信息簡(jiǎn)潔和相對(duì)獨(dú)立性」。
在項(xiàng)目設(shè)計(jì)之初我分析了一些使用卡片設(shè)計(jì)的 App，并且從中整理總結(jié)了幾個(gè)較為常見(jiàn)的卡片式設(shè)計(jì)的使用場(chǎng)景。
1. Feed流
卡片式的 feed 流設(shè)計(jì)是一種非常常見(jiàn)的設(shè)計(jì)，早在前幾年 Facebook、Google+ 等產(chǎn)品就使用了這一方式，F(xiàn)eed 流作為一種長(zhǎng)內(nèi)容的媒介，用戶(hù)需要長(zhǎng)時(shí)間的滑動(dòng)看內(nèi)容并篩選有效信息，卡片式設(shè)計(jì)很好的解決了內(nèi)容與內(nèi)容的區(qū)塊分隔，讓用戶(hù)在長(zhǎng)屏幕滑動(dòng)中依舊可以很好的明確識(shí)別每一塊的內(nèi)容。
實(shí)際案例-淘寶微淘
2. 瀑布流設(shè)計(jì)
瀑布流的出現(xiàn)讓單屏區(qū)域內(nèi)顯示更多的內(nèi)容，而內(nèi)容較多的情況下，使用卡片式設(shè)計(jì)可以較好的對(duì)內(nèi)容進(jìn)行了區(qū)域劃分，讓上下左右的內(nèi)容從整體中具有相對(duì)獨(dú)立性。
實(shí)際案例-Pinterest
3. 左右滑動(dòng)組合型內(nèi)容
卡片式設(shè)計(jì)具有較強(qiáng)的層次感，相比于平鋪更能呈現(xiàn)內(nèi)容可滑動(dòng)的感受，并且塊狀化的設(shè)計(jì)讓內(nèi)容具有較高的區(qū)域分割感。
實(shí)際案例-QQ音樂(lè)
4. Tips提醒
作為非界面固定內(nèi)容，卡片式設(shè)計(jì)可以讓 tips 提醒設(shè)計(jì)變得更自由，在符合用戶(hù)體驗(yàn)的基礎(chǔ)上，它可以出現(xiàn)在任何我們想要它出現(xiàn)的位置。
實(shí)際案例-淘票票會(huì)員提醒
5. 結(jié)合手勢(shì)的單塊可互動(dòng)內(nèi)容
若頁(yè)面中有且只有一個(gè)主內(nèi)容，并且需要用戶(hù)進(jìn)行快速篩選時(shí)，可考慮這種結(jié)合卡片式設(shè)計(jì)與手勢(shì)設(shè)計(jì)的方式。大大增強(qiáng)了用戶(hù)對(duì)于設(shè)計(jì)的體驗(yàn)感知和豐富視覺(jué)表現(xiàn)。
實(shí)際案例-探探首頁(yè)
6. 卡券類(lèi)設(shè)計(jì)
卡券類(lèi)的設(shè)計(jì)實(shí)際上是一種物化映射的過(guò)程，我們?cè)诂F(xiàn)實(shí)中看到的卡券造型，結(jié)合卡片式的擬物化設(shè)計(jì)，讓用戶(hù)在屏幕上可以更直觀的感知，提升了設(shè)計(jì)的代入感。
實(shí)際案例-京東領(lǐng)券中心
7. 集合型功能入口
集合型功能入口往往會(huì)有多個(gè)入口，使用卡片式設(shè)計(jì)讓入口形成一個(gè)區(qū)域整體，可以做到既統(tǒng)一又相對(duì)獨(dú)立。
實(shí)際案例-淘寶微淘關(guān)注賬號(hào)
8. 個(gè)人主頁(yè)頂部?jī)?nèi)容卡片
個(gè)人主頁(yè)的設(shè)計(jì)往往會(huì)在氛圍上營(yíng)造沉浸感，卡片式的設(shè)計(jì)可以把關(guān)鍵信息進(jìn)行概括收歸，讓原本單個(gè)的內(nèi)容形成一個(gè)整體。
實(shí)際案例-美團(tuán)外賣(mài)會(huì)員
基礎(chǔ)的卡片設(shè)計(jì)規(guī)則，相信大家在一些系統(tǒng)級(jí)別的設(shè)計(jì)指導(dǎo)規(guī)范中也或多或少都能了解到，不同平臺(tái)的規(guī)范差異其實(shí)不會(huì)有太多本質(zhì)性的區(qū)別，更多的是處理技巧或方式的差異，而每個(gè)設(shè)計(jì)師對(duì)其理解的角度也會(huì)具有一些差異化，這里分享下我對(duì)于卡片式設(shè)計(jì)的一些基礎(chǔ)想法。
同樣的卡片設(shè)計(jì)，不同的人做出來(lái)的感受可能會(huì)有所差別，而表達(dá)卡片質(zhì)感的主要關(guān)鍵點(diǎn)在于：卡片形體、投影深度、卡片顏色對(duì)比，我們需要了解這些基礎(chǔ)知識(shí)點(diǎn)之后，再結(jié)合實(shí)際的 APP 風(fēng)格進(jìn)行設(shè)計(jì)。
卡片形體
就像圖標(biāo)的圖形設(shè)計(jì)一樣，不一樣的形體也能表達(dá)出不一樣的氣質(zhì)，因此在設(shè)計(jì)的時(shí)候我們需要依據(jù)整體的風(fēng)格進(jìn)行表達(dá)。異形卡片的設(shè)計(jì)，可以讓原有方方正正的卡片表達(dá)出差異化，從造型上打破一些傳統(tǒng)的處理方式，再結(jié)合一些 IP 人物元素可以更加直觀的表達(dá)出具體的內(nèi)容氛圍。
投影深度
投影的視覺(jué)效果，會(huì)直接影響整體卡片的質(zhì)感，太深太大的投影會(huì)顯得整體卡片過(guò)于厚重，太淺太小的投影則顯得過(guò)度生硬，因此合理的數(shù)值比例可以讓卡片看起來(lái)自然有質(zhì)感。在項(xiàng)目中我常用的一組數(shù)值規(guī)律是 1:2 或 1:3，例如 Y 軸偏移 10px，模糊度則設(shè)定為 20 或 30px，這樣成比例的數(shù)值出來(lái)的效果會(huì)較為自然，如下圖：
卡片顏色對(duì)比
卡片與背景的顏色對(duì)比會(huì)影響這卡片的整體質(zhì)感，在設(shè)計(jì)時(shí)我們需要把握好卡片與底色的對(duì)比，不同的明暗對(duì)比出來(lái)的質(zhì)感也會(huì)有差異。這里有兩點(diǎn)建議：
在使用卡片式設(shè)計(jì)時(shí)，經(jīng)常會(huì)糾結(jié)邊距的設(shè)定，寬邊還是窄邊？多少像素更為合適？我經(jīng)常會(huì)帶著這種疑問(wèn)去設(shè)計(jì)。
基于內(nèi)容的簡(jiǎn)單規(guī)則
卡片式設(shè)計(jì)作為設(shè)計(jì)的表現(xiàn)形式，最終是為了承載內(nèi)容，因此邊距的寬窄也需要依賴(lài)于實(shí)際內(nèi)容的判斷。結(jié)合我在項(xiàng)目中的嘗試分享以下幾點(diǎn)：
多窄少寬
卡片內(nèi)容較多是使用窄邊距，讓卡片具有足夠的空間來(lái)展現(xiàn)內(nèi)容，內(nèi)容較少則可以考慮采用寬邊距來(lái)打造整體的視覺(jué)空間感，如下圖 app store 和淘寶的設(shè)計(jì)對(duì)比。當(dāng)然這只是一個(gè)建議，實(shí)際還得具體問(wèn)題具體分析。
再如一些瀑布流、宮格、橫滑模塊較多的 APP 設(shè)計(jì)亦是如此，在內(nèi)容較多的情況下會(huì)把邊距壓縮到最小的合理間距。
內(nèi)外成比例
以最外邊為基礎(chǔ)值往里設(shè)計(jì)，間距以固定比例進(jìn)行縮減，雖然沒(méi)有刪格來(lái)得規(guī)范，但也可以讓設(shè)計(jì)變得有跡可循。
基于刪格
刪格系統(tǒng)解決了一些基礎(chǔ)的板式問(wèn)題，有助于提升設(shè)計(jì)的規(guī)范性，讓設(shè)計(jì)更加有跡可循。在設(shè)定卡片式的邊距時(shí)可以適當(dāng)應(yīng)用刪格系統(tǒng)，讓邊距與內(nèi)容形成固定的關(guān)系，這樣可以幫助整體的卡片設(shè)計(jì)更加具有細(xì)節(jié)和規(guī)則。
標(biāo)題的設(shè)定主要考慮以下幾點(diǎn)：1.是在卡片內(nèi)還是卡片外；2.標(biāo)題的字號(hào)設(shè)定多少更合適；3.標(biāo)題是否加粗？
卡片內(nèi)或外的對(duì)比
在項(xiàng)目設(shè)計(jì)中讓我較為糾結(jié)的是：標(biāo)題應(yīng)該在卡片內(nèi)還是卡片外？通過(guò)了一些案例的嘗試之后，我總結(jié)了一個(gè)規(guī)則（需要依據(jù)內(nèi)容的形態(tài)而進(jìn)行設(shè)計(jì)）：當(dāng)卡片內(nèi)容是獨(dú)立的模塊或模塊中只有一個(gè)大標(biāo)題時(shí)可設(shè)定在卡片內(nèi)；當(dāng)卡片內(nèi)容是以組合呈現(xiàn)或者具有延續(xù)性?xún)?nèi)容時(shí)設(shè)定在卡片外，形成最外層的主標(biāo)題。
標(biāo)題的字號(hào)設(shè)定
標(biāo)題主要作用為 2 點(diǎn)：1.簡(jiǎn)短說(shuō)明每個(gè)模塊的內(nèi)容；2.讓用戶(hù)在長(zhǎng)頁(yè)面瀏覽中起到引導(dǎo)、定位的作用。
通過(guò)一些嘗試發(fā)現(xiàn)：1.當(dāng)內(nèi)容較少時(shí)，并不需要太大的字號(hào)即可起到標(biāo)題的作用；2.當(dāng)內(nèi)容較多時(shí)，較小的標(biāo)題字號(hào)則容易被沉入內(nèi)容中，讓用戶(hù)在瀏覽的過(guò)程中難以發(fā)現(xiàn)，而導(dǎo)致信息獲取缺失；3.建議標(biāo)題與正文字號(hào)大小差異在 6-10px，這樣可以更好的拉開(kāi)差異，讓標(biāo)題更具有標(biāo)題感。
字體是否加粗
常規(guī)思維下我們都會(huì)對(duì)標(biāo)題進(jìn)行加粗，我在實(shí)際中的經(jīng)驗(yàn)得到的總結(jié)是：需要看手機(jī)系統(tǒng)或不同廠商的機(jī)型。我在項(xiàng)目之初都對(duì)標(biāo)題進(jìn)行了加粗，但后續(xù)在跟進(jìn)還原時(shí)看到的效果并不理想，特別是 Android 的機(jī)型上，因?yàn)槲覀兪褂玫氖窍到y(tǒng)默認(rèn)字體，android 系統(tǒng)很多字體并未對(duì)系統(tǒng)進(jìn)行優(yōu)化，而是使用微軟雅黑，微軟雅黑在android 系統(tǒng)上再加粗，就會(huì)顯得整個(gè)系統(tǒng)的外輪廓特別粗糙，最后我們依據(jù)不同的機(jī)型進(jìn)行了差異化的選擇。
圓角的設(shè)定實(shí)際上沒(méi)有太多的原則問(wèn)題，只要符合整體的風(fēng)格調(diào)性即可。當(dāng)然不同的圓角也能表達(dá)出不同的質(zhì)感，大圓角表達(dá)柔和、小圓角表達(dá)硬朗。
圓角的規(guī)則設(shè)定
以卡片的圓角作為基礎(chǔ)的參考值往內(nèi)推算整體的圓角使用規(guī)范，卡片與卡內(nèi)的元素形成合理的比例規(guī)則，而非隨意根據(jù)「經(jīng)驗(yàn)」進(jìn)行設(shè)定。
圓角大小差異對(duì)比
大小的差異化呈現(xiàn)出不同的視覺(jué)感受和風(fēng)格差異，我們?cè)谠O(shè)計(jì)時(shí)更多需要考慮我們?cè)O(shè)計(jì)的產(chǎn)品風(fēng)格或氣質(zhì)是適合大圓角還是小圓角，而非依據(jù)一些設(shè)計(jì)網(wǎng)站上的流行趨勢(shì)。因此基于不同的風(fēng)格或者實(shí)際內(nèi)容場(chǎng)景下進(jìn)行設(shè)定才更為合理。
卡片式設(shè)計(jì)相比拉通式設(shè)計(jì)更需要考慮設(shè)計(jì)中的透氣感。在常規(guī)情況下，對(duì)內(nèi)容邊距及四周邊距進(jìn)行調(diào)整，讓內(nèi)容之間具有較好的空間呼吸感，從而讓設(shè)計(jì)得到留白的效果。如下圖對(duì)比案例，在基礎(chǔ)刪格不變的情況下，每個(gè)間距都在原有基礎(chǔ)上擴(kuò)大了12px（接近 1.33 倍），從而讓內(nèi)容具有較為舒適的寬度進(jìn)行閱讀
選擇某一種設(shè)計(jì)方式的重點(diǎn)在于我們了解這種方式的優(yōu)點(diǎn)，并且可以把這些優(yōu)點(diǎn)融合到我們的設(shè)計(jì)當(dāng)中。在項(xiàng)目設(shè)計(jì)中，我總結(jié)了幾點(diǎn)卡片式設(shè)計(jì)的優(yōu)點(diǎn)。
1. 優(yōu)化模塊化，提升內(nèi)容區(qū)域感
模塊化的設(shè)計(jì)也是我們?nèi)粘Ｖ袝?huì)應(yīng)用到的方法，結(jié)合卡片式的設(shè)計(jì)可以讓模塊化的規(guī)則變得更加簡(jiǎn)單，增加了模塊之間的可復(fù)用性和延展性。而當(dāng)內(nèi)容較多的情況下，使用卡片式設(shè)計(jì)可以有效直接的形成區(qū)域分隔，從視覺(jué)感知上就對(duì)內(nèi)容進(jìn)行了分隔，提升用戶(hù)獲取信息的效率。
2. 提升內(nèi)容獨(dú)立性
在組合型的內(nèi)容設(shè)計(jì)上，使用卡片式設(shè)計(jì)可以讓每個(gè)小塊內(nèi)容呈現(xiàn)相對(duì)獨(dú)立的展現(xiàn)特性，結(jié)合模塊化的設(shè)計(jì)，可以在一大片關(guān)聯(lián)的內(nèi)容中，做到既統(tǒng)一又相對(duì)獨(dú)立。
3. 增強(qiáng)視覺(jué)空間感
卡片式的設(shè)計(jì)可以提升整體設(shè)計(jì)層次感，通過(guò)投影、前后顏色的設(shè)定，讓內(nèi)容與背景之間產(chǎn)生視覺(jué)空間感。
4. 增強(qiáng)視覺(jué)表現(xiàn)力
在設(shè)計(jì)中我們可以對(duì)卡片進(jìn)行異形設(shè)計(jì)，用來(lái)達(dá)到我們想要的風(fēng)格表現(xiàn)。當(dāng)然在一個(gè)頁(yè)面內(nèi)盡量不要太多，盡量使用頁(yè)面中的首個(gè)卡片進(jìn)行差異化處理，讓整體表現(xiàn)出一點(diǎn)不同即可。
5. 增強(qiáng)可點(diǎn)性
卡片式設(shè)計(jì)產(chǎn)生的空間感，讓每個(gè)模塊更加突出，相比扁平式的處理方式，卡片式從視覺(jué)感官上會(huì)較為突出，從感官上更具可點(diǎn)擊感知。
任何一種設(shè)計(jì)方式都會(huì)有其利弊，最終選擇某一種其實(shí)不過(guò)就是當(dāng)下最適合而已，而在嘗試中我也總結(jié)了幾點(diǎn)卡片式設(shè)計(jì)存在的一些缺點(diǎn)，當(dāng)然只是個(gè)人的思考而已。
1. 橫向空間利用率降低
卡片式設(shè)計(jì)的存在左右邊距，因此在有限的屏寬內(nèi)內(nèi)容橫向區(qū)域相比于拉通式設(shè)計(jì)有所減少，在內(nèi)容較多的情況下可以適當(dāng)調(diào)小卡片左右邊距。
2. 避免過(guò)多的層級(jí)
從整體來(lái)說(shuō)，卡片式的設(shè)計(jì)本身就是增加了基礎(chǔ)背景的層級(jí)表現(xiàn)，其視覺(jué)層級(jí)相比拉通式更為豐富，因此不建議在卡片上再二次疊加塊狀式設(shè)計(jì)，避免造成層級(jí)復(fù)雜。在項(xiàng)目中也會(huì)遇到內(nèi)容層級(jí)需要多層級(jí)的表現(xiàn)，從中總結(jié)了2種方式：
3. 不適合長(zhǎng)文或內(nèi)容多的表達(dá)
若在設(shè)計(jì)上使用了卡片式的設(shè)計(jì)風(fēng)格，但在一些長(zhǎng)文表現(xiàn)的界面建議去除卡片。長(zhǎng)文章的頁(yè)面更強(qiáng)調(diào)閱讀的沉浸感，用戶(hù)需要更多的專(zhuān)注于文字，這時(shí)候無(wú)邊的體驗(yàn)更適合。
4. 把握好界面的分區(qū)，避免過(guò)于擁擠的排版
卡片設(shè)計(jì)具有獨(dú)特的視覺(jué)空間感，但卡片與卡片之間也會(huì)有分隔，因此在設(shè)計(jì)時(shí)更應(yīng)該對(duì)內(nèi)容進(jìn)行歸納，避免產(chǎn)生過(guò)多的小塊卡片而導(dǎo)致排版過(guò)于擁擠、凌亂或者內(nèi)容不夠?qū)挾日宫F(xiàn)。
無(wú)論是卡片式或者拉通平鋪的方式，其最終的目的都是為了服務(wù)于內(nèi)容，我們?cè)谧鲈O(shè)計(jì)的過(guò)程中只是選擇適合于呈現(xiàn)我們內(nèi)容的一種方式。根據(jù)具體的內(nèi)容情況給出合理/合適的設(shè)計(jì)判斷才是我們需要不斷提升的關(guān)鍵點(diǎn)，切莫流于形式而忽略了內(nèi)容設(shè)計(jì)本身的重要性。
文章來(lái)源：優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn