要讓創意產生粘性，有效而又持久，你必須有目的性提升對用戶的吸引力。如何提升？
「讓創意產生粘性」
這篇文章將梳理《行為設計學中的讓創意更有粘性》中的經驗，思考設計背后的六大原則，目的是要幫你把創意變得更有“粘性”。
這里黏性是針對創意而言的，黏性是指你的創意與觀點能讓人聽懂，能被人記住，并形成持久的影響，關注點在聽懂—記住—影響。而我們平常談到創意，想到的是創意的巧精妙。
那么我將用一句話，開啟我的分享“萬物皆可設計，創意設計也不例外?！?
所謂“黏性”，是指你的創意或觀點能夠讓人聽懂，能被人記住，并形成持久的影響（換言之，他們能夠改變受眾的思想或行為）。
簡單（simplicity）：如何才能找到觀念的根本核心？表達必須簡短且深刻。簡單=核心+精煉，找到創意的核心，并用精煉的話語將它表達出來，那么你的創意將擁有強大的影響力，舉例：王老吉涼茶廣告：怕上火，喝王老吉。
意外（Unexpectedness）：如何才能吸引聽眾注意我們的想法？必須打破人們的期待，違反直覺，利用對方的驚訝來提升警覺度和關注度，激發他人的興趣和好奇。粘性創意最忌諱的是平淡無奇，最基本的吸引力是引起別人的注意力，打破固有思維，最能抓住大家的吸引力，如海底撈各種出乎意料的個性化服務。
具體（Concreteness）：如何才能把自己的觀點表達清楚？必須借用身體行為和感官信息來加以闡釋，因為我們的大腦總是樂于記住具體的事物。實驗得出，人們更擅長于記憶具體化的詞，而不是抽象的，形成一個長期的記憶力，如：香飄飄一年賣出七億杯奶茶，連起來可繞地球兩圈。
可信（Credibility）：如何才能讓別人相信我們的創意？必須具備相應的信用背景。我們必須設法幫助他人親自證實這些構想，也就是觀念世界中的“先試再買”的行事哲學。如現在的老爸測評，先進行專業權威的測評報告，得到消費者的信任，最后進行流量轉化最后形成賣貨的電商渠道。
情感（Emotions）：如何才能讓別人關注我們的創意？必須得讓他人有所感覺。人們更有感覺的往往是人，而不是抽象的事物。很多創意都采用創意本身與情感的聯系，如互聯網大廠都在進行動物的 IP 設定，其實也是通過故事性的包裝增加與消費者情感聯系紐帶。
故事（Stories）：如何才能讓別人依照我們的創意行動？我們可以講故事。故事往往有鼓舞人的力量，我們并不需要創意來激發這些力量。我們只需要準備好生活中每天產生的好東西，通過故事的情節進行吸引粉絲，如快手、抖音很商家都會通過自己的故事情節進行吸引，樹立自己的人設形象。
打造成功觀點的六項檢查表：簡、奇、具、信、情、事。合起來的英文首字母為（SUCCES）。
以上是體驗設計學的一些理論，我們經常會在實際商業項目中思考，如何把商業目標與設計做結合？
我們進行設計時候首先應該關注三點：
設計師針對這三點我們應該怎么提升思考？
1. 了解商業目標
詢問你的產品經理或者運營，從他們那邊了解產品想要達成的商業目的是什么？
2. 設計上的支持
從中思考設計該如何支持商業目的，產生商業價值。
3. 監視市場反饋
關注目標完成后的商業價值指標，理解當初的設計思考是否吻合市場的思路。
市場中有很多好的商業案例都在，如增加用戶（拼多多砍一刀“簡單”）、提高轉化率（網易考拉會員卡片“具體”）
提高客戶貢獻度（iCloud 升級儲存空間，多種選擇“具體”）、留住用戶（刪除軟件后哭泣的形象“情感”）
在這些營銷設計中，他們是如何使用打造成功觀點并且運用體驗設計法則，使用原則后，我們可以通過數據化的監視市場反饋上，如轉化率、點擊率、UV/PV 增長，如果你所在的公司沒有數據怎么辦，其實我們可以做問卷、電話回復、App 評價，微博/公眾號評價獲得反饋。
文章來源：優設 作者：土撥鼠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
B 端設計也是 UI 設計的一種，它的輸出環境只存在于電子屏幕中，所以統一使用 RGB 色彩顯示模式即可。
RGB 即光的三原色，因為每個像素點是由 R 紅色、G 綠色、B 藍色三種顏色的不同色彩強度混合而成。所以 RGB 色的表示可以由 3 個顏色各自使用 0-255 中的數值來呈現，比如：
這是 RGB 色彩最標準的記錄方式，但顯然看起來特別的不直觀，或者說不方便。所以在計算機中，為了方便記錄和調用，使用了一串十六進制的代碼來指代具體的 RGB 色。
理論上，我們只要使用 RGB 模式，隨便你怎么選色，只要記錄 16 進制碼進行復用，你就可以在任何文件、設備中獲得相同的色彩。
但在實際顯示效果上，不同的系統、設備、瀏覽器都有自己的調色板，“解釋” RGB 代碼后給出的色彩就有偏差。比如一樣的中文不同方言、語系、背景的人可能聽出不同的意思，比如牛子，我以為它是類似“晴子”這樣的姓名，至于你們的理解嘛……
相關行業為了避免這樣的問題，提出了 WEB 安全色的概念，即這些色彩在不同的顯示環境下，能實現最接近的色彩效果。
那么安全色都有哪些呢？網上有很多地方都有對應的色卡或者工具幫助我們選色。建議使用 Google 的 MD 色卡，這套色彩最全，使用范圍也最廣的顏色。
我們可以通過下面這個鏈接中的網頁工具，幫助我們快速實現選色和復制色彩代碼的操作。
網站鏈接：https://www.materialpalette.com/colors
當然，設計 B 端界面并不是只能使用安全配色，這只是一種建議，可以盡量確保主色，尤其是輔助色使用安全色，而中性色可以自由定義（下面會提）。
第 2 件事，自然就是講講該怎么配色了。和 C 端設計類似，我們主要的目標就是在項目設計過程中定義出 主色、輔助色、中性色 三種色彩類型，并把它們應用到合理的位置中去。
只是，針對 C 端來講，B 端的配色更功能化，更理性，也更簡單。我們要學習 B 端配色首先要排除那些花里胡哨的案例，比如下圖這種。
過度花哨的顏色會干擾我們對界面的實用和對信息的識別、檢索效率，除非是一些政績工程用來當 “花瓶” 的數據大屏，否則我們首先要排除顏色過度應用的選項。
那么什么主色、輔助色、中性色，我們先簡單做個說明。
主色，即你這套產品中的品牌色彩，是整套項目最核心，重要性最高的顏色。主色的選擇通常和你的品牌相關聯，比如騰訊云的藍色，阿里云的橙色，七麥的綠色。
輔助色，則是用來在系統中進行強調、標識、區分的彩色系統。品牌或者 C 端設計可能會通過輔助色和主色搭配實現個性化的配色方案，但是在 B 端是沒有這種訴求的。輔助色應用的目的性更強，是完全貼合操作效率來制定的。
比如下方是國外流行框架 StarBootstrap Admin 中使用的輔助色，它們都有對應的功能寓意場景。
中性色，則是這套系統中色彩使用的相關灰色，因為灰色是沒有色相、冷暖的區別，所以我們也稱它們為中性色。主要應用在文字、背景、分割線等基礎元素中。
B 端的配色，即了解這三個色彩類型以后，能正確制定合理的顏色，并應用進項目中去。下面，我們分別對每個類別進行簡單的講解。
1. 主色的應用規則
B 端的主色也就是產品的品牌色，多數 B 端項目中，主色不需要 B 端設計師自己選，在項目開始前就會有相關的品牌色、LOGO，直接復制色號即可。
和 C 端配色最大的不同是，品牌色在這里很多時候只是 “吉祥物”，它的存在用來宣示品牌本身的存在，但并不是任何情況下都直接參與界面色彩的填充。
假設品牌色是紫色、熒光黃、暗棕色之類的，那么這類顏色本身的內涵、寓意是難以滿足功能需求的，我們要盡可能減少它們的出現面積、頻次。
在 B 端設計中，主色的應用是最不需要大面積填充的，即使它是常見、耐用的藍色、橙色，主色的填充主要只應用在下面這些類型內容中：
2. 輔助色的應用規則
有了主色，我們就要為項目添加其它色彩了。
B 端彩色的搭配原則只有一個，那就是 —— 能省就省。我們不是設計一個讓用戶發出感嘆的色彩豐富絢麗、細節眾多的視覺平面，而是設計一個用來使用的軟件系統。所以前面舉例的那些花里胡哨的反面案例，就一定要在正式項目中敬而遠之。
用專業術語來說，配色過程要遵守 “奧卡姆剃刀原則”，如無必要，勿增輔色。
而為了滿足功能性需求，可以為 B 端項目添加的輔助色類型其實也非常的有限，按寓意劃分常見的也就以下幾種：
相信看到這里，你們腦海中已經有畫面了。我們會為正確使用綠色、鏈接使用藍色、警示使用紅色等等。這些都是具有普世性的顏色，與用戶的長期經驗吻合，沒有識別的成本。
而如果為了個性而個性，對輔助用色另辟蹊徑，相當于在異國自駕時使用藍燈行棕色停的系統，異國風情是有了，說翻車也就翻車了。
所以，針對 B 端輔助色的使用上，如果自己沒有把握和經驗，可以套用下方我們整理的 RGB 安全色，填充到頁面對應的元素中去：
用谷歌色卡各選 3 個同類色出來，并進行標記
3. 中性色的應用規則
B 端的輔助色找起來不難，難的是中性色的使用和搭配上。
任何完整的 B 端的項目，同一個界面中都包含了多個模塊、層級，以及數之不盡的文本字段。在這么多的內容中，我們要根據模塊、文字的權重，選擇合理的中性色填充。
新手很容易迷失在中性色的配色過程中，往往一套界面做完以后，使用的灰色或黑色透明度數量根本無法統計，非常的混亂。
所以，為了避免這樣的情況，我會建議從開始設計之前就定一套中性色，并將它們添加到設計軟件的色彩畫板中，每次填充中性色的時候直接從這個色板中選擇即可。
那么如何制定這套中性色？首先要理解在電子顯示器中，人眼對偏冷的中性色是耐受的（舒適），所以專業的 B 端項目中，中性色都帶有一定的冷色色相和飽和度，比如下圖是 Element 中性色在拾色器區域的分布，就并不是全灰的。
所以加入冷色是有必要的，同時，我們用 HSB 色彩模式中的 B 值作為中性色灰度的主要量化標準，全黑時 B 值為 0，白色為 100，每個定義出來的灰度都可以用 B 值作為代號，如 B20、B40 等。
我們根據這個標準，定義出 5-8 級的中性色，就可以滿足項目中的大多數場景。
雖然會有一些項目會使用透明度來制定灰度等級，比如黑色的 80%、40% 透明度，但我更建議將透明度使用場景和實際色值定義區分開來，只有在色彩的不同狀態（選中/失效等）下再應用透明度。
有關 B 端配色的部分也就先說到這里，B 端配色遠遠比 C 端更簡單，也更枯燥?？梢允褂玫纳史秶?，套路也更一致。我們要做的，就是將它們合理進行填充。
B 端設計也是 UI 設計的一種，它的輸出環境只存在于電子屏幕中，所以統一使用 RGB 色彩顯示模式即可。
RGB 即光的三原色，因為每個像素點是由 R 紅色、G 綠色、B 藍色三種顏色的不同色彩強度混合而成。所以 RGB 色的表示可以由 3 個顏色各自使用 0-255 中的數值來呈現，比如：
這是 RGB 色彩最標準的記錄方式，但顯然看起來特別的不直觀，或者說不方便。所以在計算機中，為了方便記錄和調用，使用了一串十六進制的代碼來指代具體的 RGB 色。
理論上，我們只要使用 RGB 模式，隨便你怎么選色，只要記錄 16 進制碼進行復用，你就可以在任何文件、設備中獲得相同的色彩。
但在實際顯示效果上，不同的系統、設備、瀏覽器都有自己的調色板，“解釋” RGB 代碼后給出的色彩就有偏差。比如一樣的中文不同方言、語系、背景的人可能聽出不同的意思，比如牛子，我以為它是類似“晴子”這樣的姓名，至于你們的理解嘛……
相關行業為了避免這樣的問題，提出了 WEB 安全色的概念，即這些色彩在不同的顯示環境下，能實現最接近的色彩效果。
那么安全色都有哪些呢？網上有很多地方都有對應的色卡或者工具幫助我們選色。建議使用 Google 的 MD 色卡，這套色彩最全，使用范圍也最廣的顏色。
我們可以通過下面這個鏈接中的網頁工具，幫助我們快速實現選色和復制色彩代碼的操作。
網站鏈接：https://www.materialpalette.com/colors
當然，設計 B 端界面并不是只能使用安全配色，這只是一種建議，可以盡量確保主色，尤其是輔助色使用安全色，而中性色可以自由定義（下面會提）。
第 2 件事，自然就是講講該怎么配色了。和 C 端設計類似，我們主要的目標就是在項目設計過程中定義出 主色、輔助色、中性色 三種色彩類型，并把它們應用到合理的位置中去。
只是，針對 C 端來講，B 端的配色更功能化，更理性，也更簡單。我們要學習 B 端配色首先要排除那些花里胡哨的案例，比如下圖這種。
過度花哨的顏色會干擾我們對界面的實用和對信息的識別、檢索效率，除非是一些政績工程用來當 “花瓶” 的數據大屏，否則我們首先要排除顏色過度應用的選項。
那么什么主色、輔助色、中性色，我們先簡單做個說明。
主色，即你這套產品中的品牌色彩，是整套項目最核心，重要性最高的顏色。主色的選擇通常和你的品牌相關聯，比如騰訊云的藍色，阿里云的橙色，七麥的綠色。
輔助色，則是用來在系統中進行強調、標識、區分的彩色系統。品牌或者 C 端設計可能會通過輔助色和主色搭配實現個性化的配色方案，但是在 B 端是沒有這種訴求的。輔助色應用的目的性更強，是完全貼合操作效率來制定的。
比如下方是國外流行框架 StarBootstrap Admin 中使用的輔助色，它們都有對應的功能寓意場景。
中性色，則是這套系統中色彩使用的相關灰色，因為灰色是沒有色相、冷暖的區別，所以我們也稱它們為中性色。主要應用在文字、背景、分割線等基礎元素中。
B 端的配色，即了解這三個色彩類型以后，能正確制定合理的顏色，并應用進項目中去。下面，我們分別對每個類別進行簡單的講解。
1. 主色的應用規則
B 端的主色也就是產品的品牌色，多數 B 端項目中，主色不需要 B 端設計師自己選，在項目開始前就會有相關的品牌色、LOGO，直接復制色號即可。
和 C 端配色最大的不同是，品牌色在這里很多時候只是 “吉祥物”，它的存在用來宣示品牌本身的存在，但并不是任何情況下都直接參與界面色彩的填充。
假設品牌色是紫色、熒光黃、暗棕色之類的，那么這類顏色本身的內涵、寓意是難以滿足功能需求的，我們要盡可能減少它們的出現面積、頻次。
在 B 端設計中，主色的應用是最不需要大面積填充的，即使它是常見、耐用的藍色、橙色，主色的填充主要只應用在下面這些類型內容中：
2. 輔助色的應用規則
有了主色，我們就要為項目添加其它色彩了。
B 端彩色的搭配原則只有一個，那就是 —— 能省就省。我們不是設計一個讓用戶發出感嘆的色彩豐富絢麗、細節眾多的視覺平面，而是設計一個用來使用的軟件系統。所以前面舉例的那些花里胡哨的反面案例，就一定要在正式項目中敬而遠之。
用專業術語來說，配色過程要遵守 “奧卡姆剃刀原則”，如無必要，勿增輔色。
而為了滿足功能性需求，可以為 B 端項目添加的輔助色類型其實也非常的有限，按寓意劃分常見的也就以下幾種：
相信看到這里，你們腦海中已經有畫面了。我們會為正確使用綠色、鏈接使用藍色、警示使用紅色等等。這些都是具有普世性的顏色，與用戶的長期經驗吻合，沒有識別的成本。
而如果為了個性而個性，對輔助用色另辟蹊徑，相當于在異國自駕時使用藍燈行棕色停的系統，異國風情是有了，說翻車也就翻車了。
所以，針對 B 端輔助色的使用上，如果自己沒有把握和經驗，可以套用下方我們整理的 RGB 安全色，填充到頁面對應的元素中去：
用谷歌色卡各選 3 個同類色出來，并進行標記
3. 中性色的應用規則
B 端的輔助色找起來不難，難的是中性色的使用和搭配上。
任何完整的 B 端的項目，同一個界面中都包含了多個模塊、層級，以及數之不盡的文本字段。在這么多的內容中，我們要根據模塊、文字的權重，選擇合理的中性色填充。
新手很容易迷失在中性色的配色過程中，往往一套界面做完以后，使用的灰色或黑色透明度數量根本無法統計，非常的混亂。
所以，為了避免這樣的情況，我會建議從開始設計之前就定一套中性色，并將它們添加到設計軟件的色彩畫板中，每次填充中性色的時候直接從這個色板中選擇即可。
那么如何制定這套中性色？首先要理解在電子顯示器中，人眼對偏冷的中性色是耐受的（舒適），所以專業的 B 端項目中，中性色都帶有一定的冷色色相和飽和度，比如下圖是 Element 中性色在拾色器區域的分布，就并不是全灰的。
所以加入冷色是有必要的，同時，我們用 HSB 色彩模式中的 B 值作為中性色灰度的主要量化標準，全黑時 B 值為 0，白色為 100，每個定義出來的灰度都可以用 B 值作為代號，如 B20、B40 等。
我們根據這個標準，定義出 5-8 級的中性色，就可以滿足項目中的大多數場景。
雖然會有一些項目會使用透明度來制定灰度等級，比如黑色的 80%、40% 透明度，但我更建議將透明度使用場景和實際色值定義區分開來，只有在色彩的不同狀態（選中/失效等）下再應用透明度。
有關 B 端配色的部分也就先說到這里，B 端配色遠遠比 C 端更簡單，也更枯燥。可以使用的色彩范圍更小，套路也更一致。我們要做的，就是將它們合理進行填充。
文章來源：站酷 作者：百度MEUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
大家是不是時常困惑于，B 端的表單設計體現不出高級感？設計發揮的空間特別的少？
那是你沒用對發力點~
B 端：設計表單頁面時，一方面須尊重用戶的習慣，不要在不必要的地方體現差別?？偨Y了 4 個思考問題：
案例：以創建公眾號消息自動推送為例
另一方面要考慮信息層次。
搞定了基本要素后，我們開始考慮如何表現信息層次。
在了解什么封裝度和信息密度前，我先跟大家討論一下。什么是表單之間的關系。
我所認為表單之間的關系分為 3 種：
優點：
平鋪所有需要填寫的信息，適合內容項較少、內容項無法按照相關性分組的表單
缺點：
使用場景：
當需要完成一個簡單快速的任務，輸入少量信息即可完成創建
優點：
用于復雜任務時，拆解任務進行編排，適當的任務分割，可以降低用戶出錯率
缺點：
使用場景：
適用于大型、復雜任務
優點：
減少不必要（非重要）的輸入項，能適當的減輕用戶認知負擔
缺點：
使用場景：
特殊場景下使用
那么用一條完整的鏈路來表達就是：
了解完表單的結構關系知曉利弊后，那么應用在我們實際的場景中表達就是如圖所示：
封裝密度高且信息密度低
△ 圖中案例，僅做示例說明
將一個復雜的任務表單，進行封裝后，看起來任務量是不是也變少了？操作起來也不是很復雜了？
小結：
分析了解表單的結構關系，判斷表單，尋找共性的內容，將他們封裝為一個卡片，也可以封裝成一個組。主要的目的就是減少用戶認知負擔，提升操作/使用效率。
關于使用何種布局方式的判斷，應從信息的復雜度和關聯性兩個維度去梳理。根據信息的復雜度和相關性模型，選用相應的信息呈現方式，選用合理的布局方案來承載詳情頁的內容。
1. 信息的復雜度和相關性模型
△ 來源：Ant Design；來源鏈接： https://ant.design/docs/spec/research-form-cn
2. 區隔方式
根據各個信息之間的相關性，判斷各個信息模塊之間的親密度，通常情況下，相關性強的內容盡量靠近，相關性弱的的內容盡量拉開層次。
△ 來源：Ant Design；來源鏈接： https://ant.design/docs/spec/detail-page-cn
3. 注意事項
文章來源：優設網 作者：交互思維
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在 C 端設計中，不管是給車載客戶端、手機客戶端、電腦客戶端設計界面，都有比較具體的規范需要我們學習和遵守。
而唯獨 B 端設計，或者說網頁設計，我們在網上是找不到具體詳細的規范資料的。因為無論是螞蟻的 AntDesign 還是 Element、Clarity 等 B 端設計系統，其規范都只是針對自己這套產品的設計說明。
當我們不使用這些框架，要完成自定義設計，那么新人就完全不知道該怎么下手。所以，今天這篇內容，就是針對 B 端設計所需具備了解的基本規范進行說明。
幫助大家快速了解和掌握 B 端設計所需的規范知識。
B 端設計是 UI 類設計中的一個大類，它包含了非常多種面向企業、商業的客戶端類型，包括電腦、手機、平板、大屏等等，針對不同客戶端和系統，基礎規范都有一定的差異。本文主要集中在 WEB 端的管理界面設計。
WEB 管理界面雖然看起來和一般的網頁差別很大，但說到底，它也是網頁的一種，它遵循網頁設計的基本原則。我們對規范的解釋以網頁基礎規范為框架展開，并會加入一部分 B 端特有的設計元素規范說明。
主要包含的規范內容包含下面這些模塊：
規范的解釋，會涉及到不少網頁前端制作的知識點，建議立志在 B 端進行深耕的設計師，都要掌握 HTML + CSS 這些前端知識。
我們過去做過這個系列的詳解，可以通過下方的鏈接查看：
還要聲明一點，規范中總結的內容，包含 “規則” 和 “建議” 兩種類型，規則指的是瀏覽器、代碼等限制產生的硬性規范，而建議則是我根據自己經驗整理出來便于大家理解的內容。
在自己的項目中，如果出現 “建議” 無法適應的情況，那么完全可以根據實際場景來做決策，不需要拘泥于我給出的數值和限制。
下面，就開始進入正題吧！
首先，我們來解析一下 B 端布局的規范，即界面排版應該遵守的基本原則。
在前端 HTML CSS 的知識中，需要定義不同 DIV（或其它標簽）的長寬數值，并將這些大小不一的矩形進行排列、移動、嵌套，來實現界面的視覺樣式。
換句話說，所有置入畫面中的元素都包含一個矩形的外邊框，無論是文字、圖標、圖片、按鈕、標簽還是符號。
所以，在界面的布局中，無論我們使用什么樣的內容、字段，對于前端的頁面來講都只是無數矩形的排列過程。我稱這種布局的設計思路為 “矩陣布局法”。
矩陣布局法是設計方式和前端開發方式的統一，提升開發階段實現設計稿的效率和準確性，是每一個專業 B 端設計師都需要具備的素養。
在此基礎上，我們還有幾個統一的原則需要遵守：
1. 數值使用標準
在 UI 領域中，元素尺寸的定義不像平面設計大多以比例或“感覺”來制定，更多是使用手動輸入數值的方法來完成。
主流的系統、規范都會建議我們通過網格化參考工具來輔助我們進行布局設計，比如 Android MD 系統使用的 8*8 網格系統（常用電腦分辨率可以完美支持）。
也就是說，在這個系統中，元素的外邊框、間距，都是以 8 的倍數來設置的。這樣無論我們在設計還是在開發過程中，對于使用的數值都會有相應的默契。
但是，以 8 的倍數為基準的設計，跨越的幅度有點太大了，比如一個圖標，當你覺得 16px 小的時候，那下一檔 24px 頁可能太大了。所以，我的建議是對于相對比較復雜的項目來說，使用小一級的 4*4 網格來設計，會更兼顧靈活度和數值的統一性。
即設置元素的尺寸、間距的時候，我們都用 4 的倍數來完成，當你覺得元素的長或寬不合適，就對它進行 4px 的增減，比如下面的案例：
要警惕的是，4px 的基準，是針對元素視圖邊框的值，文字字號、圖標柵格等次級內容，并不會受到該原則的影響。且該原則只是一個設計基準的 “建議”，而不是限制，在特殊場景中可以選擇打破它。
2. 固定和響應尺寸
使用 4 的倍數完成設計，并不能解決 B 端設計中的所有尺寸問題。因為在 B 端的實際應用中，我們會加入響應式的邏輯，即頁面元素尺寸隨瀏覽器窗口的變動而變動。
所以，在設計 B 端界面元素的時候，我們要考慮兩種場景，固定尺寸和響應尺寸。
固定尺寸即不管環境發生什么變化，它的大小是定死的。比如圖標、標題、LOGO 等元素。而響應尺寸，則是一個 “未知數”，是需要一定的計算規則 “求得” 的。
比如還是搜索欄的案例，搜索框響應尺寸，而搜索按鈕是固定尺寸，那么在不同的寬度下面，它們顯示的效果如下：
要理解響應式尺寸對應規則，除了了解 CSS 中 Width:auto 屬性值的使用外，最簡單的就是搞清楚 UI 設計軟件中的響應式布局功能。
元素是響應還是固定尺寸是我們在設計過程中就做后決定的，而不是等設計做完以后再看圖說話。所以了解固定和響應尺寸的內容，在我們定義組件的過程中就要通過軟件的響應式功能進行設置，并需要在后期的標注和文檔中進行說明。
3. 常用的界面布局
最后，就是 B 端界面設計使用的主流布局形式了。雖然網頁因為畫布比手機大得多，設計的靈活性更高，但在 B 端中可以應用的布局形式也不多，只有固定的幾種。因為 B 端頁面布局中有幾個常用需要預留的坑位：導航、標題欄、工具欄、內容區域。
主要使用左右或上下布局兩個方向：
左右布局的形式，通常是左側作為導航區域，頂部作為工具欄使用。這種做法通常是因為系統內模塊較多，需要的導航數也多，用戶需要經常切換到不同模塊中去，所以左右分欄的布局可以很好的提升操作效率。
而上下布局中，則是面向一些處理場景、功能比較簡單的平臺，導航模塊少，且切換的頻率不高，主要的操作都集中在內容區域的設置上，沒有邊欄的影響還能提高操作的專注性和效率。
要使用哪種類型的布局，需要根據當前的項目功能做決定。但即使選擇了其中一類，也并不代表我們的工作就結束了，還需要在這個布局的框架下做進一步的規劃。
比如，我們需要制定內容區域多欄設計的比例劃分、復雜表單填寫系統中的內容引導欄、列表條目展開的側邊欄形式等等……
每套項目都需要先確定頁面的布局框架，然后再開始針對具體頁面、業務內容進行設計，保證整套系統操作方式的一致性。
文章來源：優設網 作者：超人的電話亭
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著項目的不斷發展，設計團隊在不斷壯大，設計師之間的協作也越來越多，相應的溝通和協作成本在不斷增加。如何才能更高效的合作，并把設計質量和一致性做的更好，是我們需要去解決的問題。
本文將以 QQ 動漫設計系統為例，分享一些過程中的思考和經驗，拋磚引玉，希望對大家有所幫助。
在項目初期，團隊設計師的協作方式是通過一個本地的 sketch 規范文件，以復制粘貼的方式來復用一些元素和控件。在設計師協作人數不多，UI 控件改動頻繁的情況下，這套流程可以比較快速的完成需求。
但隨著項目逐漸成熟，協作設計師人數變多、UI 控件逐漸趨于穩定且需要復用的地方逐漸變多時，之前流程的不足就逐漸凸顯出來。
1. 更新通知缺乏自動化
文件更新難以做到及時有效的通知到所有設計師，且需要人工在群里發通知，告知大家更新了文件。有些設計師暫時可能沒有相應的設計需求，可能會忽略更新后的文件，造成設計的不同步?；蛘叩鹊叫枰臅r候才去群里找更新的規范文件，版本容易搞錯且費時費力。
2. 全局組件更新困難
由于組件樣式是通過復制或修改的方式應用到界面設計中，當規范文件更新時，無法智能的自動更新修改相應的組件，需要設計師人工核對哪些地方有修改。這樣很難保證大家的設計版本都能得到統一的更新，當大家使用的組件版本不一致時，輸出的界面就會出現雜亂無章的情況。
3. 代碼復用率低
開發沒法全局調用代碼樣式，有些樣式可能需要反復復制使用，耗時費力，并因此產生的代碼臃腫，還會直接影響產品性能。
鑒于設計師目前多使用 sketch+xshow 的工作流程，而 xshow 正好也具備云端管理的能力，故決定以 xshow 作為橋梁，建立一個基于 sketch+xshow 的云端設計組件庫，以非常低的遷移和學習成本完成流程優化。
優化后的流程是把 sketch 本地組件庫通過 xshow 上傳至云端服務器，設計師通過 xshow 云端功能添加到 sketch 中，并在設計文件中嵌入這些云端組件。
這樣做能很好的解決上面說的問題：
1. 更新通知自動化
更新文件不用再靠人工在群里發通知，設計師也不需要去找文件，而是在 sketch 中會自動進行提醒。一旦有更新，會在右上角顯示提醒消息，設計師只需要點擊提醒，下載最新組件文件即可完成更新。
2. 全局組件一鍵更新
當更新組件庫文件后，界面中所有之前使用過云端組件的控件元素都會自動比對更新前后的差異，方便設計師判斷是否更新。這種更新最厲害的地方在于，更新是全局的，也就是一旦你確認了更新后的內容，所有界面都會自動按規范進行更新而無需設計師再逐個篩查。這樣做既能保證設計稿的一致性，也能大幅提高設計效率。
3. 開發效率和質量大幅提升
開發通過代碼把一些常用的樣式進行封裝，在一些高度復用的場景中直接調用。一方面可以通過調用的形式減少重復樣式代碼的復制，精簡代碼，降低軟件包體積，另一方面也可以減少不必要的工作量還能方便后期維護。
想要高效解決問題，正確的方法很關鍵，這里我們用到的方法就是原子設計理論。2013 年前端工程師 Brad Forst 將此理論思想運用在界面設計中，形成一套設計系統，包含 5 個層次：原子、分子、組織、模板、頁面，這套理論為組件庫的搭建提供了思路和方法。
在實際搭建過程中，因為組件庫的搭建工作量往往比較大，需要先明確流程和分工，主要包括以下幾個關鍵步驟：
1. 明確工具流程
因為是搭建云端組件庫，所以首先需要有一個云端工具進行管理。針對以 sketch 為基礎的云端組件庫來說，常用的工具流程包括 sketch cloud，各類云同步盤，第三方云數據庫自主部署等等。我們選擇的 sketch+xshow 工作流也是基于 xshow 具備云端管理功能，與其他流程本質上是一樣的，大家根據項目實際情況合理選擇就好。
2. 全面匯總并分類
按原子理論由小到大來對常規控件進行匯總并分類。對于 QQ 動漫項目來說，常見的控件類別包括：顏色、字體、圖標、按鈕、導航、狀態欄、彈窗、列表、標簽等等。每個項目所需要整理的組件不盡相同，原則就是對要復用的元素進行整理。
3. 制作樣式模板
為了便于維護和提升合作效率，將組件庫拆分為幾個不同的獨立文件，每一個文件由組件庫搭建小組成員獨立負責，減少混亂。
如果是有多位設計師參與時，因為組件庫的元素存在相互調用的情況，會遇到到底誰先做的問題。解決流程分 2 步：
QQ 動漫組件庫一共分了 5 個不同文件，分別是：基礎、操作、導航、反饋和內容。
4. 搭建本地組件庫
1?? 確定命名邏輯
提升設計效率，是組件庫存在的重要目標之一，而合理的組件命名起到了至關重要的作用。組件的名稱要保證通用性，太獨立的命名可能不夠兼容其他場景，也會讓使用的同學產生誤解。
對于組件命名，要多與使用的設計師一起探討，因為每個人的習慣都不同，方不方便因人而異，所以需要做一些平衡。
比如在做圖標命名邏輯的時候，糾結于要先按尺寸分（圖標/序號類別/尺寸/圖標名），還是按功能分（圖標 / 序號類別/尺寸/圖標名/狀態），不斷調整多次，這時候就需要找大家一起探討，怎么才是最方便的。
命名的方法是盡可能按共用屬性由多到少的順序來整理。比如，圖標共用的尺寸屬性多，就把尺寸歸到上層；如果圖標功能分類比較集中，那就把功能名稱歸到上層。根據實際項目和設計師使用情況的不同，會有不同的命名形式，命名確保效率就好。
在梳理組件庫結構命名時，先用思維導圖描繪一份結構化地圖，方便前期討論及調整。明確層級關系后，用在多人合作時進行參照，從而統一組件庫層級。在做這份結構化地圖時，需要列好全部分類、層級、具體名稱及示例。
2?? 顏色
顏色庫的設計，需要將產品中可復用的顏色匯總并分組，比如品牌顏色，按鈕顏色，圖標顏色，裝飾顏色等等，這樣可以使得用到顏色屬性的組件更加靈活。顏色的命名規范是：序號_功能/淺色 or 深色/序號 _ 屬性 / 序號 _ 狀態。例如，04 _ 按鈕色/淺色/01 _ 常規按鈕/04 _不可點
3?? 字體
字體樣式需要做全字重、顏色和左中右三種對齊方式，因為按目前 sketch 的組件邏輯，還不能修改嵌套字體的屬性。這些屬性可以對應到組件的命名上，字體組件的命名規范是：大小/序號對齊方式/屬性/用途，例如 42px/1 居左/常規/主文本。
邊做邊檢查。由于文字組件需要的命名特別多，很容易出錯，所以建議是最好每做一組，就檢查一遍。檢查的時候打開組件樣式，如果在組件預覽中發現重復或者結構不對的地方，及時調整。
多行文本行高要注意。文字的行高要尤其注意，一定要在前期檢查好尤其是多行文本的行高。如果行高前期設置不對的話，非常影響后面文本的擴展性，在用到多行文本時會遇到麻煩。想回頭修改的話，因為是最底層的原子需要逐個調整，所以代價是巨大的。
所以一定要開始設置字體組件之前就確定好行高，比如 QQ 動漫組件庫中的文字行高統一用文字大小的 1.5 倍，并取偶數作為文本的行高。當然，這里的行高也不是完全規定死，有時候也需要視情況而定。
文本的粗細。文字的粗細也是要在一開始的時候就要設置周全，最好是給所有字號的文字都設置好不同粗細的組件，盡管可能開始用不到，但會提升文字的擴展性，不然后面添加就會比較麻煩。
4?? 圖標
圖標組件最關鍵的地方在于使用邏輯和圖標規范。比如，我現在做的圖標邏輯是：圖標/類別/使用場景/具體名稱/尺寸/不同狀態，主要是按使用的頻次來整理的。也可以有其他邏輯方式，以方便使用為準。
圖標規范也會影響組件庫的整理和日常使用，在做圖標組件時，需要定義好圖標的最大范圍和最小范圍，嵌套起來使用才不會出錯。圖標的規范要嚴謹，同一個尺寸下的圖標視覺面積要保持一致。不然在大小這個層級就會出現，雖然是相同尺寸的圖標切圖范圍，但圖標的體量看起來卻并不一致。
將純色或漸變圖標中的顏色剝離，并使用顏色組件進行嵌套，這樣做既方便替換又能減少圖標組件庫的復雜度。
對于圖標的多種狀態，建議做在同一個層級中方便選擇。
對于圖標來說，直接對畫板設置切片即可，不需要再加切片框。如果你的組件庫之前用了很多切片來導出圖標，可以用 Automate 插件直接清理或設置全局的切片，非常方便。
5?? 控件
有了顏色、字體、圖標這些基礎元素后再來制作組件就會相對簡單很多，只需要通過拼裝把通用性強的組件做出來即可。這里可能需要注意設置好布局方式，讓內容盒子隨著內容的變化而變化。新版 sketch 的布局設置相對于老版本的確實會方便很多，理解起來很容易，所以這就不多討論了。
6?? 代碼組件化
在開發側進行前端 UI 組件庫的封裝，實現從設計到開發的樣式統一，提升效率和質量。
在優先級上，代碼組件化跟 UI 組件化可以同步進行，開發先寫好框架，然后隨著 UI 組件化的逐步確定，代碼也進行相應補充。
5. 構建云端組件庫
本地組件庫構建完成后，即可通過 xshow 上傳至云端，再由 xshow 直接添加到本地 sketch 中，完成整個使用流程的搭建。
6. 權限與維護
為了更好的維護云端組件庫，避免更新混亂，需要成立組件庫小組，只允許組件庫小組成員有編輯權限。日常需求中，如有新增組件，需提交給組件庫小組成員審核，通過后方可上傳至云端組件庫。
在制作組件文件的過程中，需遵循先自測后上傳的原則，避免在上傳后發現一些諸如命名錯誤、遺漏、嵌套混亂等問題，造成麻煩。
7. 編寫規范文檔
文檔的作用是給相關同事查閱，形成標準化使用流程。一些在組件庫中難體現的設計說明、未形成組件元素的使用規則或一些常見問題都可以寫在文檔里。
8. 問題與技巧
1??善用插件，提高效率
我其實是一個非常喜歡“偷懶”的人，但凡需要重復，批量的工作，我都覺得應該有更聰明的辦法。這里我推薦幾個我在做組件庫中經常用到的小插件。
2??不斷測試
組件庫的設計過程中，一定要邊做邊測試，尤其是在前期確立邏輯的時候，要不斷檢測是否真的好用。
3??內容更新權限與維護需要專人專辦
舉例：假設我負責字體，那么后續所有的字體更新相關都只找我來修改。若其他人在組件庫內找不到相應的組件搭建頁面而又特別高頻使用，需要向組件庫小組提出申請，并由對應組件庫管理員進行更新，不可以私自修改組件庫內容并上傳。
組件化思維不僅僅應用在 UI 領域，甚至在各行各業都需要建立組件化，比如對于一些時效性非常強的新聞產品，就需要針對突發事件內容模板化，以期能第一時間發布；如果想追熱點，組件化能夠使得產品具備隨時跟進熱點的能力，提升市場競爭力等等。
組件化是一種思維模式，也是如今設計師必不可少的能力。通過組件庫提升效率能夠讓設計和開發有更多的時間去打磨產品細節，從而打造出對用戶更加友好的產品，賦能設計的價值。
文章來源：優設網 作者：騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
國內互聯網近幾年發展迅速，在很多方面都超過了一些其他國家互聯網的發展階段。隨著國內互聯網產品競爭日趨激烈，很多企業都把目光投向了用戶量龐大的海外市場。而疫情對于全球經濟的影響更是加速了海外市場的數字化進程。據 Sensor Tower 數據顯示，2020年Q1全球移動互聯網應用下載量達336億次，同比增長了20.3%。
產品出海的第一道屏障就是語言。但若想打造一款能夠適應海外市場的產品，只完成不同語種的翻譯是遠遠不夠的。在產品設計的過程中，我們需要考慮兩個方面：國際化與本土化。
國際化+本地化的策略，也就是“glocal—global+local”，指的是結合國際統一和地區差異。這種策略在統一的前提下，通過靈活配置保障地區的個性化體驗，既能滿足統一維護提升產品效率，也能保障當地用戶的特殊訴求，是一種性價比很高的設計方案。
產品設計的國際化
產品的國際化，即全球化。國際化的通用設計能夠為產品打造一個全球統一的形象與內核。
Chrome的不同地區首頁功能與樣式基本一致
一套通用的設計系統和設計規范，既可以幫助我們在產品的國際化設計中 樹立產品調性，又可以保證操作的 一致性，同時提升設計的 高效性。阿里旗下面向東南亞市場的購物平臺Lazada在開發之初，通過使用Fusion Design的設計系統，大大節省了設計的時間。在如此復雜的電商業務場景之下，整套產品的設計最終僅3靠個設計師就完成了。
設計系統對產品研發成本的影響
除此之外，一致的內核也能夠幫助企業在全球范圍內建立起統一的品牌形象，增強 品牌的識別度與知名度。
產品設計的本土化
想要讓產品在某一個市場上站穩腳跟，對于本土化的思考是必不可少的。本土化的核心是 因地制宜，根據地區差異相應調整產品策略。
UC瀏覽器在不同地區的首頁布局
為什么說本土化對于產品的出海非常重要？其原因并不難理解。Charles Eames說過，“Recognizing the need is the primary condition for design.” 任何設計的本質都脫離不開對需求和問題本身的理解。好的設計是在對需求、動機、心理、環境等相關因素有了充分了解之后所產出的解決方案。
針對海外設計研究的思維框架
在考慮產品的本土化時，我們需要關注到用戶的需求是什么、是否仍然成立，用戶的行為模式是什么樣的，以及整個外在社會物質、精神環境等方面的狀況。螞蟻金服團隊通過海外本土化設計實踐，總結出了一套“環境-人-需求“的研究框架，列出了可以去調研的多個方面。
螞蟻金服-“環境-人-需求”出海產品設計研究框架（做了小部分修改）
需求（價值）
首先，我們要做的第一步判斷就是原來的 用戶需求是否成立。產品在原市場想要解決的問題，是否在新的市場仍然存在，即我們的產品是否 有用？這個問題的答案決定了原先的產品是否對于該市場的用戶是有 價值的。如果有價值，那么就可以深入探索如何讓用戶用起來；如果沒有價值，那么就需要進一步判斷是否要繼續開拓這個市場，以及如果繼續開拓這個市場，在原有的產品形態上，我們能否通過改造的手段讓它符合在新市場的用戶群中挖掘出來的、不一樣的 新價值？達到了“有用”的標準，我們則需要開始考慮“ 好用”的問題。只有滿足“好用”這一條件，產品才能夠被用戶用起來、從而真正在新市場落地。在實現“好用”的過程中，我們可以關注以下幾個層面的影響因素：
生活形態、價值觀
生活環境與社會環境會塑造當地用戶的生活形態與習慣。下圖分別是日本和北美地區的新聞資訊類App。同樣是推送新聞資訊，兩者在表現形式上卻大相徑庭?？梢钥闯鋈毡镜男侣凙pp布局緊湊、信息量大、頁面坪效很高；而北美的新聞App則更注重突出重點內容，信息密度相對來說并不高。
日本-新聞資訊類App
北美-新聞資訊類App
這種差異的背后，其實是兩地上班族生活形態的差異。日本城市小、人口密度大，上班族通勤大多會選擇地鐵。而北美地區面積大，大部分人會駕車上班。駕車的人雙手需要長時間控制方向盤，同時開車也需要持續注意路況，只能在間隙中查看新聞內容；而乘坐地鐵的人雙手更加自由，也有較長的通勤時間需要消磨，故可以接受更多的信息，也能夠接受更繁瑣的操作。
北美（左）和日本（右）各自的生活形態
有時候，某個地區的用戶長期習慣的操作模式，會與主流的操作模式有所差異。設計師junu在個人博客中講述了他為Melon（一個韓國主流音樂播放器）進行體驗優化的一段經歷。他發現Melon當時的播放操作邏輯比較冗長，用戶需要先點選列表中的多首樂曲，再點擊底下的播放鍵，此時Melon會將用戶所選歌曲自動生成一個列表并進行播放。這和當時Spotify等音樂播放器“點擊即播放”的主流交互邏輯相比，要更復雜和麻煩，尤其是在用戶只是想要立即聽到某一首歌曲的時候。因此，junu 提議引入“點擊=播放”的操作方式。但當他們設計出了這樣的優化方案后，卻發現在測試過程中老用戶們對這樣的交互方式感到陌生和沮喪。基于用戶反饋，最終，他們采取了一個折中的方案，既保留了原先的復選框作為多選操作的區域，讓用戶仍然能夠選擇樂曲生成列表并且播放；同時又引入了點擊單曲直接播放的操作。相比第一版優化方案，用戶的接受程度有了明顯提升。
Melon播放器的點選操作邏輯
設備環境
10年前，高端大屏幕手機在東南亞和非洲市場普及率并不高，因此產品出海時需要考慮當地常見的設備是什么，并作出相應的適配。近幾年，隨著市場經濟的發展以及中國手機的成功出海，即使是東南亞和非州的發展中國家，高端移動設備的普及率也已經很高，這為設計師在考慮通用性的過程中減輕了不少負擔。不過，在為每個地區的用戶做產品設計時，仍然需要調研清楚當地設備的使用情況，比如什么樣設備更流行、普及率更高；如果某一地區的設備不夠發達，那么設計的操作也需要考慮到設備不同所造成的差異。
業態/監管
在不同的國家或者地區，各個行業的標準與制度也可能存在很大區別。例如財會軟件行業中，在北美和英國占據了重要市場份額的Quickbooks、Xero等公司，卻無法成功打入歐洲一些國家的市場。因為財會軟件本身的功能、流程設計與當地的財務制度是緊密相關的。在這樣的情況下，歐洲本土的企業顯然會對當地的政策和制度更加熟悉，也更容易設計出符合當地企業與會計需求的財會產品。
2015年，Airbnb進入中國市場。在最初的市場調研和用戶調研之后，針對本土化，他們所邁出的第一步就是根據中國的業態環境對產品的前10%和后10%做了改造。其中，產品的前10%指的是登錄這一類用戶開始使用產品所需要進行的步驟，而后10%指的則是支付等用戶完成一個完整流程所需要進行的操作。因為當用戶進入到產品主要鏈路中時，其功能流程基本相通（搜索地點、挑選房間、瀏覽信息等），不需要做過多的改變；但產品的前10%和后10%則決定了用戶能不能把產品用起來并不遇到障礙。因此，針對登錄的部分，愛彼迎將原先的Facebook等第三方登錄替換成了微信與微博賬號的登錄；而在支付的部分，愛彼迎引入了支付寶與微信支付的方式，打破了中國本土用戶進入產品和完成訂單的壁壘。
Airbnb產品中國本土化的“前10%與后10%”策略
社會經濟
社會經濟環境的不同代表著社會階層狀況的不同，它會影響人們在消費時的行為方式。螞蟻金服在調研菲律賓市場時發現，當地擁有銀行賬戶的人口僅占了總人口的34%，同期中國擁有銀行賬戶的人口則占了總人口的85%。而這34%的人基本上都是當地的富人及中產階層。在貧富分化嚴重的菲律賓，大部分普通民眾是沒有銀行賬戶的。這一人口學特征很大程度影響了螞蟻金服電子錢包業務對菲律賓目標用戶的描繪，繼而影響了產品各個層面的設計。
文化/宗教
在各個文化/宗教里存在著不同的意象，也會有各自的表達方式與禁忌等等。在某個文化下表示友好的行為，在另一種文化下可能是一種冒犯。這些都是在設計時需要去注意的。除此之外，在不同的文化/宗教語境下，人們會有不同的行為模式與價值取向，這里我們會引入一個模型——霍夫斯泰德文化維度模式，來對這一問題進行更詳細的解讀。
霍夫斯泰德文化維度模式（Hofstede’s Model of Cultural Dimensions）
霍夫斯泰德文化維度模式是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個理論框架。它可以幫助我們對于不同文化群體的價值觀有一個較為全面的了解，從而更明白該文化群體中人們的行為傾向。此理論總結了衡量各文化價值觀的六個維度：
使用他們官方網站（https://www.hofstede-insights.com/）上的 Culture Comparison Tool，可以查詢到各個國家的文化維度指數，也可以選擇不同的國家進行對比。
在為特定地區的用戶設計產品時，我們可以以從這些維度去解讀他們的行為傾向，并據此提出相應的解決方案或者設計方案。滴滴團隊在開拓墨西哥市場時，根據墨西哥的文化維度指數在產品的本土化上制定了從功能到外觀等不同層面上的設計策略。
墨西哥地區的文化特征指數
滴滴墨西哥的本土化設計策略
這類源于文化差異的設計差異并不少見。在淘寶等國內的電商平臺上，“按照銷量排序”是一個被高頻使用的功能，消費者們認為什么產品買的人多，什么產品就更好。這樣的觀念也催生了一大批店家刷單的行為。但當在北美的電商平臺亞馬遜上，我們會發現并沒有按銷量排序這個選項。因為美國的用戶相對來說個人主義更強、更相信自己的判斷和選擇，他們不認為他人推薦的就一定是好的。
國內外電商平臺對比
在企業即時通訊工具行業，國內的主流產品，如企業微信、釘釘等，都選擇了藍色這一比較沉穩的顏色作為主色調，在產品功能的形態上也偏向于嚴肅。而海外的辦公產品Slack，視覺色彩更加豐富；整體的產品定位也更加活潑歡樂，常常會有“不嚴肅”的表達，比如在界面多處都使用了emoji。這樣的產品形態差異，其背后是兩種文化在放縱（享樂）/克制（嚴肅）這一維度上的差異。
企業微信與slack的產品風格對比
內容本土化
除了功能框架上的設計需要考慮本土化外，產品中運營內容的本土化也是不可輕視的一環。Spotify Design 團隊在《 Designing for Belonging: Why Image Localization Matters 》一文中，記錄了他們對于內容本地化的一些經驗和思考。同樣，內容的翻譯僅僅是本土化的第一步。在地區之間區別不大時，完成內容的翻譯便能夠滿足其他地區的需求。如下圖中 “浴室歌單（ Songs to sing in the shower）”的播放列表，列表上的文案一經翻譯，就能夠推送給德國、波蘭、以色列、意大利等一眾國家的用戶。但當內容的閱讀群體有著更顯著的差異時，僅僅翻譯是不夠的。在看到這張圖片的時候，其他人種比如亞洲人可能就不會產生很強的代入感，也會缺少對產品的一種歸屬感（這個產品并不是為”我“設計的）。
Spotify "Songs to sing in the shower" 歌單
下圖展示的是Spotify另一個歌單—— “快樂時光（ Happy Hits)" 的封面在不同國家的呈現形式?？梢钥吹剑鎸ξ幕町惛蟮娜后w時，Spotify在保持了統一的樣式風格的基礎上，針對每一個國家和地區都展示了當地人在他們的生活中“快樂”的樣子。這種本地化內容更加貼近當地用戶，也能夠讓用戶產生更強的連結感與共感。
Spotify "Happy Hits" 歌單
結語
回到那句話 —— ”Recognizing the need is the primary condition for design.“ 產品的出海其實只是我們在設計中會遇到的一種場景，在這個特定場景下我們的設計思考與其他場景下是互通的。如果僅僅完成了翻譯這一步，那我們就忽視了在新市場下另一群用戶的特征、需求、使用情景、操作習慣等關鍵信息。無論是不是在為產品的出海而設計，我們始終應該保持對用戶的好奇，讓最終的設計實現我們期望達成的目標。
文章來源：UI中國 作者：酷家樂用戶體驗設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文字，是最常見的動效對象之一。我們可以通過對透明度、位置或者角度的改變，制作出豐富的動態效果。但你可能不知道的是，AE內置了超多的文字預設，只需用鼠標點擊幾下，就可以完成復雜絲滑的文字動效。
在AE的窗口中打開“效果和預設”面板，所有和文字有關的效果都在動畫預設中的Text文件夾內，共十七種動效類型
將動效預設拖動到對象上，即可應用動效。
十七種類型分別為：3D文字動效、入場動效、離場動效、模糊動效、曲線動效、表達式動效、填充與描邊動效、圖形動效、亮度與透明度動效、機械化動效、多樣化動效、多行文案動效、擬態化動效、路徑動效、旋轉動效、縮放動效以及字間距動效。
有些效果可以相互疊加組合，理論上我們能做出成百上千種不同的效果。
文章來源：UI中國 作者：設計師深海
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前陣子回老家的時候，在老人家里看到這樣一個機器，這個機器的功能主要為家庭教育、視頻通話與監控等等。
如果這幾個主要功能入口屏幕占比能更大些、界面中的菜單導航層級能再簡化些...也不至于連我自己想找到一個能跟親人通話的入口都比較困難，更別說老人了。
當然了，這個機器最后只被家里的老人當成，一個只會定點報時的“擺設”。
除了把字號放大，適老化設計還需要做什么？以下分享京東直播在適老化設計上的幾點探索。
強化對比——看清信息
直到近幾年才知道，家里的長輩喜歡發微信語音，其實是因為老花眼打字不方便。
在適老化設計中，需要注意界面中的信息與背景的對比度，是否足以讓老年人清楚識別，這涉及到對色域跨度的調整。
我們通過 H（色相）S（飽和度）B（明度）的數值來劃分色域。如下圖，在統一H值的情況下，規定了10個標準的S、B值，從而形成一個色帶。所以我們在前后景的顏色選擇上，需要滿足跨度至少為5 ，才能讓老齡用戶清晰地識別到前景信息。
比如在京東直播的老年版界面中，不僅加深了原標準版中的淺灰色文字信息，同時對一些暗文設計也進行了調整，如搜索框暗文“點擊搜索主播名/商品”等內容，提升暗文明度以確保與其背景間的色域跨度大于5。
所以在適老化設計中，需要讓界面中的信息與其背景間的色域跨度至少為5，才能足以讓老年人看清信息。
傳達共識——看懂內容
90前的人想要表示“打電話”，會用手比出6的姿勢貼在耳邊；而現在的00后，會用手掌當作手機的樣子貼在耳邊來表示…
在讓老年人能夠看清界面中的信息之后，我們的設計還需要有更清晰的表意信息，讓他們能夠看懂。其中的關鍵在于，這些信息是否能夠“傳達共識”。
無法傳達共識的設計，就像00后的小孩突然擺出用手掌貼在耳邊的姿勢，家里的老人看了可能也無法領會到，這表示的是“打電話”的意思。
在設計中想要”傳達共識”，需要盡量避免圖形icon的單獨出現，用純文字或圖+文的形式表達。不過除了給圖標加上文字，其實我們在圖標本身的設計上也可以進行適當調整。
比如同樣表達“話費充值”，是用手機還是座機，哪個更能讓那個年代的長輩理解？哪些事物是那個年代慣用的，哪些事物是在那之后才誕生的？哪些是我們日常生活中就存在的東西，哪些又是專屬于互聯網世界的產物呢？
所以在適老化設計中，除了幫界面里的所有圖標加上文字以外，在圖標的設計上也可以結合年代、群體環境的因素，讓圖形表現的是老齡年代慣用的、日常生活中固有的內容，讓老年人也能輕松領會到，這表示的是什么。
聯系認知——找到點擊區
就算沒使用過手機的人，在生活中看到凸起的事物也會忍不住按一按；但如果他們看到的是一個圓圈，就不太可能有這種反應了。
在適老化界面中，需要代入更多能夠聯系生活經驗的認知錨點，幫助老年人順利在界面中找到點擊區域。其實不妨回想一下，即使是現在熟練使用手機的我們，也是從當時iOS4的擬物化界面，開始慢慢地培養心智，才能到如今就算看到一個線框、甚至只有純文字，也能輕松分辨出哪里是可點擊的按鈕。
而當下的老人，也正像當時一開始接觸智能手機的我們，需要在界面中找到與自己生活經驗的對照，才能利用熟悉的事物作為認知錨點，幫助自己理解聯系上一些陌生的概念。
比如將界面中可點擊的區域強化投影或高光，幫助老人們聯系起生活中對凹凸的認知試著去點一點。除此之外，我們還需要把一些會對點擊認知產生干擾的內容進行弱化。
比如在標準版的京東直播中，存在像紅包雨、獎券這種運營標簽，其樣式看起來與按鈕很像，但實際為不可點區域，所以在老年版界面中弱化了這些標簽，將他們與所在的列表內容作為一個整體背景，讓視覺重心聚焦在可點擊的按鈕上。
所以在適老化設計中，除了需要對可點擊區域強化投影以聯系認知，也需要將一些不可點擊的干擾項進行弱化，保證視覺重心最終落在可點擊區域上。
行為指引——完成點擊
美國新澤西北部一家電影院做了一個潛意識實驗：在電影中每隔5秒就插入0.03秒的字幕，寫著“吃爆米花”和“喝可樂”，雖然人的肉眼無法捕捉到0.03秒出現的事物但它們可以堆積成潛意識，隨后當天影院的可樂銷量增加15%，而爆米花則增加了58%。
在適老化設計中，我們還可以運用潛意識作為界面中的隱形向導，幫助老年人順利完成目標行為。
比如在按鈕的文案中包含行為動作、結果去向的內容，像“點擊領券”中的“點擊”——對當下需要完成的動作描述，“領券”——動作完成后的結果去向，讓每個一眼晃過的引導效果堆積，成為界面中的隱形向導，幫助老年人了解如何完成操作。
像在京東直播的老年版界面中，也同樣設計了這些隱形向導。比如在列表上加入“點擊進入直播間”的按鈕，引導老年人順利了解到“我當下可以進行點擊”以及“我點擊后可以進入直播間”的信息。
除了對按鈕文案的調整，我們還可以為一些非明確的可點擊區域加上行為指引。比如在主播力薦中，每個商品圖片都可點擊看對應的主播講解，因此為每個商品加上帶明確行為意圖的點擊按鈕，避免讓人以為這只是一些展示圖而并不知道這其實都是可以點擊的。
所以在適老化設計中，可以在按鈕文案中加入行為動作、結果去向的內容，同時對一些非明確的可點擊區域加上行為按鈕，發揮潛意識的隱形引導作用，幫助老年人順利地完成目標行為。
以上僅展示階段性成果，設計方式、設計理念等，我們的探索遠沒有結束，期待下一次分享中與你們的交流。
文章來源：站酷 作者：SDL藝術實驗室
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問?？萍佳杆侔l展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
如果這幾個主要功能入口屏幕占比能更大些、界面中的菜單導航層級能再簡化些...也不至于連我自己想找到一個能跟親人通話的入口都比較困難，更別說老人了。
接下來為大家分享精美的app UI設計案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
--手機appUI設計--
藍藍設計的小編 http://www.syprn.cn