通過一些案例進行比較與實驗，探索如何將 UI 深色模式設計得更好。

iOS 作為 UI/UE 設計的風向標，一直是行業的引領者，不管你愿不愿意承不承認，他的每一次更新變化總能帶動 UI 設計行業的一些大大小小的變革，并且產生更多的追隨者，比如當年的 iOS7 開始的扁平化設計風格，對后續設計風格的影響直到現在已經 7 年了。

在最近半年，iOS 在 UI 設計風格上最大的變革莫過于 DarkMode（深色模式），在 DarkMode 之前，我們熟悉的 UI 界面往往都是淺白色界面為主，而從 iOS13 開始正式使用了 DarkMode，界面突然可以變深色了，蘋果官方說這樣設計可以讓眼睛更舒服地長時間閱讀，為革命保護視力，而且更加省電增長續航，具體結果我們不得而知，需要科學家們去驗證了，但是對于我們設計師來說帶來的挑戰就是要「黑白無?！沽?。

其實 DarkMode 從測試版算起已經差不多推出了有半年的時間了，一些知名的 APP 產品早已經有了自己的兼容方案，同時 iOS 原生界面也給了我們很多最佳實踐案例，按道理大家對于 DarkMode 的設計方式方法應該已經掌握了差不多了，但直到這幾天微信正式推出了自己的 DarkMode 兼容方案，才發現對 DarkMode 的探索還需要設計師們多多努力。謹以此文表達一下自己的觀點，不妥之處敬請海涵。

從一個「列表頁面」說起

列表視圖（TableView）是 iOS 中最常見的界面組件，一般常見于設置與欄目列表頁面：

iOS 設置界面的淺色模式和深色模式看起來都非常協調。

下面我們看看微信發現頁面，這個頁面和 iOS 設置是很相似的。

如果單獨看微信發現頁面的淺色模式實際效果還是不錯的。

但是直接轉換到深色模式下就感覺突然差的很多了，甚至可以說是有點難看，這次微信真的做了一次黑天鵝？

到底是什么原因讓微信發現頁面在深色模式下視覺體驗如此之差呢？

我們不妨將兩個功能布局都相似的深色進行放在一起進行一下比較：

組成色彩分析：

在色彩這塊在這兩個頁面中微信和 iOS 基本保持一致，四層灰度設計能更好的保持頁面整體干凈整潔且層次分明，但是在 A 背景色上，微信的背景色選擇了黑色偏綠的顏色，應該是微信設計師還是想體現出產品的標志色原色。

文字的顏色也較 iOS 略微深一點，但是在整體上影響并不大。

看來在主要色彩上并沒有什么問題，那么為什么微信這個界面與 iOS 界面比起來視覺上要感覺差一些呢？

下面來看一下圖標

圖標設計分析：

圖標上的差別主要在于線寬與外框，微信采用無外框統一線寬的線形圖標，iOS 采用的是有外框剪影圖標。

我們我們把圖標進行互換會怎么樣呢？

觀察到了嗎？別看錯了！

是的，我故意把位置做了對調，左邊是 iOS，右邊是微信。替換圖標后的微信明顯加分不少，整個界面都整齊多了，而 iOS 換了圖標后明顯變得不夠整齊了，潦草很多。

那么結論是微信的無框線性圖標在深色模式下兼容有問題？是的，的確如此。但是等一下，還有一些細節你注意到嗎？換了圖標的微信界面和之前的 iOS 界面比起來明顯還是有點不夠整齊，為什么呢 ？

我們回過頭來從細節再看一下 iOS 界面。

我們按照這個思路把剛才微信替換圖標界面再排序一下！

△ 界面視覺體驗明顯整齊了很多是不是！

疑問：

為什么細線圖標和無框圖標會在深色背景表現不夠好，而在淺色背景下就沒問題呢？

是不是所有的 UI 都會存在這樣的問題呢？

我們再來看一些例子：

看來結論是一樣的，線性圖標在深色背景下的表現都是差強人意，反觀帶框圖標適應性很強，淺色和深色模式下均能良好的適配，我來分析一下原因。

當年伽利略用望遠鏡往天上看，發現木星比金星大，換成肉眼看后金星則比木星大。他認為是眼睛的某種視覺特性造成了這種現象。

德國物理學家赫爾曼把這種錯覺稱為輻照錯覺，就是說在黑暗背景下，亮度越高的物體看起來面積越大。

再來看一張圖片

哪個圓圈看起來更大，顯然是黑色背景下的白色圓形，實際上這只是一種錯覺，所有圓圈是一樣大。

光亮刺激會使得神經元產生非線性放大作用，導致刺激比實物本身看起來更大，白色圓形更亮，所以看起來更大一些。

線性圖標是用線條勾畫圖案達到隱喻效果，一般線粗是 2px~6px 像素。

設計師在設計時都是以最終視覺作為參考，而設計稿本身多是淺色背景，所以在淺色背景的映襯下圖標視覺會顯得稍大，視覺基本是平衡的，假如設計是 4px 而呈現出的效果其實是 6px 左右。

是不是覺得哪里有點不對了？按照這個邏輯黑色背景下白色線圖標不應該是視覺更大、更明顯嗎？

我們還需要考慮一個因素，那就是色彩，之前的幾個界面案例的線性圖標都是彩色的，特別是黑色背景下，不同色彩的圖標放在一起，會有明顯的忽大忽小的感覺，會讓界面感覺非常凌亂。

是不是感覺黃色最大，紅色的最小？但是其實是一樣的，這還是相同形狀的，要是圖標形狀不同感受會更明顯。

看一個實際中的例子：

由于都是單色線性圖標，在淺色和深色下表現還都不錯的，但是單色圖標略顯界面單調，并不太建議這么設計。

毫無疑問，未來的 UI 場景需要適配多背景色風格，圖標除了具備好看隱喻之外，更需要具備抗干擾性。

帶框圖標是一個不錯的解決方法，大膽預測帶框圖標會將成為未來一段時間圖標設計主流！

結論

• 深色模式中灰度色階在一個界面最多可分為四層。
• 為了適配深色模式，今后有框圖標將會成為圖標設計風格主流。
• 同樣為了適配深色模式，細線圖標將會被淘汰，剪影和粗線圖標會流行起來。

• 圖標除了個體設計上用心，在排列上也會極大影響到頁面的整合視覺，光譜排列法是個不錯的選擇。
• 
  文章來源：優設    作者：殘酷de樂章

在這之前我得先提及一本書──《簡約至上：交互式設計四策略》。這本書基本算得上是交互設計的入門必讀書籍了，非常適合身處項目環節中上游的人員閱讀與學習。

作者 Giles Colborne 在書中提出了四個令交互設計成果最大化的簡易策略：合理刪除、分層組織、適時隱藏和巧妙轉移。這四個策略幾乎成為我設計與優化每一個頁面時的自我指導方針。

我參閱了大量的應用，想總結出它們是如何運用導航欄來給產品賦能的。竟然很巧地發現，再花式的導航欄設計也難逃「四策略」手法。

首先，導航欄作為一個獨立控件，它本身就已經是「分層組織」策略的一種表現形式。接下來我們來看看，優秀的產品設計是如何運用另外三種策略來設計好導航欄的。

合理刪除

導航欄不能輕易刪除，但凡事沒有絕對。什么時候我們可以合理地刪除導航欄呢？

Nike Run Club（下文簡稱NRC）是耐克官方出品的一款跑步記錄 APP。既然做產品要站在用戶角度出發，那我們就來復原一下主要功能的用戶使用場景。

當你的老板要求你一天出 150 個界面設計的時候，你怕了，準備跑路，同時又不想浪費一天中任何一次記錄運動的機會。于是你打開 NRC，你的目的很明確：認真地跑路，并記錄運動。

點擊「開始」按鈕，當你一旦開始跑步，手機基本就不再使用了，直到跑步結束。

△ NRC在運動狀態下的界面刪除了導航欄

在用戶記錄跑步這樣一個單一事件中，NRC 知道你會專注運動，很少存在關注其他功能、瀏覽其他頁面的可能性。于是 NRC 可以很干脆地刪掉導航欄，而返回按鈕用了界面中的「結束」按鈕代替。

滴滴出行在呼叫快車時也做了刪除導航欄的處理。用戶一旦發單，開始呼叫司機時，呼叫頁面內的所有操作都只聚集在界面下方的一個視覺區域內。

△ 滴滴出行在呼叫過程中刪除了導航欄

上面兩個刪除導航欄的示例有什么共通點呢？

第一，用戶在當前頁面的事件狀態明確，不需要導航標題提醒用戶當前在什么位置，用戶也極少可能在當前頁面發生其他事件操作，于是完全可以去除導航標題與內容控件。

第二，雖然刪除了返回按鈕，但都采用了很典型的「費茨定律」，就算用戶誤操作，也能便捷地撤銷正在發生的事件。反而這比循規蹈矩地運用導航欄來承載返回按鈕合理了許多。

△ 費茨定律簡易圖解

既然導航欄內所有的規范元素都有可取代方案，為什么不刪除它呢？正如 Giles Colborne 在書中告訴我們的：大膽地刪除，但也不要極端到盲目刪除。

適時隱藏

隱藏和刪除看起來十分相似，但其實不然。我們如何區分這兩個技巧呢？

隱藏最常見的情況是，當導航欄的出現會成為打擾用戶沉浸體驗的障礙時，我們會選擇隱藏，例如看視頻、瀏覽圖片等顯示全屏媒體的場景，有導航欄反而會分散用戶的注意力。

△ 顯示全屏媒體時需要隱藏導航欄

不知道你有沒有發現到一個細節，在大多數情況下，需要沉浸體驗的頁面不但會隱藏導航欄，同時也會隱藏狀態欄，導航欄中載有當前頁面的標題、導航按鈕和內容控件；狀態欄中會載有時間、Wi-Fi 等系統設備信息。

iOS 在人機交互指南中提醒我們，顯示全屏媒體時，請考慮暫時隱藏狀態欄，但請避免永久隱藏。如果沒有狀態欄，當用戶需要查看時間或其他設備信息時必須離開應用。設計師應該讓用戶可以使用簡單的手勢重新顯示隱藏的狀態欄。

△ 用戶可以方便地查看時間或其他設備信息

另一種情況是當前頁面非常注重一屏內容展現時，我們會隱藏導航欄。

京東在用戶搜索了商品之后，頭部有三個信息欄，非常冗長。分別是：

• 導航欄：放置搜索框和頁面內容控件；
• 全局篩選欄：針對全局的篩選組件，主要用于商品排序篩選；
• 垂直內容篩選欄：當前所搜索的商品品類的垂直篩選標簽。

△ 京東搜索商品后屏幕頭部的信息欄

用戶在搜索了商品之后，向上滑動頁面，京東會隱藏導航欄和全局篩選欄。

一是因為用戶搜索關鍵詞后，滑動頁面大概率表示已經開始在挑選商品，這時候可以大膽地猜測用戶行為，認為搜索與排序的重要級下降了，搜索結果垂直內容篩選的重要級上升了，便可以只保留下重要的操作。

二是可以讓內容區域高度增加，隱藏頂部兩個欄目區域可以大致增加一個商品位的提前露出，增大了商品觸達用戶的可能性。這不就是 UI 設計為商業目標賦能的一個案例嗎？

△ 隱藏導航欄，增加了屏幕利用率

巧妙轉移

基于導航欄層級始終高于頁面內容的特性，隨著用戶劃出第一屏，許多 APP 做了重要內容或重要控件轉移到導航欄的設計。

豆瓣在影評討論區，用戶上滑頁面時，會將當前影片的信息轉移到導航欄。其實這種轉移很常見，許多內容社區 APP 都有這樣的交互設計，比如瀏覽的公眾號文章，再回到頂部試試。方便用戶時刻知道自己當前所瀏覽的內容是關于哪一個主題的。這一類轉移是單純站在用戶體驗角度的考量。

△ 豆瓣在屏幕滾動后轉移影片信息到導航欄

但如果你仔細觀察，有一類轉移卻是綜合了用戶體驗與產品目標的共同抉擇。如果你再稍微了解一點該產品背后的故事，甚至可以讓你洞悉到，為了鞏固產品的調性和目標，PM 和 UI 們在頁面設計時做了多少細枝末節的引導。

知乎在用戶瀏覽當前問題時向上滑動頁面，也會像豆瓣一樣，將當前問題標題轉移到導航欄上，但與此同時會將「寫回答」的操作也轉移到導航欄。標題轉移是出于用戶體驗，和大多數內容社區的做法大同小異；而「寫回答」的按鈕轉移，正符合知乎想要打造一個內容交流社區的產品調性，他們希望刺激用戶進行問答互動，多輸出 UGC 內容，希望用「寫回答」的按鈕轉移進一步激發用戶創作內容的可能性。

△ 知乎轉移「寫回答」讓用戶更方便地進行問答互動

京東在店鋪首頁上滑頁面時，會將「關注」按鈕轉移到導航欄，方便用戶在瀏覽的過程中可以隨時收藏店鋪，增加了用戶對品牌店鋪的關注度和復購的可能性。京東靠自營模式發家，近幾年來開始慢慢重視 B2C 市場，在這個小小的關注按鈕上，是不是可以算略顯端倪呢？雖然我不能非常肯定，可能提高用戶收藏操作只是為了輔助京東更好地進行營銷權重劃分，不過「關注」按鈕的轉移，確實能為 B2C 業務的滲透提供一份助力。

△ 京東轉移「關注」讓用戶更方便地收藏店鋪

所以我這里說到的「轉移」的目的，其實和 Giles Colborne 在書中講到的并不十分一致，Giles Colborne 是希望設計師將當前頁面低頻、冗雜的操作轉移到另一個頁面中去，而我提到的「轉移」反而是產品越注重什么功能，越可以利用導航欄層級的先天優勢來實現轉移。

總結

合理刪除、分層組織、適時隱藏和巧妙轉移已經是我做設計和分析界面常用的一個手法，它并不一定是萬能的，但是它多多少少可以輔助我們做出更合理的設計。

這篇文章想要告訴大家的是，在平臺規范里的導航欄是死板又相對靜態的，但在四個策略的輔助下，結合用戶的操作手勢，也可以將它變得十分靈活，幫助頁面實現更好的用戶體驗。不要被規范限制的太死，轉換設計師的角色變成用戶，你可以研究出更多好玩的操作。隨便打開一個應用，去研究研究，你可能會樂在其中的。

文章來源：優設    作者：UCD耍家

如今我們的生活，到處都是大幅圖像廣告，紛擾喧鬧的各類短視頻與直播。這是一個快節奏時代，我們更傾向閱讀圖像。為什么我們偏愛圖像視覺超過文字？從人類進化角度來看，原始時代的祖先通過五感感知著這個世界，其中通過視覺來感知判斷生活，其他四感輔助之。即使后面我們發明了文字，但發展至今，對圖像的本能吸引力依舊強烈。因為在我們認知的潛意識里圖像相較于文字更能讓我們快速輕松理解并記憶。

圖像如此重要，設計作品中當然也必不可少。因為圖片，它能一定程度上決定畫面基調；引導視覺流程；調劑平衡多段文字信息的枯燥性，讓閱讀變得輕松容易。 

在UI設計中，我們經常需要把設計輸出物拿給產品經理或者其他有設計決斷力的人看，UI設計中圖片使用的好與壞，能很大程度上影響著決策者的感知，以及你的設計過稿率。

如下左圖：商品視角、調性、細節，都沒有右圖來的統一、有質感。單看這兩張圖，會讓用戶有這樣的心理感知：左圖感覺像山寨盜版商城；右圖則會認為是嚴肅官方認證商城。所以，在同樣頁面布局下，不同的圖片使用與處理，能讓UI頁面的品質有較大的感知差異。 

圖片的使用如此重要。那么，我們在正式做UI設計前，首先需要弄清楚圖片在頁面的占比情況以及后續圖片的支撐來源問題。

1.了解圖片占比與來源

在構思UI頁面階段，首先需要了解以下兩個問題：1.圖片區域占比問題；2.圖片來源問題。當頁面圖片占比多，且讓用戶自定義，那么需要預估到APP上線后設計可控率會降低。換句話說，實際上線效果會不盡人意。如下圖：由于淘寶和網易嚴選平臺屬性不同，在圖片品控上就有著不同的視覺感受。當然，不是說淘寶做的不好，而是當一個平臺集納不同的店鋪，不同調性的產品類型，即使有圖片規范，也難如統一品類、調性的產品來的統一。 

弄清圖片內容的可控性問題后，開始進入設計環節，那么我們該如何選擇圖片？

2.怎樣選擇以及運用圖片

1.是否符合產品氣質？

在不同的場合有恰當合適的場景搭配，是十分基礎且重要的事情。在UI設計中，任何一個部分的設計以及元素運用都需要為產品服務。圖片也不例外。如果你是廚房類APP，頭圖選用小清新感的圖片，就顯得不夠合適，帶有環境食材元素的圖片才更讓用戶有共鳴。 

2.是否能清晰表達產品核心內容？

圖片是否主體明確？能一眼正確無誤的傳達核心內容？會不會因為其他元素元素搶了主體視覺，找不到視覺重點？ 

3.是否美觀、有品質、讓人想擁有？

圖片是否能表達美好生活以及美好品質的向往？光影關系是否自然？圖片是否高清有細節？ 

當明白圖片如何選擇后，還想和你分享一些冷門且重要的圖片過稿小技巧。記下來，將大大提升你的設計過稿率。

3.過稿高手圖片使用小技巧

1.圖片風格統一風格調性

漂亮圖片有很多，如果我們都以漂亮為基準，找出來的圖片也會形色各異。由于用戶的實際使用場景是：瀏覽一個完整APP，統一風格調性比美更重要。如果商品角度不一樣；飽和度高低不同；抽象與具象等，都會形成產品不統一，用戶視覺不適應等問題。 

2.圖片使用符合場景，讓決策者可以看到最后的顯示效果

有時我們為了趕時間，直接用圖片填充插件，讓圖片區域自動填充。但我還是想要給到你這樣一個建議：一個專業且成熟的設計師，即使是設計初稿，也不能隨便拿張圖，湊合一下。任何時候的匯報，都需要有著處女座對于事物的完美要求，過自己這關。因為任何時候你的表達與表現，都形成了你在別人心目中專不專業的看法，從而影響著后續的設計話語權問題。如下圖都是商城陳列頁面，右側的圖片給出上線的實際效果，更貼合產品，方便設計決策者給出建議方向，或做出決策。 

總結

我們都是視覺動物，不管你是否愿意承認：我們常常通過視覺表象，才決定是否愿意去更深入的了解某個東西。

設計就是在做產品視覺表象的表達，我們需要盡可能使用貼切的，漂亮的圖片。讓UI視覺看起來更加美觀，讓用戶愿意停留，認可以及信賴平臺。 

轉自：站酷-丘丘的設計筆記 

對于以下場景，你是不是有那么一點點熟悉：

視覺A：「視覺 B，把你之前的稿子發我下，我的頁面里也有組件 A」

視覺A：「稿子里的組件 A 怎么跟視覺 C 剛剛發群里的不一樣啊，我以哪個為主？」

視覺B：「剛剛業務通知組件 A 得修改，這次大促有 30+ 個頁面都用到，這修改量這么大咋辦？」

交互A：「這個 tab 上的文字看不清」，視覺A：「我覺得挺清晰的了」

開發：「為什么每次給的設計稿，明明長得都差不多，可尺寸就差了幾個像素，我又得寫新的樣式表進去」

以上的對話，在大型且多人合作的項目中尤為常見。

隨著大促項目體量越來越大，參與人員越來越多，這些問題越發明顯，直接影響了活動的視覺統一性和整體的工作效率。因此我們開展了營銷組件庫的設計。

什么是組件庫？

組件庫就是界面設計常用控件或元件的集合，「組」是設計元素的組合方式，「件」由不同的元件組成。

其工作方式和樂高原理差不多，玩家（設計師）通過小元件（設計元素）或組件（模板）的不同組合形式，層層搭建和嵌套，最終組成建筑（頁面）。

△ 樂高W16搭建過程，圖片來自「什么值得買」

△ 頁面設計過程

組件庫的優勢

1. 保證用戶體驗的一致性

對于大促這種含有多個子項目，涉及到 30+ 的頁面同期輸出的復雜項目，每個獨立的子項目雖然在需求上有一定區別，但整體的用戶體驗需要滿足基本的一致性，減少用戶認知和負擔，提高用戶的使用效率。組件庫的建立，其統一的設計語言能保持設計結果的統一性，避免多人多風格的現象。

2. 提升效率

• 設計成本：減少重復的機械式設計和反復糾結用 6px 還是 8px 的設計思考成本，從而有更多的時間參與到設計創新中去，發揮更高的設計價值；
• 協作成本：減少重復開發的工作，可準確定位又方便后期的維護和修改。開發者也能通過組件進行協作和同步，提率；
• 溝通成本：減少因認知不一致而導致反復溝通和解釋的成本。

如何做適合自己團隊的組件庫？

不同行業、不同產品、不同項目的組件庫因其業務特點不同，其差異會非常大。那怎樣的組件庫才能滿足「大促營銷類」的項目需求？

1. 前期研究，確定設計方向

分析研究

行業設計：行業優秀的設計系統、組件庫搭建思維，以及其源文件，是最寶貴的學習資源。

主站設計：保證全站設計的一致性的同時，也是重要的學習參考；

過往問題：對過去項目的橫向和縱向對比和分析，理解業務結構以及特點，從需求出發，拆解頁面表達結構和所需組件的特點。

設計方向

通過前期的分析，明確了針對營銷大促類組件庫的設計方向：

• 靈活性：營銷項目因策略不同存在較大的多變性，因此組件需支持可靈活改寫，以應對多樣化的需求
• 復用性：適用于不同項目間，即要求具有較好的通用性

2. 設計方法探索

拆分重組的組件化思維，解決模板靈活性和一致性的訴求

在設計方法上，我以 2013 年 Brad Forst 提出的原子設計方法論作為指導。方法的本質其實就是將頁面拆解為最小元素（原子），然后原子可以演變成分子，分子通過多維度的組合形式成為組織，再到模板，最終生成頁面（原理如下圖）。

營銷需求的多變性體現在分子的組合方式各不相同，但其共用特征是最小元素（原子）基本相同，因此統一最小元素，定義其組合的規則，即可從源頭把控設計的一致性。同時通過特定的組合原則，設計師結合各項目需求根據組合和應用原則（布局、文字等）進行設計，從而實現其靈活性。

原子設計理論延展閱讀：

3. 設計實施

明確了設計方向和設計方法后，結合營銷項目自身的特點，開始了組件庫的設計實施，整體流程如下：

梳理組件庫

將近幾期具有典型代表的頁面收集整理分析，主要是為了以下 2 個方面的內容

• 確定組件庫內容，以及組成結構
• 發現組件應用特點，為下一步原子和核心組合原則提供指引

ps：組件庫強調的是通用和復用，因此無需把所有模塊都納入整理清單，做「合適」的，而不是大而全但可能臃腫的組件庫。關于這個組件庫的體量應該如何選擇，可以看下文末的參考文獻。

設計環節

梳理完組件庫，按照原子設計方法論組件嵌套的形式進行組件設計。在 Brad 的概念里，是將系統分為了 5 個層級，但針對營銷業務的多變性，要滿足復用性和靈活性，越往上的層級復用性越差，因此在現階段，采用了 3 個層級「原子-分子-組織」構成營銷組件庫。

「全局考慮」在設計的整個過程中，需考慮每個組件后續的使用場景以及設計師的使用方法，利用 sketch 功能（symbol 嵌套、豐富的配置項、響應式設計等），可以設計出一個高通用性的組件（如下圖），以此達到增強每個組件的復用性，以及精簡組件庫的目的。（因文章篇幅受限，詳細內容可見文末參考文獻）

下面為每一個層級的詳細設計：

第一層：「原子」是最基本和最小顆粒度的單位，工作中常以「元素」命名，例如：顏色、文字、圖標、分割線等

布局：系統布局規范，需要通過統一的設計元素和間距規范去引導使用者們使用并且能夠適配不同屏幕尺寸，目的是達到一致性，可適配、可控性原則。

「網格系統」通過前期的研究，網格系統采用的是目前最常用的「8點網格」，能更好地適配不同屏幕尺寸，2 倍的變化均能更好地保持偶數，不出現小數點的情況。

「設計原則」遵循格式塔理論：建立良好的信息層級，能讓用戶快速獲取和理解有用、感興趣的信息，并產生下一步行為。

顏色體系：「色值標準」為保證文本可識別性，結合Web內容無障礙指南（WCAG）2.0標準，做了以下定義：

顏色對比度檢測工具：https://contrast-finder.tanaguru.com/

• 重點文本：文本的視覺呈現以及文本圖像至少要有 4.5:1 的對比度（AA級），大文本: 大號文本以及大文本圖像至少有 3:1 的對比度;
• 未激活控件：如 tab，文字顏色一般對比度 ＞ 3：1；
• 不可用狀態、占位符：淺色背景上對比度大概是 1.8~2.3（盡量 2 以上），深色背景對比度大致是 2.5~3（盡量 3）；

「衍生色設定規則」規律性設定衍生色，更好地打造頁面信息層級

根據以上規則設定顏色體系

文字體系：項目中字體根據實現類型分為系統字體以及圖片字體

「系統字體」為了較好的用戶瀏覽體驗，設計中優先采用開發直接寫的系統實現的字體類型，不會因適配而產生文字不清晰或做圖時不同系統渲染效果不同導致的不統一。

「圖片字體」考慮到版權，以及字體在不同系統下渲染差異化的原因，選擇了免費商用的思源黑體。

基礎原子：「靈活性設置」充分考慮應用場景，利用 sketch 功能提高其包容性和靈活性。

第二層：「分子」原子排列組合構成了分子，工作中多以「模板」命名，例如：品牌模板、單品模板等

「局部到整體，整體到局部」原子和分子，其實是一個系統中，相互依賴的元素。因此在分子的設計過程中，會遇到原子包容性不足的情況，因此實際設計中，是不斷在原子分子之間切換設計，不斷完善各自的設計。

第三層：「組織」原子、分子排列組合構成了組織，工作中多以「模塊」命名，例如：商品列表、內容卡片、入口模塊、瀑布流圖等

「保持克制，寧缺毋濫」該層面設計時，「局部影響整體，整體影響局部」的關系體現得更為明顯，會在原子/分子/組織三個層面不斷切換，進一步完善各個層面的設計。但過程中需保持克制，所有的設計應是圍繞「復用性」和「靈活性」進行設計的，而非組合方式越多越好，多即意味著一致性在一定程度會受到影響。因此，應是從過往項目中，預測未來可能出現的情況，窮舉后提取通用的組合規則后進行設計。

過程中多嘗試不同方案設計，結合實際項目測試，擇取最優方案。

整理設計文件，輸出設計規范文檔和使用說明。除了整理設計文件，梳理設計規范外，組件庫相當于一個產品，需要有一份使用說明，為用戶提供基礎學習，提升團隊成員的使用效率。

4. 迭代設計和維護

一個優秀的組件庫絕不是 30 天速成班就結束的項目，而是一款產品，需有專人長期的跟進和維護，例：優化組件包容性；補充組織的種類等，從而逐步建立起適用于團隊的組件庫。

總結

1. 打造組件庫的幾個關鍵步驟

• 第一步：前期分析研究，為打造「專屬」組件庫提供方向和目標；同時明確設計方法，規劃設計內容；
• 第二步：明確方向和方法，進入設計實施過程，通過梳理組件庫階段、設計階段、測試階段、整理輸出階段打造基礎組件庫；
• 第三步：后期迭代和維護，逐步形成專屬組件庫。

2. 項目成果

組件庫在 19 年雙 11 項目中的應用，統一性顯著提升，對比往年節省 76 人/天，平均效率提升 30%，其中主會場提升了 50%。

3. 項目反思

• 「基礎完善」目前的組件庫仍存在不少基礎設計問題，組件包容性，色彩應用不足等，因此，需結合 11.11 活動使用情況，整合模板，進一步完善組件庫；
• 「進階發展」組件庫目前僅在視覺形成閉環，后續將接入夸克平臺，聯動團隊的交互和開發組共建組件庫，構建設計研發一體化，從項目全流程提升效率，全面解放生產力；
• 「未來發展」聯合數據平臺，結合數據不斷優化組件庫，為后續精細化運營奠定基礎，賦能業務。同時將研究成果分享給事業部，將設計價值最大化。

4. 設計小感悟：

• 組件庫的設計要求的不僅僅是視覺表現上的設計，更重要的是對組件庫涉及到的不同項目、不同角色全鏈路的考慮，不僅有助于全局思維能力的鍛煉，同時也有助于專注細節的思考，提高自身專業影響力和核心競爭力，從而完成設計新時代的進階之路。
• 適合才是最重要的，對于他人產出的理論和經驗，需辯證地看待和吸收，在前期做好需求分析，明確需求目標，對癥下藥才能解決問題。

• 工欲善其事,必先利其器，充分了解軟件所具備的功能，能讓你的設計效率提升不是 1 倍 2 倍的事情。
• 文章來源：優設

本文分享國際化司機端首頁改版完整思考過程，化繁為簡提升司機使用效率，提升產品用戶體驗。

關于國際化司機端

隨著滴滴國際化業務腳步不斷加快，司機端始終是作為承載全球化業務運力的基礎保障。

同時，在移動通信技術高速發展的背景下，不同國家間的傳輸速度與硬件設備差距正在不斷縮小，用戶對應用產品的期望由基礎的可接受、可使用、功能齊全，向更易用、簡約、更為專注的產品使用體驗上轉變。

在新階段下，「為全球司機用戶提供一個「克制」「可依賴」的產品使用體驗」、「為業務拓展提供有力的體驗支撐」是體驗設計團隊在新的階段下提出的目標。

現狀分析

2018 年 9 月我們與產品同學深入拉美當地對司機側進行為期 2 周的產品體驗調研。雖然在當地的時間較為短暫，但是我們依舊感受到了拉美國家的習俗文化和人文特點。

相比中國人的含蓄內斂，巴西與墨西哥人顯然更加熱情隨和。

在巴西，這個世界上假期最多的國家，處處體現著人們對生活的享受才是自始至終的追求。無論是世界杯一個月狂歡長假，還是周末下午兩點開門的商區，總會讓人羨慕的同時刷新你對享受生活的認知。

而娛樂至上的墨西哥人，熱情友好，能歌善舞，我們常說的放飛自我在這里幾乎成為墨西哥人每天的生活常態。他們喜歡享受當下，后天下之憂而憂。他們覺得工作賺錢就是為了更好的休息，大多數人每天都是開朗樂觀的處世態度。

同樣，落后的基礎建設、糟糕的交通狀況、教育水平低下、價格昂貴的電子產品以及相對不太穩定的社會環境，也是它們共同存在的問題。

在當地，我們通過實地調研與用戶訪談等方式，針對產品體驗的問題與司機進行面對面溝通。收集了很多寶貴的用研資料與司機訴求，如司機希望平臺為他們推薦訂單引導，司機希望獲得更多的實時動態訊息和司機每天都可以查看自己的收入狀況等，集中體現在效率、感知、體驗這三大方面。

其次，伴隨著業務的不斷增長，越來越多的功能使得我們的產品變的更加復雜，舊版的框架布局早已是不堪重負，無論是現存的體驗優化問題，還是未來業務功能的拓展問題，舊的框架體系都是難以為繼，無法再通過簡單的修補來滿足用戶和業務未來的訴求。

明確改版及對應目標

改版升級對產品本身來說是一件非常重要的事情，需要對多方因素進行慎重考慮。經過多次的溝通討論，權衡改版對產品可能產生的利弊關系，采用小步快跑，快速試錯，分階段分模塊的方式進行。

首頁既作為承載核心功能（發車）的載體又是其他重要板塊的分發的入口，在內容呈現與用戶感知上都存在很大的體驗提升空間；我們通過拆解業務中長遠需求規劃得知，大多數重點需求依賴于首頁框架布局，而現存首頁框架無法滿足業務訴求；在競品的改版中首頁的變化最大，并在司機群體中取得比較正向的反饋；通過上述分析，決定率先對首頁進行優化改造。

首先我們與產品、運營側進行深入討論，結合用戶訪談整理的用戶訴求，對此次首頁改版的目標達成一致。

聚焦核心訴求 提升首頁體驗

1. 首頁框架具備較強的業務拓展與靈活配置特性

在舊版的框架體系中，大量信息在首頁呈現，功能層級復雜，重點功能難以突破和查找，關聯較弱的信息架構嚴重影響和分散了司機的關注點。隨著業務模式不斷擴展，首頁新需求類型逐漸增多，一套更加具備靈活的拓展能力和管理能力的首頁框架尤為重要。

首先我們將舊版的首頁布局打破重建，對現有模塊進行整理。功能相似、定義模糊、司機操作相對低頻的模塊進行合并、刪減。

對司機高頻操作模板進行場景劃分，將相關信息進行聚合處理，通過對入口的強化，來明確司機對不同模塊的認知。

出車管理

將與出車相關信息進行組織聚合，結合司機不同的使用場景，將功能與模塊進行結合，加強認知，減少司機多余的思考與判斷，快速響應，提升工作效率，同樣也為業務在有關出車功能方面提供靈活可拓展的組件框架。

收入管理

通過顯示司機最關注的今日收入信息，為司機提供方便快捷的查看功能，使司機更專注于工作本身。同時對收入管理入口起到了強化認知作用。

信息管理

對關于個人相關的信息通知及功能操作進行聚合，方便司機對個人信息進行快速查看，提高查看效率。

通過對框架模塊的標準化定義，后續的業務需求便可以進行歸類管理，根據不同需求的不同屬性，結合功能使用場景，選擇合適的模塊進行展示，提高司機使用效率同時增加首頁的業務框架擴展能力。

2. 精簡信息呈現 明確核心操作

通過對框架的重構，有效的解決了首頁信息承載壓力過大，功能層級復雜的問題，同時地圖的面積相比舊版首頁也大幅增加，信息呈現更加簡潔、輕量。

出車操作作為首頁的核心功能，通過調研得知，司機普遍反映在舊版首頁中存在出車操作感知弱、收出車狀態區分不明顯的問題，對司機的操作體驗和感知體驗造成了比較大困惑。

在首頁改版過程中我們著重對出車操作進行了設計分析，基于對業務的了解和競品的分析，得出以下三個結論：

• 強化發車按鈕。突出核心功能，鼓勵司機更多更主動的發車。
• 強化接單中的狀態。增強司機對接單狀態的感知度，減少司機對于所處狀態的困惑。
• 弱化收車按鈕。對司機收車按鈕進行收納，減少司機的誤操作的行為。

通過「兩強一弱」，減少司機困惑提升發單效率的同時，間接的延長司機的在線時長。

完成頁面設計后我們發現，操作按鈕通過靜態視覺角度去表達收出車空間位置關系是十分困難的，僅通過 Toast 提示會造成用戶理解的斷層，于是提出使用動效去進行「搭線」串聯，搭線發車前按鈕的點擊和收納后的位置提醒進行視覺體驗上的串聯，從而達成感知增強，解決視覺體驗層面不容易解決的問題。

3. 增強獎勵信息首頁曝光度及展示樣式 縮短查看獎勵路徑

豐富的訂單獎勵活動是我們與競品相比重要的競爭優勢，司機在完成定量訂單的同時提供了更多的額外收入。查看每日獎勵活動，已成大多數司機每日上線必做的事情。

與舊版相比，在新版首頁中通過提升獎勵入口層級，縮短了查看獎勵活動操作路徑，從而方便司機快速查看。

通過首頁透傳的獎勵卡片，司機在首頁即可獲取到推送的獎勵相關信息，及時獲取到獎勵預告和進度，提升了司機工作效率的同時加強了司機對獎勵活動的感知。

4. 設計語言升級

在經歷了快速奔跑的粗放階段，我們也在思考司機端產品究竟以怎樣的品牌氣質傳遞給海外的司機群體。

在當地，我們在司機心目中更像是合作伙伴，憑借真誠互利的態度贏得了當地司機的用戶。

真誠、熱情與融合我想這就是我們想要傳達的核心品牌情感，而克制、可依賴將作為產品體驗的設計原則貫穿始終。

顏色系統

司機端顏色系統在基于現有品牌色基礎上，結合不同國家顏色文化的理解，新增加符合本地化的輔助色系，以提升產品的親和力，傳遞品牌情感。

文字系統

針對司機用戶的操作使用場景，對文字字號梯度進行提升，通過文字粗細、顏色、大小加強信息對比度，使司機在更多復雜場景下可快速獲取重要信息，提升閱讀體驗。

在此次改版中新引入 Barlow 與 DIN Alternate 字族作為模式數字展示字體，兩款字體分別為 Android 及 iOS 系統下默認包含字體，相比 Roboto 與 SF Pro text 兩款字族，在數字展示上更為明確、識別性更強，同時因為自身「纖瘦」的特性，在屏幕橫向面積上節省更多空間。

結語

業務在不同的階段有不同的側重方向及打法，設計側根據業務所處階段應及時的調整自身的目標定位，快速響應，積極探索設計的機會和突破點，在不同的階段發揮自身價值，助力業務達成共同目標，為用戶創造更便捷的產品使用體驗。

首頁改版從立項到設計再到研發，多部門同學緊密配合，在有限的時間內最大化的完成預期上線效果。

全量上線后，通過問卷對首頁改版進行滿意度收集，司機對新版首頁的滿意度平均值高達 93%。取得的成績離不開每一位參與改版的同學支持，也得益于國際化團隊自始至終對產品體驗的重視與認同。

作為司機端體驗升級的第一步，首頁改版只是一個開始，希望通過不斷的打磨優化，秉持初心，為全球司機提供更克制、可依賴的出行平臺。

文章來源：優設

運營類活動定義

運營類活動是在某一段時間內進行的，有明確業務目標（業務轉化、品牌傳播）及營銷群體，依賴游戲化手段帶來優秀用戶體驗，從而獲得成功的一類活動。

特征

1. 生命周期短

運營類活動生命周期較短，常在某一段時間（可能是周期性的），一般跟隨時節熱點或者運營節奏來進行。較短的生命周期給設計、開發、數據等帶來較大挑戰，設計程式化提供基本設計思路，組件化降低設計成本。

2. 業務目標明確

運營類活動一般以產品營銷、品牌運營為目標，發放各類優惠券大眾目標用戶，從而帶來業務轉化，或者營銷企業品牌，比如常見的年底 h5。

3. 有一定故事場景及氛圍

運營類活動需要較強的故事場景。良好的場景設計、氛圍營造可以帶來沉浸式的用戶體驗，與用戶建立情感共鳴。從而提升用戶參與度、帶來好的業務轉化。

故事場景結合時節熱點，同時考慮活動需要營造的體感氛圍。

4. 人群細分

運營類活動的特征在發起之初就有特殊的運營目的和特定特征的用戶群體。為實現最優的業務轉化，需要在設計之初明確活動覆蓋的用戶人群。同時在各個環節都能考慮到特定用戶群體的不同需求，尤其是在業務轉化的過程中，好的人群細分往往帶來事半功倍的效果。

5. 游戲化

引入游戲機制及游戲元素。

為什么有效

1. 場景化設計帶來沉浸體驗

運營類活動結合時節熱點，通過富有故事性的視覺傳達（插圖、動效、聲音等設計元素）帶給用戶沉浸式的體驗，與用戶建立情感共鳴，從而有效的鼓勵用戶行為。

沉浸體驗的營造對設計師提出了更高要求，可以從活動設計的故事感、用戶代入感、產品互動感、主體差異感幾個方面來思考入手。

2. 游戲化機制及元素

運營類活動中廣泛應用了游戲化機制和元素，它們是活動成功的有效保障。設計時綜合考慮業務及用戶需求，從用戶動機激勵、行為引導的角度出發，將運營活動游戲化?？梢栽诨顒訁⑴c深度的各個階段引導用戶操作，從而達成活動目標。以下列舉了運營活動中常見的用戶動機，后續我會從用戶參與路徑出發，盡可能詳細的描述在用戶參與的每一個階段起作用的為動機，以及實現的手段。

大獎帶來的誘因效應

動輒百萬的大獎獎勵幾乎已經成為運營活動的標配，在動機理論中，用戶行為的產生來源于需要，需要導致內驅力，引發行為，從而推動用戶實現特定的目標。當目標的誘惑力很大時，即使沒有內部驅動也能激發行為。這也是眾多運營類活動大獎存在的理由。

占便宜的心理

愛占便宜是人的本性，從心理學角度講，占便宜就像是額外得到的驚喜和獎賞，可以讓人產生滿足感！用戶在這種心理作用下，會為了小利益去做出設計預設的行為，將業務需求設置在‘占便宜’的路徑中可有效提高參與、轉化率。比如在設計中用中獎動態彈幕來強化用戶參與的動機，提高參與率。

有趣和好奇心

人天生具有好奇心，它幫助我們適應不斷變化的環境、發現新的資源，是一種「無法抗拒」的行為動機。在運營活動中，用戶會被有趣的活動頁面，未知的規則設計所吸引，從而開始主動「探索」。這也是用戶參與的動機之一，設計中精致的 UI、有效的頁面信息傳達保證了用戶好奇的有效性。

即時反饋及階段性成就

「即時反饋」是沉迷現象發生的原因。學習之所以痛苦正是因為其反饋鏈路太長，你只有在考試或者應用到所學知識時才能獲得反饋，還有可能是負面的。在活動設計中，每一次用戶操作都會有及時、細膩的反應，可以給用戶帶來精神愉悅，同時設計的階段性成就又給用戶帶來成就感，用戶會不知不覺中在活動中越走越遠。

隨機獎勵的多巴胺效應

人類的本能熱衷于冒險，隨機的、不確定的獎勵能夠刺激大腦分泌多巴胺，帶來愉悅感，從而刺激用戶行為的重復。在活動設計中，常用到這一理論，比如抽獎機制。

所有權與擁有感

當用戶感到他們擁有或控制某樣東西時，會自然而然的強化它的屬性、發揮其價值。尤其是通過適當的付出和自身努力，用戶還可能不合理的高估其價值。在活動設計中，常使用戶通過易實現的行為獲得權益，通過「幸苦操作」強化了擁有感，提升其心理價值，從而促進用戶對權益的使用。

稀缺性與用戶渴望

稀缺性的心理學原理在于人們想要獲得某樣東西的原因僅僅是它太罕見，或者無法立刻獲得。它破滅了人們對情況的控制感，人們會為了重獲控制而采取行動。設計時，可以利用這種心理鼓勵用戶做出期望的行為。常見的有時間限制、權利限制等。

使命感/社交影響/損失規避……

3. 數據與策略思維

運營類活動中數據和策略思維是保證活動效果最大化的有效手段?；顒有枨筇岢鰰r，即考慮可能的參與用戶細分；活動開始時，考慮引流途徑和引流方式、物料的差異化；活動進行時，根據用戶細分策略化任務推送，根據埋點數據監測積極調整相關設計元素。事無巨細才能確保活動成功。

文章來源：優設

目錄：

一、鍵盤與命令類型

二、設計要點

三、有意思的鍵盤交互

畢竟該處是表單輸入的交互終點，用‘前往（Go）、登錄（Join）’這些命令詞是不是更準確些呢？

文章來源：UI中國

設計并不只是為了區分市場定位，在視覺上對產品做一些修修補補。設計需要從品牌自身出發，設計出來的產品才能與用戶產生情感交流、為品牌而發聲，這樣的設計才能真正為品牌創造長尾的價值。

前陣子和朋友去看車，我們去的第一家店是沃爾沃，沃爾沃主打的品牌理念是「安全」「可靠」，當時我在沃爾沃店里看的每一輛車的外形就像從金屬盒子進化來的，棱角分明、線條硬朗，同時每個部件都相當厚實，當時我坐在車里的時候，感覺自己像是坐進了一個大保險箱，里三層外三層把我包裹起來，坐在里面特別有安全感。

我們去的另一家店是寶馬，寶馬的品牌概念主打的是「時尚」「運動」，所以寶馬車給人的感覺和沃爾沃又完全不同了。它的流線感非常明顯，而且這種流線型設計一直延伸到車內的每一個部件。印象特別深的是，車里座椅的荔枝皮紋和我們常見的品皮質特別相似，讓我感覺自己像是坐進一個時尚的愛馬仕箱包里。

其實無論是工業設計，還是我們的用戶界面設計，好的設計給用戶的感受與品牌理念是相契合的。設計中的每一個細節都是圍繞品牌自身而展開，設計出來的產品才能夠成為品牌的具象化延伸，與用戶產生情感交流的同時也會讓用戶更加忠誠于我們的品牌。具體怎么做？這需要我們運用統一的設計語言來完成。

什么是設計語言？從設計的層面理解，當你看到一組功能與形式相互融合，向你訴說其特色與優點的產品，從而喚起你的情感反應時，你正在體驗的就是設計語言。簡單講，當你的品牌運用設計語言的時候，你的產品會跟人說話：會告訴人們它能做什么，怎么做，以及你的品牌是個什么樣的品牌。而這個設計語言也將會從前期的風格設定到后期的設計執行，始終貫穿在我們整個產品設計的流程當中。

首先從一開始的風格設定，比如每次我們設計師接到一個 brief 都會先做視覺推導。但是我之前的視覺推導是這樣的：比如現在為一個類似拼多多的產品做設計，然后搜集了一圈競品的界面，發現拼多多、聚劃算、淘寶特價都是這種線框的、扁平的設計風格，所以最后推導的結論就是——因為我們拼購面向的用戶群體是低消費人群，而競品的設計風格是 xxxx 的，所以我們的用戶偏愛這種 xxxx 設計風格，所以我們需要用這種風格去設計我們的頁面。

搜狐總監總結的競品分析方法：

其實這是一種循環論證，并不能推導出真正有價值的內容。就像你問一個胖子「你為什么這么胖呀」，胖子說「因為我吃得多」，你又問「為什么要吃這么多呀」，胖子又說「因為我胖，所以需要吃多點」。

競品分析雖說也是一種前期設計調研的方法，但如果我們的設計只依賴于參考其他人怎么做，最后我們設計出來的產品不僅沒辦法向人們表達一個完整的品牌理念，而且我們的設計跟其他競品看起來很相似，失去了自己的特點與優勢。

所以，在我們設定產品的設計風格的時候就需要運用統一的設計語言，產出能夠表達我們品牌特質的設計。那具體怎么做？這里涉及 2 個關鍵點，一個是如何找到你的品牌特質，另一個是如何針對這個品牌特質找到對應的設計語言。

元素 —— 圍繞品牌特質

首先，想要找到我們的品牌特質，我們可以從一個很有意思的原型中得到啟發。如果想讓我們的品牌真正能夠影響用戶，讓用戶為我們的品牌買單，我們的品牌就需要基于用戶內心最深層次的需求，明白用戶買單的動機在哪里。這時候我們再對應這些深層次的動機和需求做出設計，效果自然會事半功倍。那么如何能把品牌和用戶的動機需求連接起來呢？我們可以借助心理學家榮格的原型理論來一一對應。

榮格的原型連接了人們最深層次的動機和感覺體驗，表達了人們的基本需求，最重要的是他將這些需求都具像化為一個個角色。所以我們可以從中找到自己品牌的角色，并且在往后的發展中根據這個角色設定我們的品牌特質和設計語言，進而與用戶建立根深蒂固的聯系（相當于為我們的品牌打造一個「人設」）。我們先看看榮格的原型具體有哪些：

1. 開拓者

我們也有稱之為探求者、朝圣者，它是敢于冒險的、首創的、獨立的、不墨守成規的，更多的尋求自我實現和改變，擁有自由的價值觀、自給自足的。開拓者通常會在未知的領域，開創新的路徑。同時是個驅動力很強的非常有個性的人，能夠忍受探索新路上形單影只的孤獨。屬于這種角色設定的品牌比如有星巴克、路虎都是。

2. 守護者

守護者通常是說無私的、有同情心的、仁慈的人，給弱勢群體提供幫助和支持的，同時具有慷慨大方、自我奉獻的精神。守護者更多立志于他人的安危和福利，像這種角色的品牌稍微少點，通常是一些救濟會、慈善組織等等。

3. 愛人

愛人相關的特點像熱情的、美麗的、感性的尋求真愛和愉悅，追求愛的價值觀和親密關系。愛人通常是通過給予和獲得愛的強烈愿望所驅動的，這個不局限于愛情，友誼也包含在內，主要是意味著情感，所以一般是香水或者化妝品品牌都是運用這個原型角色。就像 dior，當然還有巧克力費列羅等等。

4. 魔術師

我們知道魔術師的形象通常是愛惡作劇的、滑稽的，有時候能夠跨界，打破禁忌，并且自身帶有樂趣，善于改變的。魔術師通常渴望樂趣，從單調的生活中解脫出來，敢于打破禁忌，質疑不可能的事物。這種角色設定的品牌我們可以很快想到那個愛玩有趣、經?？缃绾献鞯陌偈驴蓸?。

5. 創造者

創造者更強調藝術感、想象力、創新性，以及自我表現的價值觀和美感上的愉悅性。創造者通過精心制作用來表現自我的事物，讓人們耳目一新從而得到認可。像這種強調創造力的品牌比如樂高，用有限的積木組合、創造出無限種可能。

6. 反叛者

反叛者也可以說是不法之徒、外來者，這種角色通常是具有變革性的、反常的、打破常規的，表達一種價值觀的解放。反叛者通常存在于社會邊緣的，被大部分社會群體看成局外人甚至異類的角色，我們也可以看成是亞文化的一種轉變。像這種主打標新立異、反常規的品牌，最著名的就是哈雷。

7. 魔法師

前面我們提到了魔術師，那么魔法師相對于魔術師而言，會帶有更多的非現實的想象，精神上的超凡魅力，帶來轉變的、形而上的意識的擴張。通俗地說，是帶有更多迷信元素的。但是最重要的是，魔法師趨向于駕馭各種能量和環境，進而給人們帶來身體上以及精神上的轉變。同樣，像這種強調 magic 的品牌我們第一個可以想到迪士尼，典型的魔法世界。

8. 智者

我們也可以稱之為「圣人」，智者通常是一種富有哲理性的、知識淵博的形象，忠于追求真理、樂于分享知識，也是智慧的代名詞。智者經常被當成真理的捍衛者以及智慧的來源，為人們指明方向，幫助大家前進的代表。這種角色設定適用于一些知識輸出的品牌，比如哈佛大學、金融時報等等。

9. 天真

這是 11 個原型中唯一一個形容詞而不是角色名詞，它代表著信任、純潔、健康樂觀，有希望的、誠實善良并且擁有簡單的快樂。天真代表著樂觀主義，不管處境如何都能保持希望和信仰，更像是紛雜世俗中的一片凈土或者是一個烏托邦世界。而像這種原型設定一樣傳達樂觀、希望、天真的品牌有麥當勞、可口可樂等等。

10. 統治者

統治者象征著權威、控制、至高無上，同時也有承擔、效率、和諧的屬性。統治者被得到和控制權利的欲望所驅動，通過對事物的掌控來防治混亂發生。同時也是一種責任承擔的表現，以有組織的的方式來完成義務。屬于這種角色設定的品牌比如有 IBM、花旗銀行等等。

11. 英雄

每個人心目中的英雄不盡相似，但是他們的共性都是勇敢的、有原則的，勇于克服障礙，同時敢于接受挑戰、伸張正義，面對逆境的時候堅韌不拔。這種角色設定的品牌比如強調挑戰、正義、勇敢的耐克、聯邦快遞等等。

總而言之，原型是將我們用戶內心最深層次的需求，具象化成一個角色，我們的品牌對應上這些角色，相當于對應上了我們用戶最深層次的需求，為我們品牌和用戶產生情感交流打下基礎。同時，它可以為我們設計師想為品牌找到對應的設計風格的時候，提供更多維度的靈感。而這之后的過程，就涉及到剛才提到的第二個關鍵點，如何為我們的品牌找到對應的設計語言？

我們從前面的心理原型中了解到品牌的角色設定之后，圍繞這個角色將會有一系列的關鍵詞去描繪這個角色的特質。我們將這些抽象的、描繪品牌特質的關鍵詞具像化，則可以得到描繪品牌自身的設計元素。具體我們可以借助一個圖形四象限來完成：

我們將圖形的基本構成（點、線、面）作為我們的坐標延伸——寬窄曲直，用這四個屬性我們可以組合出非常多不同形態的圖形元素。比如說，我們用「寬+曲」組合出來的圖形可以是：實心的圓形、波浪曲線等等；再比如說我們用「窄+直」可以組合出：細直線、帶有直角邊的矩形等等。

同時，在圖形屬性的坐標上，我們還需要延展出一些帶有這種屬性的事物或印象。比如，生活中帶有曲線的事物，像有花瓣、棉絮等等，這些事物給人的印象是柔和、溫暖的表現；而直線的事物，我們聯想一下生活中的帶有直角的事物，比如像玻璃、霓虹燈管等等，這些表現前衛、鋒芒畢露的事物。

像上面綠色部分的認知印象，針對每一個維度可以聯想出很多關鍵詞與事物，那么在我們延展出更加詳細的四象限之后，這時候可以再次拿出，我們前面說到的，原型角色的關鍵詞，再和剛才的圖形四象限進行比對，利用象限中的圖形基本屬性，來組合出屬于我們品牌的設計元素。具體怎么做，我舉一個京東直播改版的案例。

首先基于京東品牌特質（原型設定是英雄），圍繞英雄這一個原型我們會有很多關鍵詞去形容它，比如敢于挑戰、堅韌不拔等等。不過，京東直播作為京東 App 的主要欄目，更希望吸引更多的年輕人以及女性群體的參與，所以在京東直播里，我們表現的是更加年輕、女性向的英雄——驚奇隊長，一位自信、勇敢挑戰的女英雄形象。因為像人在不同場合下都會有不同的表現，對于品牌來說也是如此，我們設計師也需要根據不同的場景或者子產品的需求，基于原型的核心理念再做出適應性的設計，讓我們設計的品牌更像一個生命體，而不是一成不變的事物。

那么我們圍繞年輕、女性、自信這個主題再腦暴出更多相關的關鍵詞。比如具象的可以代表女性的事物：口紅、高跟鞋；比如一些抽象的內容，我們可以把他們具像化，比如年輕的「活力」，我們可以用泡泡、花朵來表現，女性的「優雅」可以用香水、絲帶表現，英雄的「自信勇敢」用笑容表現。

不過，我們知道用戶界面設計相對于平面設計的海報、插畫而言，更重要的是對產品信息功能的輔助，所以這里的設計元素運用會更加克制，這意味著需要我們回歸到更基礎的層面。所以我們需要從剛才的具象事物（比如花朵、笑容）中提取出他們的基礎屬性，比如花瓣是圓弧形的、片狀的，笑容是向上的曲線。同時借助圖形四象限，用「寬+曲」的手法來表達我們的設計元素（年輕、女性向在第二象限，對應的寬+曲屬性）。在后期設計過程中，融入這幾個元素再作出界面設計。

當然，在整個設計流程中，設計語言的設定并不單單包含元素這一部分，還包括顏色、框架、布局等，各個方面的考量缺一不可。

顏色 —— 相對統一而非絕對一致

為什么是相對統一而非絕對一致？因為人們對大部分顏色的認知其實是來自于自身的行為，受到心理、環境、文化等背景因素的影響，更多是一種個體的主觀感受。比如同樣的紅色，在中國是吉祥喜慶的代表，在國外普遍認為危險警告的顏色。比如黑色，在大部分年輕人眼里會認為是酷的時尚的顏色，而相對年長傳統的人則更多會覺得是邪惡、忌諱的顏色。所以我們并不需要過分強調建立絕對一致的色彩規則，這樣也能使我們設計的品牌更像是一個有靈性的生物，而不僅僅是一個僵硬的組織。

比如今年的京東 618 項目，時間跨度長達 30 天，活動頁面覆蓋上千個，設計師不可能一個個去指定顏色規范、或者讓同一個顏色適用于所有頁面，所以需要設定的只有色彩感覺和表現手法，這種統一的大方向。所以我們可以看到這些在 618 期間的設計，雖然不盡相同但能讓人清楚的感知到，這是來自同一個生態下的主題，并不會因為顏色不同就無法識別。

雖然人們對大部分顏色的認知來自于心理的主觀感受，但還有對另一部分的顏色的認知是來自于人們的生理反應。而這一部分，才是我們在設計的時候需要注意的，關于造成人們「感知過強」和「感知過弱」的問題。

1. 感知過強 —— 顏色對抗通道

簡單講，就是相當于我們設計常說的——對比色，雖然我們知道對比色可以給用戶帶來視覺刺激，但是并不建議在設計中大面積的、長期的使用（紅綠或黃藍對比色），為什么呢？

因為我們所說的顏色，其實是人眼對頻率、光的波長的感知，就像我們耳朵聽的音高或一個音符時所感知的聲音的原理一樣。下圖是人們視網膜三類視錐細胞對光的敏感度，以及人造紅、綠、藍色光感受器對光的敏感度。我們可以看到，低頻視錐（紅線）信號是紅色和黃色，中頻視錐信號是綠色，高頻則對應藍色。而我們設計中常說的對比色，其實就是通過這些視錐細胞的低、中、高頻信號的極值相減，才得來的顏色對抗組。所以這種通過對視錐細胞兩極的強烈刺激才得到的對比色，長期使用下會讓人產生疲勞甚至煩躁的情緒，而在這種不穩定的情緒下，用戶非常容易產生誤操作，甚至最終遷怒于你的產品不再使用。

所以我們作為設計師可以運用一些方法來盡量控制對人眼的最極端的刺激，比如通過減少對抗色的面積，或者通過將對抗色組中的一個顏色用它的近色替換，等等。

2. 感知過弱 —— 色域跨度

除了以上，讓我們感知過強的顏色對抗通道，另一個需要注意的顏色問題就是，讓人們感知過弱的色域跨度。我們有時候會遇到一個問題就是，按鈕上的文字和按鈕的顏色融在一起，導致按鈕文字看不清。

這個問題其實就是兩個顏色的色域跨度過小導致的，首先我們用 H（色相）S（飽和度）B（明度）的數值來劃分色域（如下圖）。在統一H（色相）值的情況下，規定了 10 個標準的S（飽和度）、B（亮度）值，以 10 為單位作為一個跨度。兩種顏色在這個色域中，至少要相差 5個跨度，用戶才能有效感知到兩種顏色的差異。

比如下圖中的藍色背景色值是 60，那么放置在這個背景中的文字 A，至少要跟這個 60  的位置相差 5 個跨度，也就是 10 這個位置。如果文字A 的色值只有 30，與背景色的 60 跨度小于 5，那么文字 A 在這個背景上會難以識別。以此類推，深色模式中（如下圖）這個背景色值 100，那么在這個背景上的文字 A 色值，最多不能超過 50。

以上關于顏色對抗通道和色域跨度的問題，就是我們需要了解的一些顏色運用中的邊界，并在這個邊界以內讓設計保持最大的靈活度。所以對于顏色，我們需要強調的是相對統一的邊界極值，而不是絕對一致的色值。

如果我們把前面說的設計元素和顏色看作品牌的皮膚，那么視覺框架則是品牌的骨骼。如果想讓我們的品牌成為一個能夠真正影響用戶的存在，不僅要有好看的皮囊——在設計元素和顏色上延續品牌基因，還要有強大的內心——視覺框架要能足夠支撐起我們品牌的身軀。

框架 —— 基于階段價值訴求

視覺框架包括了層級和布局，我們需要在設計的過程中，加入對產品階段和品牌價值的思考。因為就像人一樣，處于不同階段的人追求的東西會有所差異。同樣的對于品牌也是如此，處于不同產品階段會有不同的需求，相應的品牌價值點也會有所差別。所以如果想讓設計的視覺框架能夠足以撐起品牌，在這其中將會涉及 2 個關鍵點：如何定位產品階段和品牌價值，以及如何圍繞產品階段與品牌價值點設計對應的視覺框架。

首先是定位我們的產品階段和品牌價值，我們可以通過對照經濟價值系統（如下圖）：產品的階段分為初級產品、產品、服務和體驗這 4 個階段。

拿京東舉個例子，如果我們位于初級產品階段，我們的平臺就是這樣的（如下圖）：展示出所有商品信息，用戶需要根據信息聯系商品的供應商，去和供應商進行交易。那么在這個階段的時候，品牌的核心價值在于對商品信息展現的完整性、全面性，只要這個平臺能夠覆蓋足夠多的商品，并展示完整的商品信息，這個階段的目標就達到了；

如果我們位于產品階段，我們會對商品進行分類，并在平臺上提供統一的購買渠道。相應的，這個是以后的品牌價值在于，平臺能夠對商品進行精準分類或者實現統一的購買渠道功能，讓用戶能夠在平臺上買到商品；

而當我們位于服務階段，我們的平臺不僅可以購買商品，我們還會提供售前售后的服務，對應不同的客戶群體推薦不同的商品，或者提供定制化的服務等等。平臺除了實現交易功能，需要提高品牌的競爭力，在競品之間形成差異化，為人們提供一系列附加價值的服務，吸引更多用戶在我們平臺上下單才是目標；

而如果我們位于體驗階段，我們可以從視、聽、味、嗅、觸覺給用戶帶來一系列的情感反應，為每個個體營造不同的回憶與感受。讓用戶與品牌產生情感上的互動，在更深層次上影響用戶認知并形成堅固的情感紐帶，讓用戶忠于我們的品牌才是這個階段的目標。

正因為不同的產品階段，對應的品牌價值與目標不同，我們才需要針對產品階段，為品牌設計合適的視覺框架，到后期設計出來的產品才能更貼合地為品牌發聲。像今年京東 app 改版項目，在接到這個 brief 之后，首先當然會先看看當時版本存在的問題，下圖為當時京東 7.0 版本。

當時團隊逐一列出了 7.0 版本存在的幾個主要問題：

1. 品牌識別度低

我們可以發現在這個界面里很難發現京東的品牌元素，就算現在換一個品牌同樣這個界面也適用；

2. 業務分發局限

這個版本里的商品坑位是固定的，業務展現的數量和形式是局限的；

3. 運營維護成本高

banner 模塊采用通欄而且上下漸變的樣式，這需要商家制作運營圖片的時候，將主要內容嚴格控制在我們的限制區域內，這同時也增加了我們運營審核的工作量；

4. 樓層過長、轉化率低

在 7.0 版本中，中間的樓層頻道長達 7 屏，同質化的內容導致平臺商品的轉化率不高；

5. 促銷信息干擾

界面的促銷信息讓用戶眼花繚亂，難以讓用戶快速找到自己想要的商品；

6. 個性化感知不足

電商平臺內容形式趨向單一化，沒有太多創新的表現。

有了這些具體的問題項，設計師們開始進行針對性地視覺框架設計。比如，針對個性化感知不足的問題，我們希望重新設計百寶箱區域，打破常見的圓底 icon 的樣式，每個圖標的邊框都是不規則的，讓整個區域更有表現力，同時與其他電商平臺的界面形成差異化。再比如，針對促銷信息干擾的問題，我們希望簡化原本頻道入口的信息，將原本好幾個 sku 信息對應同 1 個入口，優化為單個 sku 與單個入口一一對應，讓用戶保持專注力快速找到自己想要的頻道入口。

諸如此類，當時我們為這幾個問題延展出許多設計上的解決方案，輸出了不少有創新性的視覺稿。但是隨著設計工作越往后進行，我們發現手中的設計并不能很好地解決，品牌在當前階段中面臨的實際問題。

因為在前期框架設計的整個過程中，我們沒有把品牌定位這一因素考慮進去，我們發現舊版本的問題，埋著頭只想把這些問題都解決了，卻忘記抬起頭看看我們的品牌現在在哪。我們前面說過，對照經濟價值系統，京東目前主要處于服務階段，還在逐漸邁向體驗階段的進程中。

而處于這個階段的京東，外部環境是電商平臺的逐漸趨同化；內部環境是業務體量龐大，同時產品仍有上升空間。所以我們的階段目標就是需要加深用戶對品牌的認知，業務內容需要更加具備兼容性、延展性，同時需要提高產品的業務分發能力。

結合這個階段性目標，我們可以從舊版本存在的問題中，發現這 4 個問題才是當前優先級最高的、需要在當前階段中解決的內容。所以基于篩選后的 4 個問題，我們開始將設計往回收，從視覺框架上更多聚焦于這 4 個問題的優化。

比如針對業務分發局限性的問題，對首頁下拉區域的布局進行優化：下拉刷新除了常規的刷新狀態外，在營銷活動期間用戶可下拉跳轉至活動頁面。我們將下拉路徑縮短 30%，共享元素空間兼容更多的業務內容，充分利用首焦區域豐富業務的展現形式。

比如針對品牌識別度的問題，將首頁頭部區域的層級進行優化：在京東品牌形象 Joy 中提煉出微笑曲線，將微笑弧度應用在頭部的背景輪廓上，并且在整個頁面中統一植入品牌色京東紅，同時在當前我們的品牌尚未成熟的階段，直接使用京東 logo 強化用戶對品牌的感知度和記憶點。

比如針對運營維護成本高的問題，還記得前面說的我們一開始做的百寶箱的設計么，雖然那種設計是更具有差異化和創新性，但是目前產品量級大、業務入口多，而且這一區域涉及合作商家自己提供的素材露出，如果沒有統一的外框與規范的內容，運營維護成本是相當高的。所以我們保留了 icon 外框，同時規范每個框中只居中展示一個對應的圖形，不能包含文字等其他元素。

最終我們可以看到，改版后的京東 app 無論是在品牌、業務層面，還是在多種復雜的運營場景中，都能實現作為平臺的兼容性和延展性。所以，在視覺框架的時候需要預先考慮產品階段，針對不同階段需求作出相應的設計側重，讓設計出來的產品能夠更加貼合品牌本身。

經過剛才的推導和框架設定，我們對眼前要做的產品設計風格、視覺框架已經確定的七七八八，界面的形態也初具雛形了。接下來要做的設計執行階段就是我們設計師的魔法時刻，相信每位設計師都有自己的方式和能力讓我們的產品變得更優美，所以關于這部分的內容暫不在此贅述。

通過以上章節我們了解到，只有從品牌自身出發，設計出來的產品才能在每一個方面都延續品牌基因、展現出設計的整體性。一方面滿足品牌價值需求為品牌發聲，另一方面將用戶的所聞、所見、所感打造成一個特別的情感反應，讓用戶更長久的忠于我們的品牌。

不過，如果我們想要創造出能深化品牌基因的產品，我們在用戶方面也要投入和品牌方面同樣多的關注。因為不僅要看產品的外觀界面，還要看產品給用戶的感覺、使用方式和效果。比如用戶因為什么才被你的產品吸引，用戶會從中得到什么，你的產品能帶給用戶什么感受，用戶如何才能為你的產品發生實際行動，等等。正因為我們所做的一切，都應該對品牌產生支撐作用。所以不僅僅是品牌能夠識別和定義我們的產品，用戶的認知體驗也應該成為我們設計考量的一部分。究竟怎樣做，才能讓我們的設計能夠有效的影響用戶、讓用戶為我們的品牌買單呢？

文章來源：優設

卡片式設計對于我們來說并不陌生，從設計類網站上或市場上的一些 APP 中也會看到很多的卡片式設計的案例，卡片式設計也是 UI 設計中最常用的方式之一。

最近在新項目的設計中也嘗試使用了卡片式設計，結合實際項目中的一些思考進行總結并歸納出一些卡片式設計的小知識點。同時希望通過本次的總結進行知識沉淀，以及跟大家一起探討下卡片式設計。

來源于日常

在現實生活中的卡片式設計可以說是無處不在，例如身份證、交通卡、銀行卡、名片、便利貼、撲克牌、游戲卡……諸如此類的生活常見品都是以卡片的方式存在，其共同點都使用一個容器承載著內容，并且具有「便攜性、信息簡潔和相對獨立性」。

UI設計中卡片的使用場景

在項目設計之初我分析了一些使用卡片設計的 App，并且從中整理總結了幾個較為常見的卡片式設計的使用場景。

1. Feed流

卡片式的 feed 流設計是一種非常常見的設計，早在前幾年 Facebook、Google+ 等產品就使用了這一方式，Feed 流作為一種長內容的媒介，用戶需要長時間的滑動看內容并篩選有效信息，卡片式設計很好的解決了內容與內容的區塊分隔，讓用戶在長屏幕滑動中依舊可以很好的明確識別每一塊的內容。

實際案例-淘寶微淘

2. 瀑布流設計

瀑布流的出現讓單屏區域內顯示更多的內容，而內容較多的情況下，使用卡片式設計可以較好的對內容進行了區域劃分，讓上下左右的內容從整體中具有相對獨立性。

實際案例-Pinterest

3. 左右滑動組合型內容

卡片式設計具有較強的層次感，相比于平鋪更能呈現內容可滑動的感受，并且塊狀化的設計讓內容具有較高的區域分割感。

實際案例-QQ音樂

4. Tips提醒

作為非界面固定內容，卡片式設計可以讓 tips 提醒設計變得更自由，在符合用戶體驗的基礎上，它可以出現在任何我們想要它出現的位置。

實際案例-淘票票會員提醒

5. 結合手勢的單塊可互動內容

若頁面中有且只有一個主內容，并且需要用戶進行快速篩選時，可考慮這種結合卡片式設計與手勢設計的方式。大大增強了用戶對于設計的體驗感知和豐富視覺表現。

實際案例-探探首頁

6. 卡券類設計

卡券類的設計實際上是一種物化映射的過程，我們在現實中看到的卡券造型，結合卡片式的擬物化設計，讓用戶在屏幕上可以更直觀的感知，提升了設計的代入感。

實際案例-京東領券中心

7. 集合型功能入口

集合型功能入口往往會有多個入口，使用卡片式設計讓入口形成一個區域整體，可以做到既統一又相對獨立。

實際案例-淘寶微淘關注賬號

8. 個人主頁頂部內容卡片

個人主頁的設計往往會在氛圍上營造沉浸感，卡片式的設計可以把關鍵信息進行概括收歸，讓原本單個的內容形成一個整體。

實際案例-美團外賣會員

規則探討

基礎的卡片設計規則，相信大家在一些系統級別的設計指導規范中也或多或少都能了解到，不同平臺的規范差異其實不會有太多本質性的區別，更多的是處理技巧或方式的差異，而每個設計師對其理解的角度也會具有一些差異化，這里分享下我對于卡片式設計的一些基礎想法。

1.卡片的質感打磨

同樣的卡片設計，不同的人做出來的感受可能會有所差別，而表達卡片質感的主要關鍵點在于：卡片形體、投影深度、卡片顏色對比，我們需要了解這些基礎知識點之后，再結合實際的 APP 風格進行設計。

卡片形體

就像圖標的圖形設計一樣，不一樣的形體也能表達出不一樣的氣質，因此在設計的時候我們需要依據整體的風格進行表達。異形卡片的設計，可以讓原有方方正正的卡片表達出差異化，從造型上打破一些傳統的處理方式，再結合一些 IP 人物元素可以更加直觀的表達出具體的內容氛圍。

投影深度

投影的視覺效果，會直接影響整體卡片的質感，太深太大的投影會顯得整體卡片過于厚重，太淺太小的投影則顯得過度生硬，因此合理的數值比例可以讓卡片看起來自然有質感。在項目中我常用的一組數值規律是 1:2 或 1:3，例如 Y 軸偏移 10px，模糊度則設定為 20 或 30px，這樣成比例的數值出來的效果會較為自然，如下圖：

卡片顏色對比

卡片與背景的顏色對比會影響這卡片的整體質感，在設計時我們需要把握好卡片與底色的對比，不同的明暗對比出來的質感也會有差異。這里有兩點建議：

• 卡片色與背景色不宜太過接近或使用同一顏色，因為會影響卡片整體的空間質感或使得卡片的邊緣銳度下降；
• 深色背景上，盡量讓卡片與背景色在同一色系或者明度不要差異太大，避免過于突兀。

2. 邊距的設定

在使用卡片式設計時，經常會糾結邊距的設定，寬邊還是窄邊？多少像素更為合適？我經常會帶著這種疑問去設計。

基于內容的簡單規則

卡片式設計作為設計的表現形式，最終是為了承載內容，因此邊距的寬窄也需要依賴于實際內容的判斷。結合我在項目中的嘗試分享以下幾點：

多窄少寬

卡片內容較多是使用窄邊距，讓卡片具有足夠的空間來展現內容，內容較少則可以考慮采用寬邊距來打造整體的視覺空間感，如下圖 app store 和淘寶的設計對比。當然這只是一個建議，實際還得具體問題具體分析。

再如一些瀑布流、宮格、橫滑模塊較多的 APP 設計亦是如此，在內容較多的情況下會把邊距壓縮到最小的合理間距。

內外成比例

以最外邊為基礎值往里設計，間距以固定比例進行縮減，雖然沒有刪格來得規范，但也可以讓設計變得有跡可循。

基于刪格

刪格系統解決了一些基礎的板式問題，有助于提升設計的規范性，讓設計更加有跡可循。在設定卡片式的邊距時可以適當應用刪格系統，讓邊距與內容形成固定的關系，這樣可以幫助整體的卡片設計更加具有細節和規則。

4.卡片的標題設定

標題的設定主要考慮以下幾點：1.是在卡片內還是卡片外；2.標題的字號設定多少更合適；3.標題是否加粗？

卡片內或外的對比

在項目設計中讓我較為糾結的是：標題應該在卡片內還是卡片外？通過了一些案例的嘗試之后，我總結了一個規則（需要依據內容的形態而進行設計）：當卡片內容是獨立的模塊或模塊中只有一個大標題時可設定在卡片內；當卡片內容是以組合呈現或者具有延續性內容時設定在卡片外，形成最外層的主標題。

標題的字號設定

標題主要作用為 2 點：1.簡短說明每個模塊的內容；2.讓用戶在長頁面瀏覽中起到引導、定位的作用。

通過一些嘗試發現：1.當內容較少時，并不需要太大的字號即可起到標題的作用；2.當內容較多時，較小的標題字號則容易被沉入內容中，讓用戶在瀏覽的過程中難以發現，而導致信息獲取缺失；3.建議標題與正文字號大小差異在 6-10px，這樣可以更好的拉開差異，讓標題更具有標題感。

字體是否加粗

常規思維下我們都會對標題進行加粗，我在實際中的經驗得到的總結是：需要看手機系統或不同廠商的機型。我在項目之初都對標題進行了加粗，但后續在跟進還原時看到的效果并不理想，特別是 Android 的機型上，因為我們使用的是系統默認字體，android 系統很多字體并未對系統進行優化，而是使用微軟雅黑，微軟雅黑在android 系統上再加粗，就會顯得整個系統的外輪廓特別粗糙，最后我們依據不同的機型進行了差異化的選擇。

4. 圓角的規則

圓角的設定實際上沒有太多的原則問題，只要符合整體的風格調性即可。當然不同的圓角也能表達出不同的質感，大圓角表達柔和、小圓角表達硬朗。

圓角的規則設定

以卡片的圓角作為基礎的參考值往內推算整體的圓角使用規范，卡片與卡內的元素形成合理的比例規則，而非隨意根據「經驗」進行設定。

圓角大小差異對比

大小的差異化呈現出不同的視覺感受和風格差異，我們在設計時更多需要考慮我們設計的產品風格或氣質是適合大圓角還是小圓角，而非依據一些設計網站上的流行趨勢。因此基于不同的風格或者實際內容場景下進行設定才更為合理。

5. 寬窄間距對比

卡片式設計相比拉通式設計更需要考慮設計中的透氣感。在常規情況下，對內容邊距及四周邊距進行調整，讓內容之間具有較好的空間呼吸感，從而讓設計得到留白的效果。如下圖對比案例，在基礎刪格不變的情況下，每個間距都在原有基礎上擴大了12px（接近 1.33 倍），從而讓內容具有較為舒適的寬度進行閱讀

優點分析

選擇某一種設計方式的重點在于我們了解這種方式的優點，并且可以把這些優點融合到我們的設計當中。在項目設計中，我總結了幾點卡片式設計的優點。

1. 優化模塊化，提升內容區域感

模塊化的設計也是我們日常中會應用到的方法，結合卡片式的設計可以讓模塊化的規則變得更加簡單，增加了模塊之間的可復用性和延展性。而當內容較多的情況下，使用卡片式設計可以有效直接的形成區域分隔，從視覺感知上就對內容進行了分隔，提升用戶獲取信息的效率。

2. 提升內容獨立性

在組合型的內容設計上，使用卡片式設計可以讓每個小塊內容呈現相對獨立的展現特性，結合模塊化的設計，可以在一大片關聯的內容中，做到既統一又相對獨立。

3. 增強視覺空間感

卡片式的設計可以提升整體設計層次感，通過投影、前后顏色的設定，讓內容與背景之間產生視覺空間感。

4. 增強視覺表現力

在設計中我們可以對卡片進行異形設計，用來達到我們想要的風格表現。當然在一個頁面內盡量不要太多，盡量使用頁面中的首個卡片進行差異化處理，讓整體表現出一點不同即可。

5. 增強可點性

卡片式設計產生的空間感，讓每個模塊更加突出，相比扁平式的處理方式，卡片式從視覺感官上會較為突出，從感官上更具可點擊感知。

缺點及建議

任何一種設計方式都會有其利弊，最終選擇某一種其實不過就是當下最適合而已，而在嘗試中我也總結了幾點卡片式設計存在的一些缺點，當然只是個人的思考而已。

1. 橫向空間利用率降低

卡片式設計的存在左右邊距，因此在有限的屏寬內內容橫向區域相比于拉通式設計有所減少，在內容較多的情況下可以適當調小卡片左右邊距。

2. 避免過多的層級

從整體來說，卡片式的設計本身就是增加了基礎背景的層級表現，其視覺層級相比拉通式更為豐富，因此不建議在卡片上再二次疊加塊狀式設計，避免造成層級復雜。在項目中也會遇到內容層級需要多層級的表現，從中總結了2種方式：

• 利用不拉通分割線；
• 利用淺色背景底色。

3. 不適合長文或內容多的表達

若在設計上使用了卡片式的設計風格，但在一些長文表現的界面建議去除卡片。長文章的頁面更強調閱讀的沉浸感，用戶需要更多的專注于文字，這時候無邊的體驗更適合。

4. 把握好界面的分區，避免過于擁擠的排版

卡片設計具有獨特的視覺空間感，但卡片與卡片之間也會有分隔，因此在設計時更應該對內容進行歸納，避免產生過多的小塊卡片而導致排版過于擁擠、凌亂或者內容不夠寬度展現。

總結

無論是卡片式或者拉通平鋪的方式，其最終的目的都是為了服務于內容，我們在做設計的過程中只是選擇適合于呈現我們內容的一種方式。根據具體的內容情況給出合理/合適的設計判斷才是我們需要不斷提升的關鍵點，切莫流于形式而忽略了內容設計本身的重要性。

文章來源：優設