表格和網格一直是產品和后臺面板的重要UI組件。然而，即使到了今天，也很容易找出設計不當或用戶體驗不好的數據表。

今天我們邀請了 Gil Bouhnick ，來跟大家一起聊一聊「如何設計出一個可觀的數據表」。

接下來，就進入正題吧～

我使用過 30 多種 SaaS 工具和 SDK ，經常用它們的后臺面板看數據，觀察到了一些問題并做了反饋。實話說，它們在UI設計和基本功能上，對表格的展現形式還挺糟糕的（雖然它們都是很好的Saas產品）。

鑒于我開發(fā)使用表格 20 年的經驗，決定為大家來總結一下最基本的處理表格的UI / UX規(guī)則了。

本文將從功能、UI設計和美觀性，這三個方面來闡述。

數據表設計之功能

1.從排序和篩選開始： 

是的，我也知道排序和篩選很煩人，我也討厭他們，但必須先說它們。除非你打算做一個不到十條記錄或者類似情況的精美表格。

排序和篩選不僅是可用性或易用性的功能，更是摘要數據的關鍵：了解趨勢，比較記錄，查找特定值，沒有排序和篩選就無法完成這些工作。

如果添加基于列的篩選（如日期，布爾值，字符串等元數據）成本太高，那么可以從更基本的內容開始篩選，例如現代搜索框或一些常用的硬編碼。

2.確保列的大小可調整

這是一種查看信息的方法，無需深入研究每條記錄。

不管你的列寬有多大，也不要將列表固定住，因為有時候用戶需要進一步擴展。

3.允許列重新排序 

對于大型表格，不能一種大小適用于所有情況。

通過重新排序列，用戶可以設置符合它們特定需求的表格。這個相對小的功能可以減少混亂，并節(jié)省一些來回滾動。

這時，列的名稱體現了大量信息。重新排序列能夠使用戶可以專注于特定區(qū)域并理解小塊信息。

4.內聯(lián)的編輯

有許多用于編輯單元格的UI解決方案：內聯(lián)框，彈出窗口，可擴展節(jié)等。

我不認為上面的方案是最佳的，因為它依賴于功能、數據類型、使用案例。從用戶角度出發(fā)，我最喜歡的方案是側視圖（快速視圖）。

一旦選擇一個項目，它就會從側面彈出的方法。

這個方案，我最喜歡的是它可以保持上下文（與彈出窗口不同），易于使用，即使是在垂直滾動視圖中顯示大量字段的情況下也效果良好。

數據表設計之交互設計

5.小屏幕設計

當然，大顯示器看表格，設計和開發(fā)都會很爽，但是還是有人在用筆記本電腦或iPad！他們又做錯了什么！/手動狗頭

不停的滾動、縮小的列、隱藏的文本，這些都會干擾用戶體驗，所以一定要在小屏幕上驗證你的設計，并且盡可能使用上一段時間去切實體驗用戶使用情況（而不是隨意測試）。

如果確實很糟糕，你可能需要在解決問題上發(fā)揮自主創(chuàng)造力，不過前提是你很了解它。

6.彩色交替行 

使用大型數據表時，很容易丟失。

斑馬紋的表格可以幫助用戶保持其位置，但是彩色的行必須非常淺，否則會引起誤導，看起來像選定的行。

使用淺色時，應該將所有內容設置為淺灰色，避免使用黑色線條和深色邊框。

7.使用固定表頭和“凍結”列錨定一些標識符

我認為在任何屏幕上顯示大量數據時，表格都應該能正常瀏覽。

要瀏覽數據，用戶就需要經常滾動，這意味著需要一些錨點來輔助：

• 向下滾動時，列標題必須固定（這是最基本的）

• 第一列應該被鎖定（MS Excel和Google Sheets稱其為“凍結”），因為，當你水平滾動時，需要該行聯(lián)系上下文。 

• 一個全行選擇選項，用于在水平滾動時標記重要行。

8.設置固定的行高

表格和網格是體現結構化信息的，但是，當表格的列寬、行高不同時，就會變得混亂，信息也就會變得沒有體系。

因此，為了整體的可用性和美觀性，我覺得不管內容如何，所有行都應具有完全相同的高度。

為了更好地支持多行文本塊，請考慮以下事項：

• 用換行替換為空格，并將整個文本變成一行（通過調整列寬的大?。?/span>

• 將（所有行的）行高設置為2行而不是1行（可以解決某些情況）

• 使用工具提示（可以用，但是最好不要用）

• 通過單擊行來展開/折疊（剛需）

• 采用浮動側視圖顯示所選行的詳細信息。

數據表設計之UI

美學設計可以帶來更好的使用感。

以下是通過簡單的UI設計修改來消除雜亂并提高內容可讀性的幾種方法：

9.增加單元格填充 

使用空格。

加載信息的表，正是用戶想要看到更多空白的地方，即使這會花費他們一些額外的滾動時間。         

10.消除不必要的邊框

一旦數據結構良好并且留有空白，就該擺脫那些多余的邊框，或者讓邊框線條變得超細且顏色淺。

文章來源：優(yōu)設網    推薦：墨刀_MockingBot

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

文章來源：站酷 作者：再次微笑_

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。

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

什么是表格？

表格頁是公認為展示數據最為清晰和高效的形式，它的信息密度極高，就像是一個家庭衣柜，里面很多抽屜，我們需要把衣物整潔擺放收納，提高空間利用率。

表格頁由三個部分，如下圖所示：

一、數據查看

數據查看可通過四個維度去自檢設計是否合理，分別為信息降噪、呼吸適中、高效易讀、詳情查看。

1、信息降噪-內容

通過對表頭內容刪減，我們一眼就可以看到表格的重要信息，從而幫助用戶能快速進行數據決策。因此，列數控制在7+-2，列表表頭展示更為關注的數據，更多信息在詳情中展示。

另外，如果不同用戶想看到的信息側重不同，我們還可以做自定義設置項，讓用戶自己去選擇想要看到的表格內容。

用最少字數給表頭做精簡，精簡到少一字不可。

另外，當遇到少一字都不可的長標題，我們可以定義專有名詞，并且給一個解釋專有名詞的icon，便于第一次使用的用戶易于理解。

2、 信息降噪-視覺

去掉不必要的分割線和斑馬紋，用對齊和間距來區(qū)分列和行，可以鼠標滑上去給斑馬紋，增強交互體驗。

分割線的樣式盡量輕盈，不要搶視覺，突出內容。

去掉不必要的裝飾和顏色，為了防止視覺負擔，少用面性圖標，使用顏色保持克制，刪除如果不是點擊即可刪除，可以不用預警色。

不要出現襯線字體，比如宋體，保持字體統(tǒng)一。

3、 呼吸適中-單元格

定義單元格高度。字號、行高、上下間距進行規(guī)范，這里有一個比較常見的規(guī)范，將字號設為N，那文字行高就是

1.5N，上下間距為1.2N，單元格高度=內容高度+上間距+下間距。

4、 呼吸適中-列寬

我們將首列和尾列定義為N1，列與列之間定義為N2，隨著頁面收縮和拉伸，N1保持不變，N2自適應變寬變窄，這樣頁面會看起來會更均衡，這樣會顯得有呼吸感。一般定義一個最小值，當表格寬度大于頁面寬度時候，固定首尾列，左右滑動。

5、 高效易讀-對齊方式

標題和內容一般采用左對齊，更高效的瀏覽順序，有長短不一的數字時，右對齊方便比較。操作項一般放在尾列右對齊。

6、高效易讀-不做無意義留白

當數據為零時就寫上“零”，當沒有數據時候就寫上“-”。比如開發(fā)取不到的后臺數據，我們就可以給“-”作為顯示，如果得到的數據就是零，我們也要讓它顯示出來。

7、高效易讀-選擇合適的翻頁器

選擇合適的翻頁器，利用分頁可以緩解服務器的加載壓力。無限瀏覽如果數據過多很容易使頁面崩掉，使用功能較為強大的翻頁器，每一頁默認10行以上，減少翻頁次數，增強用戶體驗，給出默認行數后，可以讓用戶自定義每頁行數，相比跨屏翻頁，向下滑動更便利。

8、高效易讀-收起低頻操作項

超過四項操作項收起來，可以用圖標指引下一步操作。關于哪些可以操作項可以折疊起來，可以與產品經理溝通收起低頻鏈接，或者埋點一個月時間查看點擊量也可以做出決策。

9、高效易讀-默認行數

當單元格內容長度不固定的時候，定義好內容的寬度和行數以及字數，超出顯示的字數可以用省略號代替。

10、高效易讀-行的排序

默認最近創(chuàng)建的在表格中第一行顯示，使用戶感知最新情況。也可以帶排序的表頭，讓用戶自定義排序。

11、詳情查看-入口

入口可以在操作里加詳情，也可以把發(fā)起人做成可以點擊樣式，跳轉詳情，并且可以避免視覺干擾，也就是降噪，當鼠標Hover上去時候，發(fā)起人才顯示出跳轉色，提示可點擊狀態(tài)。

12、詳情查看-交互方式

第一種是用彈窗的形式。第二種是第一種的延伸，當內容過多時候可以考慮抽屜樣式。這些交互的共同有點就是沒有脫離原頁面。當詳情內容較多且需要編輯時候，我們就考慮跳新頁面，使用新頁面進行承載。(這里有個細節(jié)，新開tab頁可以打開多個詳情頁，如果覆蓋原頁面則只能打開一個詳情頁，并且不能同時查看原頁面和詳情頁。所以我們要根據具體場景、業(yè)務需求去設計)

二、數據過濾

數據過濾由搜索，篩選和標簽頁構成。

1、搜索

搜索可分為模糊搜索和帶標簽的搜索。工作中常用的搜索為模糊搜索，優(yōu)點是只要有相關的內容都會搜索出來，減少了精準搜索帶來的記憶負擔。缺點是容易把不相關的信息也帶出來，例如搜索手機號，把相關編碼也匹配了出來。帶標簽的搜索優(yōu)點是搜索匹配精準度高。缺點是每次只能對單一條件進行搜索，當用戶要搜索的時候都要去切換選擇信息，多了一個步驟。另外，在實際工作中，可以通過埋點或者調研，如果搜索框搜索手機號頻率較大，我們可以把手機號設置為默認選項。

2、篩選

篩選框可以分為下拉篩選和平鋪篩選。下拉篩選的優(yōu)點是空間利用率高，起到了很好的收納作用。缺點是無法直觀看到所有篩選項。平鋪篩選優(yōu)點是操作效率高，篩選項一目了然，支持輸入更多篩選條件，可以自定義輸入。缺點是空間利用率低，不適合選項太多的情況。如果用戶點擊其中一個選項概率最多，我們就可以將點擊率高的一項作為默認項，然后選擇第一種下拉篩選框。如果用戶點擊每個選項概率相等，在空間允許情況下我們可以平鋪出來。

當篩選項過多時，信息排序應是用戶目標優(yōu)于業(yè)務邏輯，即排序應該考慮用戶的使用習慣。例如當用戶查找訂單時候，第一反應都是搜索框輸入，而一般通過價格過濾較少的應該放在末尾。

當然，我們還有更多優(yōu)化空間，當篩選項過多時，我們可以默認折疊低頻篩選項。折疊哪些篩選項還是得基于用戶習慣，可以通過數據埋點或者用戶調研得到用戶使用場景。

當通過數據埋點或者用戶調研發(fā)現絕大多數用戶只需要用到搜索項，那么我們就可以只保留搜索框，其他選項全部折疊到高級搜索里面，當點擊高級搜索時候出現一個彈窗，既可以保留更多篩選內容，又可以使頁面不會看起來很擁擠。

(當彈窗內容選擇完畢時候，高級搜索按鈕會呈現高亮顏色，未選擇更多篩選內容時候則呈現默認態(tài)。）

3、標簽頁

標簽頁是比較常用的數據過濾方式，切換樣式包括基本樣式、卡片樣式以及膠囊樣式。一般和時間、狀態(tài)的流轉有關。

同樣我們可以通過數據埋點或者調研，將用戶最關注的選項設置為默認選項，減少用戶的選擇，提高用戶體驗。例如下圖，用戶更關注的是銷售中的商品，即將到店的客戶，以及即將發(fā)貨的商品，所以我們將這些選項作為默認項。

三、數據操作

數據操作從控制范圍可以分為單行操作、批量操作和全局操作。從操作屬性可以分為新增數據、編輯數據和刪除數據。

當從產品那里拿來一個原型圖堆疊很多操作項，我們就可以根據控制范圍來區(qū)分判斷，從而明確擺放位置。單行操作可以放到表格里，批量操作根據親密性原則放在左上方，這樣可以離打勾矩形近一些，如果有利于用戶操作，也可以放在左下方。全局操作則可以放單獨一行，使得層級更加清晰。

調整后，我們發(fā)覺雖然解決了多個操作放一塊的行為，但是層級還是不夠清晰，我們可以通過割裂板塊或者板塊顏色不同來調整，使得識別性更強。

后記

B端設計強調的是在好用的基礎上讓頁面變好看，所以更考慮用戶體驗。所有設計方式不局限與一種，只要操作上是順手，業(yè)務上是合理的，都是優(yōu)秀的設計。如果一個頁面占據半屏都是篩選項，那么我們就得好好反思，因為所有篩選項不可能都是高頻操作，接下來就需要去做數據埋點并進行頁面優(yōu)化了。另外，一張只有篩選項和表格的頁面，表格數據查看區(qū)域建議占整個頁面的百分之六十到百分之七十，這個時候瀏覽起來是比較舒適的。

文章來源：UI中國    推薦：最多三分糖

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

一個完整的后臺，由菜單/導航、數據/圖形展示、表格、表單、控件/組件以及彈窗等構成，下面跟大家分享后臺中的表格和表單的設計細節(jié)。

當接到一個全新的網頁后臺項目時，首先確定設計風格，然后考慮這個后臺尺寸是做居中固定式，還是全屏響應式。全屏響應式的網頁設計，除非有規(guī)定，否則你可以選擇任意主流尺寸作為基尺寸來設計網頁。當然，不管選擇什么尺寸，都得基于做好一個后臺而開展工作。

如何定義一個后臺是好的？領導說好，用戶說好，你自己也覺得好，那應該就是好的。大部分情況下產品已經定制好了每個功能模塊，UI上只需要對著原型加以美化，如果你是這樣做的，那么做出的東西一定會讓人覺得有問題但是又不知道問題在哪里，總是想讓你改。

跟產品經理好好溝通，他們只是把功能模塊設計出來而已，并沒有設計這些模塊如何呈現，如何操作，如何結合，如何分類等等。交互上在后臺設計很重要，如果有專業(yè)的交互設計師，這些可以交給他們，畢竟，交互設計的收入比UI要高。然而在很多中小企業(yè)，產品原型直接給到設計是很常見的。當缺少專業(yè)的交互設計時，不要讓產品覺得我們只是按照他們的原型做美化，那跟美工有什么區(qū)別，不是看不起美工，美工的全程是美術設計工程師，很高大上的職稱，但是大家還是不太愿意這樣被稱呼吧，可能覺得頭銜套太大壓力會很大吧。事實上，UI本來就應該具備基本的交互技能。

風格選定是很客觀的，需要經過產品經理/領導確認，如果他們很相信你的實力，你得說出足夠充分的理由，為什么要選擇這種風格，而并不只是看起來更高大上或只是個人喜歡。

本人對后臺網頁設計的風格理解，大致可以分為三類：純白背景風，輕淡背景風，深色背景風。在后臺開始設計之前，你最好先選定其中一種風格，因為后面的所有元件的設計，都得基于這個風格來設計。剛剛好，在早些時間就已經發(fā)布了一個后臺的三種風格界面設計的作品，大家可以看出每個模塊的搭配和區(qū)分：

純白背景風：線框/輕淡色（灰）背景（文字一般采用黑色）

輕淡背景風：純白色塊背景（文字一般采用黑色）

深色背景風：帶有透明度的純色背景（文字一般采用白色）

設計過程是很主觀的，所有設計參數都取決于設計師，但是要嚴格按照設計規(guī)范，并且讓所有設計看起來和用起來都是合適的。

全屏響應式+輕淡色背景風是目前很主流的設計，也是很保守和安全的設計。對于輕淡色的HSB色值，可參考：H:0-360；S:0-5；B:90-97，當然沒有絕對大部分情況用的淺灰是最多的，如H0;S0;B93-95。

以下將依據這個設計風格做例子展示。

一個完整的后臺，由菜單/導航、數據/圖形展示、表格、表單、控件/組件以及彈窗等構成，我把這些稱為元件。這里主要分享的是構成后臺中的模塊和元件設計中的細節(jié)。下面重點跟大家分享表格和表單的設計。

你應清楚的是

為了避免在設計后臺時一個人在YY，請保持左跟產品溝通，右跟前端溝通，這點非常重要?；蛟S很多朋友在接到項目的時候不知道從何做起，會在網上尋找一些相關素材，然后會看到很多很炫的風格樣式，像是各種各樣的數據/圖形展示，各種各樣的統(tǒng)計曲線圖，還有各種各樣的展示動效，真想拖到自己要設計的后臺。

如果合適當然可以，然而，很多情況下，統(tǒng)計分析一類的圖表設計，產品已經有很多現成套用的模板，你可以做的很炫，但前端不一定會按照UI效果圖來制作。從技術上來說，沒有前端實現不了的效果，你真的不必懷疑前端的實力。所以，保持設計跟前端的良好溝通，更能提高工作的質量和效率，并且，很多時候口頭/文字描述如何展示，是淡入淡出，還是彈出等等，前端是能理解的。通常地，做動效只是產品的一種展示，而并不是產品的本身，就當自己練手做動畫吧。

簡潔又靈活的表格

一個典型的表格(table)包含標題（表頭單元格th），內容（標準單元格td），通常都是一行行(tr)展示。設計時，應該將標題和內容區(qū)分，比如標題文字加粗/顏色加深/字號加大，或標題背景加深。因選擇淡灰背景風，一般用白色塊區(qū)分的原則，表格設計也盡量不使用線框，然而一行行的標準單元格如果都是白色的就不便于預覽，因此可以隔一行給背景設置比主背景更淡的背景。標題和內容一般有兩種對齊方式，居中對齊，居左對齊，整個站的列表只選擇一種對齊方式保持一致性。為了更簡潔顯示，我們還可以把每一列的間隔線去掉，但并不意味著間隔不存在。每一列的文字都不要貼邊，給前端標記間距（內間距padding）值，告訴前端鼠標點擊表頭單元格的空白地方仍然可以拖動該列的寬度，拖動寬度時保持每一列的最小寬度并且標題仍然完全展示。

我們都遇到過這樣頭痛的問題，當列表字段太多，一屏無法完全展示，這時應該怎么做？給表格設計一個左右滑動的滾動條？如果內容真的太多并且已經確定，這也未嘗不是一種辦法，但是，重新設計過表格的字段或許會更好，這個時候應該跟產品好好溝通了。有以下方法：

• 減少不必要的文字（如下圖中表頭的“全選”去掉）。
• 縮略內容或者用…省略后面內容，鼠標經過出現更多內容（如時間可以縮略后面的時分，鼠標經過出現具體時間）。
• 將不重要的列表隱藏，表頭右邊設計一個>>按鈕，點擊跳到隱藏的列表，點擊以后表頭左邊出現一個<<返回默認表格的狀態(tài)。

因為每個列表的寬度是可以拖動的，我們不能決定其固定的寬度，但每一行的高度可以設置一個值，建議所有元件的高度、寬度、間距的數值參數都設置為偶數。

如果列表的數據很多，一般都會設計page控件，但是也有一些列表會設計點擊加載更多，或者直接滑動滾動條加載更多。另外一種情況更常見，即設計固定高度的列表，一頁最多展示5/10/20…條數據，不管多少條，它的高度都是相對固定的。然而有時候數據太少只有一兩條，這個時候仍然要固定默認最多展示條數的高度，如圖：

那么問題來了，在響應式設計當中，可沒有什么參數是固定的值，一般都是用百分比來設置。因為默認顯示的數據條數在任何寬度的情況下仍然保持不變，因此當列表寬度縮小時，內容出現換行會增加高度而拉高整個列表的高度。值得注意的是，當其中一條數據的內容有出現換行而又有其他數據沒有出現換行的時候，每一行的高度都應該按出現換行的且最高的高度保持一致，并且內容仍然保持垂直居中顯示。另外，當前端做成這種響應式的列表時，一般不再讓鼠標拖動列的寬度了。

同一組數據的不同寬度顯示

當寬度拖到第三種情況，按鈕也出現了換行，那每一行的高度都應該按照這個高度保持一致，即使有一些數據只有一個按鈕/地址并沒有出現換行，如圖：

當然，如果你不想讓內容出現換行，就可以用上面說的那三種方法來實現了。

不要再說為什么別人做的表格那么高大上，明明自己做的效果圖還挺好看，為什么實現出來卻那么丑，當你了解這里面的各種參數和邏輯，并且很好的跟前端溝通，參照以上規(guī)則，不管再復雜的列表都可以做的得心應手并且得以實現。

整齊并帶有交互功能的表單

在后臺設計中，表單出現的頻率并不低于表格，甚至可以說幾乎所有類型的網頁都會出現。比如登錄注冊、信息錄入、搜索、選擇器等等。常見的表單有輸入框、普通按鈕、開關按鈕、單選框、復選框、下拉菜單。

一個輸入框，通常有標簽名稱label、提示信息placeholder（輸入信息后提示文字消失）、初始值value（需手動刪除）。如果是必填表單，在適當位置（標簽的前后，輸入框后）加上紅色*號（或其他符號）。

一些有字數規(guī)定的輸入框，可以增加一個剩余字段提示

事實上，在設計表單之前，我們就要先對表單的標簽進行優(yōu)化，標簽字段盡可能的簡約。每個組的表單，標簽都必須是對齊的，輸入框/選擇框也應是對齊的。當這個組的表單的標簽字數較少并且較對應時，可以采用左對齊的方式，并且最長標簽的名稱離輸入框有margin值。

另一種情況，也是更經常遇到的情況，當一組表單的標簽很多時，某些標簽字段不能更好的簡化，標簽的字段都不對應，這個時候可以采用右對齊的方式，這種方式更靈活。

當一組表單的標簽太多時，請跟產品溝通并對其進行分類。

有些表單是有邏輯/順序的，比如地區(qū)的選擇、出生年月與生肖/星座的對應等等。例如，在選擇省份之前，市區(qū)是不可操作的，在UI上做灰度顯示不可操作。除了灰度代表不可操作，透明度也可以起到同樣作用，這種方式也可以運用在按鈕上。

帶有識別功能的輸入框：

當輸入有誤時，盡量避免彈出框提示，可以直接對輸入框設計不同的狀態(tài)顯示默認狀態(tài)、選中狀態(tài)、錯誤狀態(tài)、成功狀態(tài)。

通過以上方式設計的一組信息錄入型的表單設計，如圖：

表單的設計可以單獨出一篇更詳細的文章，還有篩選/選擇器一類的表單，這里就不一一描述了。

友好舒適的彈窗

彈窗在后臺的出現頻率非常高，其強度一般分為三種，弱彈窗、強彈窗、重彈窗。字面上已經很好理解，輕彈窗，一般鼠標經過的時候即可出現而不用點擊，比如提示說明，顯示更多信息，鼠標移過后立即消失，它不會影響下一層（當前頁面內容）頁面的視覺效果和操作，因此這個彈窗通常會設計一個浮動帶有陰影效果的框。

而強彈窗則是一個對話框，它暗示你必須對這個對話框進行操作后才可以離開，如確認信息、錯誤提示信息。而重彈窗更像是一個新的頁面，比如彈出的列表，詳情，表單等。這兩種彈窗通常是點擊某一個按鈕/經過某一個操作觸發(fā)的。這兩種彈窗一般會對下一層頁面的視覺做蒙版處理，比如加上一定透明的黑色/白色，給下一層頁面的內容做模糊濾鏡等等。

當然，這三種彈窗式可以結合的，針對不同場景使用不同的彈窗設計這點非常重要，這直接關系到用戶體驗效果。你是否可曾遇到過使用一款產品時，動不動就彈窗，并且需要去點某一個按鈕才可以關閉。

任何一種場景在設計上都可以得以解決，什么情況下使用什么彈窗設計，或者有時候必須使用強彈窗，但是又不想讓用戶操作關閉，我們可以設計幾秒后自動關閉，或者點擊彈窗以外的區(qū)域直接關閉。

彈窗還有兩種主要的表現形式，一種是頂部有關閉按鈕，另外一種是直接點擊確認按鈕或者讀秒關閉。在保持規(guī)范性的同時，盡量避免按鈕功能的重復，比如一個提示信息必須讓用戶點擊確認按鈕才可以關閉，那么就使用沒有頂部關閉按鈕的設計。對于重彈窗，一般都會采用頂部有關閉按鈕的設計。

彈窗并不是后臺的專利，它在移動端更高頻率的出現，例如活動頁面的彈窗，趣味性就顯得更重要了。

總結：

這篇文章主要跟大家分享的是，當開始網頁后臺項目設計的時候，保持跟產品和前端的良好溝通。確定風格后開始設計，并分享了3個主要的點：

• 制作靈活又簡潔的表格
• 設計整齊并帶有交互功能的表單
• 選擇友好舒適的彈窗

后臺還有其他元件設計，歡迎大家共同探討。

文章來源：優(yōu)設網    推薦：程遠

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

隨著大數據的興起，數據價值的不斷挖掘，圖表作為數據呈現與分析的有效手段，正扮演著越來越重要的角色。我們在進行 B 端平臺設計時也在思考：如何讓圖表清晰的傳達信息，同時帶來美觀的視覺感受。

為了達到清晰傳達和視覺美觀的目標，我們結合實際項目，進行大量探索及思考，梳理總結了一套適用于 B 端后臺類產品的圖表設計思路及方法，涵蓋了曲線圖、柱狀圖、餅圖、雷達圖、漏斗圖等各類常用圖表類型。

圖表視覺層級

圖表能夠承載大量數據信息，同時視覺元素較多，如果只是憑借設計師的審美喜好進行視覺設計，沒有整體信息讀取考量，可能會導致重要信息未能凸顯，降低用戶讀取效率。

為清晰傳達信息，進一步提升讀取效率，我們采用元素重要程度與視覺強度相綁定的方法。依據元素重要程度，將圖表元素分為三類，分別為“底層元素”、“中層元素”和“頂層元素”，并依據不同視覺強度分別設計三類元素。底層元素最弱，頂層元素最強。通過這種方法，梳理圖表元素的前后關系，能夠清晰把握元素視覺層次，保證信息傳遞效率。

1. 底層元素設計

在各類圖表中，我們把輔助說明數據的軸線、刻度等定義為底層元素。為了減少視覺干擾，最大程度突出主圖形，底層元素全部使用淺灰色進行設計。我們發(fā)現，當元素與背景顏色的明度對比在 1.2:1 時，人眼較難看到元素；當對比度在 2.0:1 時，視覺強度過強，易吸引用戶注意力。通過元素視覺強度的調研及視覺嘗試，最終確定元素與背景對比度在 1.6:1 左右，視覺強度偏弱但人眼能夠看清的程度。以保證元素視覺不突兀，只在需要查看時可以被發(fā)現。

2. 中層元素設計

中層元素的內容包括數據圖形、數據線段等承載主要數據信息的元素，是圖表中表達數據的關鍵元素。與底層元素相比，中層元素采用更低明度與更高飽和度的數據色來表現，使元素從頁面中凸顯出來，保證可讀性。同時在樣式上適當加入漸變、描邊等樣式，豐富視覺層次，帶來美觀的視覺感受。

3. 頂層元素設計

我們把頂層元素定義為圖表高亮信息，內容包括懸停樣式、懸停后的詳細數據說明等。在設計上為保證視覺樣式突出，使用深灰色、強調色等強對比度樣式，并輔以動畫、投影等手法保證明顯的視覺強調效果，保證頂層信息最有效的傳達給用戶。

4. 最終效果

通過層級梳理，并綁定元素重要程度和視覺強度的方法，設計后圖表主次信息均按重要程度進行對應視覺強度的展示，讓用戶能夠在第一時間接收到最重要的信息，提升信息讀取效率。

圖表排版設計

圖表排版是指各元素在圖表中的尺寸及布局等，對于 B 端后臺類產品來說，不同排版對用戶使用體驗造成較大影響。如何建立一套合理的規(guī)范保證用戶的使用體驗？我們經過大量討論推敲，梳理出一套針對 B 端后臺類產品的排版規(guī)則，力求保證用戶圖表的使用體驗。

1. 圖表尺寸

圖表尺寸指圖表整體長寬高。在項目中我們發(fā)現不同尺寸的圖表對數據展現效果影響巨大，例如巨量數據的圖表擠在名片大小的區(qū)域例顯示，這使得信息讀取的效率大打折扣。為此我們收集并提取出“全貌概覽”、“多角度環(huán)視”、“詳情分析”三類典型場景，并制定了“迷你圖”、“中號圖表”、“大號圖表”三類尺寸，針對不同尺寸優(yōu)化圖表的信息展示密度，以達到高效讀取信息的目的。

“迷你圖”尺寸最小，舍棄了 Y 軸等不必要信息，利用小面積展示最關鍵的圖表信息，并控制數據密度，保證信息高效讀取。

“中號圖表”尺寸受限，限制坐標軸刻度數量和數據的密度，例如曲線圖數據點不高于每 4 像素 1 個數據點，Y 軸坐標刻度不超過 5 個，以確保信息密度不過載，這類圖表尺寸通常用在針對某大類內容進行多方面檢視時。

“大號圖表”尺寸最大，不限制數據信息密度，給予最全最詳細的展示，這類尺寸通常用在數據詳情頁等詳細分析場景中。

最后考慮到多圖表混合排列時，餅圖、地圖等大面積填色圖表，相較折線圖等描邊型圖表，視覺感受更加膨脹。我們縮小了填色類圖表的實際高度，保證多種圖表混合排列時，視覺感受的均衡。

2. 坐標軸

坐標軸在圖表中出現的頻率較高，那么坐標軸常見的設計問題有哪些呢？

第一是橫縱坐標軸的刻度出現過密情況。

如果坐標軸所承載的是連續(xù)數據（連續(xù)數據指可量化的，連續(xù)不斷的，在區(qū)間內可任意取值的數據，如時間、金額、人數等），設計師可自行增減刻度數量以保證視覺舒適度。如果承載是離散數據（離散數據指不可量化的，無關聯(lián)的，不可在區(qū)間內任意取值的數據，如分類、軟件版本、省份等），可采取增加坐標軸縮放功能解決。

第二個常見問題是刻度的說明文字過長。

如果是 X 軸（橫軸）文字過長，除了在可控范圍內減少刻度，還可采取文字傾斜 45°~90°的辦法(如文字全部為中文，可用豎排代替傾斜 90°)，緩解信息過密看不清的情況。

如果是 Y 軸（縱軸）文字過長，需聯(lián)合研發(fā)一起調整數據的單位，比如把“元”調整為“百萬元”。

如果不能調整，那就要根據所使用的圖表庫有針對性調整。例如常用的 Echarts 圖表、D3 圖表等開源圖表庫，需要提前預估刻度文字長度并預留出來，否則刻度文字可能會被頁面裁掉而不能完全顯示。如你是用的是 AntV 等可自適應的圖表庫，則不必提前處理，圖表庫會自動按刻度長度進行整體調整。

3. 圖例

圖例作為圖表中不可或缺的部分，在各類圖表庫中位置不盡相同，由于不同圖表樣式差異很大，圖例的位置需整體考慮并適當布局擺放，但在同一產品或頁面內，過于隨意的擺放圖例，會導致頁面統(tǒng)一性較差，同時增加用戶的瀏覽成本。我們團隊所負責的 B 端商業(yè)產品矩陣，作為面向用戶的產品集合，產品間聯(lián)系非常緊密。過于靈活隨意的圖例擺放不利于用戶對于圖表的瀏覽。為解決此問題，我們基于業(yè)務特點，針對 B 端商業(yè)產品矩陣制定了圖例布局指導原則。

我們以提升屏幕信息密度為目標，分析不同場景的頁面排布，制定了頂部和右側兩種較為寬松的指導原則，供設計師在沒有明確的更優(yōu)方案時選用。

當圖表是左右兩端對齊的類型，例如折線圖、柱狀圖時，建議將圖例放置在圖表頂部。這樣能結合標題等其他元素進行統(tǒng)一排布，減少占用空間。當圖表本身左右都有空余空間時，例如餅圖，建議將圖例放置于圖表的右側。也能夠節(jié)省頁面的空間。

數據色板設計

色板作為常見的數據表達手段，能夠利用不同顏色明確體現分類信息、數值高度、狀態(tài)信息等。但目前市面上鮮有專業(yè)用途圖表的配色工具。我們經過大量探索嘗試，梳理總結出圖表色彩的兩個關鍵維度：辨識度與統(tǒng)一性。既需要顏色間突出強烈可清晰辨別，又需要顏色整體能形成統(tǒng)一風格，以達到清晰傳遞和美觀的目標。如何平衡辨識度與統(tǒng)一性，是我們遇到的難題。

1. 辨識度

辨識度在圖表中有兩方面：顏色與頁面底色的辨識度，各顏色之間的辨識度。對于第一種，我們采用控制顏色的明亮程度來確保色彩辨識度，尤其對于黃色、青色等本身較亮的顏色，降低顏色的明度，確保在淺色背景下顏色可辨識。

對于第二種也就是各顏色之間的辨識度，通過實驗發(fā)現單純的顏色色相變化，例如紅色與橙色的區(qū)分，人眼不容易分辨。所以采用了色相變化+明度變化的方法，即深紅色與亮橙色，深藍色與亮紫色等，這樣用戶能在第一眼就明確分辨，保證顏色間的辨識度。最終把顏色映射到色彩空間的三維坐標中，運用歐幾里得距離公式測算顏色間的距離長短，來衡量各顏色間色差數值。顏色間距離越遠代表色差越大，利用數據輔助衡量辨識效果。

2. 統(tǒng)一性

色彩統(tǒng)一性的作用在于確保圖表整體風格一致，色彩搭配舒適，從而帶來美觀、統(tǒng)一的視覺感受。為達目的，我們首先提煉商業(yè)產品設計風格為明亮、強對比，其次把設計風格轉化為色彩數值。經過實驗，把顏色明度限制在 50%-70%，把飽和度限制在 75%-85%，并在區(qū)間內不斷波動。這樣既保證了色彩視覺感受的統(tǒng)一，各顏色間又能夠有清晰的辨識度。

3. 顏色量化與工具

量化顏色，將色彩轉化為數值，利用數值來驗證設計師的「感覺」，能夠保證方案合理性，保證設計質量。但通過嘗試，我們常用的色彩模式均不能科學合理的量化顏色。通過查閱大量資料，我們最終決定以小眾的 HCL 色彩模式來衡量色彩。其中 H 表示色相、C 表示飽和度、L 表示明度。HCL 區(qū)別于傳統(tǒng)的 RGB 或 HSB 模式，它能夠將人眼對顏色的感知精確的量化為數值，例如黃色相比藍色明度更高，都能如實的反饋到數值上。也由于此特性，HCL 模式在誕生距今不到 20 年間，已被一些先鋒設計師用于數據可視化的呈現中。

但是 HCL 作為小眾色彩模式，目前設計軟件鮮有支持，造成了 HCL 色彩不直觀、不方便調色等的問題。為解決此問題，我們已初步完成智能配色程序，只需輸入品牌色，就能自動生成圖表色版，并在風格上與品牌色匹配，達到整體色彩的統(tǒng)一。我們也將一套調配好的色板及 HCL 實用小工具附在文末，幫助大家直觀的查看和使用 HCL 模式顏色。

結語

數據價值就像不為人知的寶藏，隱藏在一條條枯燥晦澀的數據背后。而圖表則是開啟寶藏的鑰匙，是發(fā)掘數據價值的強有力武器。通過對圖表的不斷探索優(yōu)化，我們希望能夠最大化數據的價值。通過圖表，讓數據最直觀的展現；通過圖表，讓其背后的規(guī)律浮出水面被人探知；通過圖表，讓 B 端不再有難懂的數據。

附：色板及 HCL 工具

• HCL 調色 Sketch 插件：https://github.com/petterheterjag/chromatic-sketch
• HCL 顏色生成器：http://medialab.github.io/iwanthue/
• 色彩可用性檢查工具：https://color.review/

文章來源：優(yōu)設網    作者：百度MEUX

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

圖表是數據可視化中最常用的一種表現形式，一定要吃透它。

隨著互聯(lián)網數字化越來越完善，數據可視化這個詞的使用頻率也越來越高，而圖表是數據可視化中最常用的一種表現形式。無論是工作匯報還是后臺設計，都離不開圖表的使用。然而關于圖表類相關的資料太零碎了，不成體系，對于初學者非常不友好，本篇文章我從圖表的祖輩開始，把它都給挖了出來，希望對你有幫助。

什么是圖表

圖表的定義：可直觀展示統(tǒng)計信息的屬性，對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構，是一種很好的將對象屬性數據直觀、形象地可視化的手段。

英文叫法：Chart。

用戶對圖形的敏感程度遠遠大于文字，所以產品就需要把數據信息可視化，用簡單的圖形表示出更多的信息量，而圖表是數據可視化中最常用的表現形式。

接下來我們來介紹圖表的具體構成及元素解析。

圖表的構成

圖表是由：標題、圖例、刻度軸、數據展示、網格線、提示信息、水位線、時間軸組成，每一個元素都有它存在的意義。在實際使用中不一定非得把元素全部展示出來，精簡化顯示想要展示的內容即可。

圖表元素解析

1. 標題

顧名思義，標題就是圖表的名字，標題是必不可少的元素。標題的內容一定要言簡意賅，不要太長，能兩個字寫清楚絕對不用三個字。

標題的常用位置有 3 個：左上角、頂部居中、底部居中。

一般情況下，標題字號 / 色值要突出一些，用戶第一眼看到 chart 的時候，要清晰的看到這個圖表是做什么的。

特殊情況下，如果需要對標題有額外解釋的話，兩種展現形式：

• 增加提示圖標；
• 增加提示語。

2. 圖例

圖例的組成

顏色、名稱、數值、單位。

圖例的展現形式

圓形、開關、矩形、鼓包線、實線、虛線。

圖例的位置

從左至右、從上至下。

圖例的作用

• 標識出每個顏色所代表的的類別；
• 開啟 / 隱藏數據顯示；
• 圖例顯示的數值一般為當前值。

圖例的顏色選擇

同一組圖例中，不要出現相近的顏色，否則在圖表顯示中分不清彼此。

產品使用中，要規(guī)范圖例顏色使用，一般分為兩種：

• 常用的圖例顏色（顏色本身代表著行業(yè)中的某種含義），此類顏色需要是固定色值，無論哪個 chart 中，都是這個顏色；
• 無特殊含義的圖例，可以規(guī)范出一個圖例顏色的使用順序表。那些無特殊含義的 chart 可以按順序使用圖例顏色，圖例整齊劃一。

圖例過多時如何展示

• 如果圖例可整合前提下，展示主要圖例 / top n 圖例，其他的圖例做整合，增加個詳情頁來展示完整的；
• 如果圖例不可整合/省略，則需要給出足夠的展示空間。

共用圖例

如果多個 chart 的圖例一樣，可進行合并，減少冗余圖例。

圖例省略

如果 chart 中只有一個圖例的話，可省略。

圖例名稱限制

根據不同使用場景，為了更好的展示效果，要給圖例名稱設置一個最大值，超過最大值后省略展示。

3. 坐標軸

坐標軸分為 X 軸和 Y 軸，常規(guī)情況下為 1 個 X 軸+1 個 Y 軸。不過特殊情況下也會用到 2X+Y 或 X+2Y。

刻度值代表的意義

• 時間點：12:00；
• 時間段：周一、周二。

坐標軸使用規(guī)則

是否帶單位：

• 如果刻度值的含義明確的情況下，可以不用帶單位，比如：2018、2019、2020…；
• 如果刻度值含義有歧義的情況下，必須加上單位（具體是統(tǒng)一一個位置加單位，還是每個刻度值上加單位，則需要根據場景來判斷）。

對齊方式（常用，但非必須）：

• X 軸：居中對齊；
• Y 軸：右對齊。

刻度值過多時如何顯示：

• 可選擇規(guī)律性省略刻度名稱；
• 傾斜文字以顯示更多的文案。

刻度值的選用一定要是同一個規(guī)律，禁止同距離的刻度值代表不同數據。

刻度點的樣式使用規(guī)則：

刻度的線朝外。

4. 數據展示

數據的展示是 chart 中最為明顯的地方，可以說如果只顯示一個元素的話，就是他了。

數據展示的使用規(guī)則：

• 邊界要清晰，不可虛化；
• 多個數據同時顯示的時候，要保證每個數據都能清晰的看到，可以采用透明度來保證所有數據的顯示。

5. 網格線

網格線的作用

呼應坐標軸，美觀度。

網格線的使用規(guī)則

• 線的顏色要弱化，不要喧賓奪主；

網格線使用實線居多，盡量不用虛線。

使用場景

橫、縱、橫縱結合、無網格線。

6. 提示信息

通常情況下，提示信息用來標識出 chart 中重要點的數據信息，需要注意的是：重要信息盡量簡化，信息量不要太大，言簡意賅就好。

7. 水位線

根據不同產品的使用場景，有的時候會用到閾值，當達到某個閾值后，就會觸發(fā)某種聯(lián)動。這個時候就需要有個水位線了，它起到警示的作用。

形式有兩種，實線和虛線，顏色的選取則取決于產品的警告級別。

水位線可以是一個，也可以是多個，視情況而定。

8. 時間軸

時間軸可以靈活地調節(jié)刻度值的上下限，從而更精確的看到自己想看的數據。

時間軸的功能及限制沒有不是很復雜，所以就不過多解釋了，需要用的話就用。

圖表使用建議

1. 折線圖 line

定義

折線圖可以顯示隨時間（根據常用比例設置）而變化的連續(xù)數據，因此非常適用于顯示在相等時間間隔下數據的趨勢。折線圖是通過線條的波動來表示數據的波動，主要體現的是數據隨著時間的推移而變動的圖表。

使用場景

常用于觀察一段時間內數據波動的浮動變化，比如：一天內內存的使用情況。

使用建議

Y 軸刻度值選擇要合理，當前顯示的數據波動要最大化的顯示；

重要節(jié)點可以單獨做重點標注；

數據拐點要平滑，不要太鋒利。

2. 面積圖 area

定義

面積圖和折線圖比較類似，區(qū)別在于面積圖把數據區(qū)域做了個面積劃分，讓數據的顯示更加清晰。

使用場景

面積圖展示盡量不要超過 3 個圖例，否則數據多的情況下，數據的展示會特別亂，影響觀看。

使用建議

面積區(qū)域要和折線的顏色用統(tǒng)一色系，不要換色系；

面積區(qū)域一般要比折線顏色淺一些，這樣視覺上更加讓人舒適；

如果多條數據情況下也用面積圖的話，面積區(qū)域盡量使用透明度，否則有的數據會被遮擋看不到。

3. 柱狀圖 bar

 定義

柱形圖，又稱長條圖、柱狀統(tǒng)計圖。用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常利用于較小的數據集分析。

使用場景

• 柱狀圖分為橫向和縱向兩種展現形式；
• 用于在同一維度下不同數據的對比，用柱狀圖更能清晰的對比出數據的差異化。

使用建議

柱狀圖的厚度不要是固定值，要做成自適應來應對不同尺寸的分辨率顯示；

厚度與間距的對比要合理設計；

可使用小圓角，千萬不要用大圓角，太丑了……

如果想要強調某個柱子的話，可以進行顏色區(qū)分，但是柱子顏色不要超過 2 個（同一維度下）；

如果想要在柱子上顯示數值的話，使用建議（下面的順序為推薦順序）：

• hover 的時候出現數值；
• 數值默認在柱子上顯示；
• 數值在柱子頂部 / 右側顯示。

4. 餅圖 pie

定義

餅圖僅排列在工作表的一列或一行中的數據，它是有一個總和數據，方面查看每個類別分別占總數據的百分比的一種圖表。

使用場景

• 常用于做總結、年度匯報等；
• 所有數據相加必須是 100% 才可用。

使用建議

• 每個數據要使用單獨的顏色來表示，不要有相同顏色；
• 餅圖中不能有負值；
• 圖例數量沒有限制，但是如果遇到可以合并的圖例，可以進行合并；
• 餅圖的開始點為 0/12 點位置。

5. 環(huán)形圖

定義

環(huán)形圖是由兩個不同大小的圓疊在一起，切割中心部分得到的一種圖形。

使用場景

• 環(huán)形圖有一個獨有的特點，就是可以在中心圓的位置突出某一項指標的數值。
• 它常用于做數據的監(jiān)控，監(jiān)控某一類指標是否正常。

使用建議

• 環(huán)形圖的開始點為 0/12 點位置；
• 環(huán)的粗細要合理，不要太粗和太細；

環(huán)形圖的兩個圓要從中心對齊。

6. 堆疊面積圖

定義

堆疊面積圖是把數據面積按順序逐步堆疊起來的一種圖形。

使用場景

常用于不同資源中流量 / 容量的使用。

使用建議

• 不要有重復的顏色；
• 盡可能的把數據量按大小的順序，由下至上的堆疊。

7. 堆疊柱狀圖

定義

堆疊柱狀圖是把數據柱狀圖按順序逐步堆疊起來的一種圖形。

使用場景

常用于不同維度下相同幾個指標的展示。

使用建議

• 不要有重復的顏色；
• 按重要等級由下至上排序。

8. 非常用圖表

上面介紹了常用的圖表的使用建議，但是圖表類型遠遠不止于此，還有很多非常用的圖表類型，這次我先給大家列出來，如果大家感興趣的話，我后面再寫一期冷門圖表的使用建議：

雷達圖，散點圖，K 線圖，盒須圖，熱力圖，旭日圖，桑基圖，樹圖，漏斗圖，儀表盤。

常用的圖表開源網站

1. echartsecharts

網站鏈接：https://echarts.apache.org/zh/index.html

2. highcharts

網站鏈接：https://www.highcharts.com.cn/

3. antv

網站鏈接：https://antv-g2.gitee.io/zh/examples/gallery

總結

Chart 是數據可視化必修課中最重要的模塊之一，不可忽略。只有了解每個 chart 的定義及使用場景，才能在產品中用到最合適的那一個。

文章來源：優(yōu)設網    作者：Luck gg

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

對于任何手機應用程序，如果沒有來自用戶的一些初始和正在進行的輸入，就不會發(fā)生任何事情。因此，手機產品設計師、開發(fā)人員和產品經理必須了解允許用戶這樣做的最佳方式。

雖然手機應用程序以及使用它們的用戶通常是獨一無二的，但是有許多常見的模式(新模式和舊模式)被用來解決這個特定的問題。

用戶輸入設計的6個目標

在我們深入研究模式之前，了解用戶輸入設計的六個主要目標是很重要的：

1. 選擇合適的輸入和資料登錄方法

2. 減少輸入量

3. 設計有吸引力的數據輸入屏幕

4. 使用驗證檢查來減少輸入錯誤

5. 設計所需的輸入文檔

6. 制定有效的輸入控制

模式的概述

在記住以上設計目標的前提下，下面是我們在將本文中詳細介紹的設計模式的概述，在我們的電子書《2014年手機用戶界面設計模式》中有更詳細的介紹:

1.智能鍵盤
2.默認值&自動完成
3.立即沉浸(或“惰性注冊”)
4.操作欄
5.社交賬號登錄
6.巨大按鈕
7.滑動操作
8.通知
9.顯性控件
10.可擴展輸入
11.撤銷

1.智能鍵盤

Facebook記事本，Android聯(lián)系人

問題
用戶希望快速輸入信息。

解決方案
當用戶點擊應用程序中允許輸入信息的部分時，給他們與輸入數據相關的鍵盤。這使他們不必在字母數字屏幕之間尋找正確的按鈕，或者多走一步來訪問鍵盤。這不僅方便了用戶，而且還指示了需要從用戶那里得到什么類型的輸入。手機平臺允許相應地標記文本字段，這允許在哪些按鈕顯示在更顯著位置方面有一定的靈活性。

例如，在地址簿或撥號器中輸入電話號碼時，用戶不需要完整的鍵盤。當他們點擊這些字段時，數字小鍵盤就會彈出，而不是整個鍵盤，這樣就減少了不必要的按鈕，簡化了操作過程。類似地，點擊瀏覽器中的URL欄會彈出一個稍微修改過的鍵盤，其中“/”和“。com”按鈕顯示在空格鍵旁邊，而不是符號鍵后面。通過連接到系統(tǒng)提供的這些智能鍵盤類型，你的UI可以根據用戶當前嘗試的操作進行調整。

2.默認值&自動完成

Skype, Flightboard

問題
用戶希望快速完成操作。

解決方案
通過為用戶提供預先填充的默認值或基于先前輸入的數據的提示，預測頻繁選擇的項并使用戶更容易地進行數據輸入。這可以與自動完成功能相匹配，比如在谷歌Play Store搜索中，通過加速來顯著改善用戶體驗。這種模式在標準化用戶輸入和在問題發(fā)生之前預測問題方面特別有用。例如，Skype會自動為輸入的電話號碼匹配國家代碼。從用戶的角度來看，這是有意義的，因為他們不習慣定期輸入這些信息，但在這種情況下，這種匹配很重要，因為Skype是一個國際電話應用程序。

另一種實現方法是保存用戶輸入的最后一項，并在用戶再次輸入或搜索時顯示這些最近使用過的項。例如，Flightboard在搜索框下面列出了以前使用過的位置，以避免用戶再次輸入。大多數地圖或導航應用程序也采用這種模式，在搜索方向時自動輸入用戶當前位置，為用戶節(jié)省幾次點擊，因為這是最常見的情況。

3.立即沉浸（或“惰性注冊”）

Wunderlist

問題
用戶希望在注冊之前先嘗試一下。

解決方案
越來越多的應用程序允許用戶在任何事情發(fā)生之前——甚至是注冊或登錄之前——立即沉浸在應用程序中。

記住，他們一次只能做一件事，而且測試每個新產品的時間有限。隨著應用程序的日益專業(yè)化，在扶持它們之前找到高質量的用戶或客戶越來越重要——他們可能會討厭你的產品或很快意識到它不是他們想要的。向用戶詢問注冊賬戶所需的信息可能是一件很困難的事情，而且會降低甚至是適合的訪問者的注冊率。在積極的方面，通過讓他們立即體驗你的產品，他們更有可能被吸引，因為他們能夠在第一次體驗時深入探索應用程序。這比我們接下來討論的onboarding walkthrough UI模式更好，因為它向用戶展示而非告訴他們應用程序如何工作。

對于Carousel或Duolingo等依賴用戶數據來運行的應用程序來說，允許延遲注冊是沒有意義的，但Wunderlist或Houzz等應用程序可以允許用戶在要求他們確認身份之前進入并使用該應用程序。通常情況下，注冊會帶來一些額外的好處，比如在Wunderlist中進行跨設備同步，或者在Houzz中創(chuàng)建一本想法書，這會讓注冊變得更有吸引力。延遲注冊并不總是一個好主意，但是選擇“注冊前試用”可以很好地提高你的應用程序的參與度。

4.操作欄

Facebook Paper, Behance

問題
用戶希望快速訪問常用的操作。

解決方案
從應用程序的操作欄(或iOS術語中的“工具欄”)提供對重要操作的快速訪問。雖然導航條主導了web和早期的手機應用程序設計, 但其他模式的使用，如折疊、滑出式工具欄和側邊欄、指向所有內容的鏈接、按鈕轉換、垂直的和基于內容的導航，產生了更簡單的應用程序視圖，用戶可以專注于一級和二級操作，而不是二級導航。常見的操作有：在應用程序中搜索、共享和創(chuàng)建新內容。這個存留的菜單可以幫助用戶熟悉UI，還可以通過專注于與用戶相關的重要操作清除一些混亂。

5.社交賬號登錄

Beats Music, Flipboard

問題
用戶需要一種更簡單的注冊和登錄方式。

解決方案
整合社交賬號登錄方法，允許用戶通過現有賬戶登錄。這意味著他們少了一個需要擔心的用戶名/密碼組合，同時，你也不必擔心密碼的安全性。Facebook、Twitter和谷歌是主要的OAuth登錄提供商，根據平臺和目標受眾的不同，你可以在你的應用程序中提供所有這些或其中之一，而不是讓用戶建立一個他們可能會也可能不會在未來使用的單獨的帳戶。使用這個注冊和登錄模式也可以為你提供一些基本的關于用戶的數據(當他們使用應用程序時，會自動填充數據), 同時，通過不強迫用戶在剛下載的陌生應用程序中輸入他們的詳細信息，讓他們更加舒適。這個簡單的特性可以在很大程度上改進你的UX，因此這種模式正在成為一種期望。

6.巨大按鈕

Tinder, Shazam

問題
用戶希望立即知道他們可以采取哪些操作。

解決方案
理想的觸屏點擊目標大小可能是72 px,但是一些應用程序，像Tinder，也會給你巨大的按鈕讓你確切地知道該做什么, 無論你在什么位置，無論你在做什么，你都能很快完成操作——很難錯過這些巨大的按鈕,即使你沒在仔細看。這在更簡單的應用程序中尤其有價值，因為在這些應用程序中，用戶需要執(zhí)行的操作非常有限，因此更有理由讓他們在各種情境中更容易地執(zhí)行這些操作。例如，Shazam是用來看電視或聽音樂的，它實際上只做一件事。對于試圖在這種分心狀態(tài)下進行多任務處理的用戶來說，巨大的按鈕是一個巨大的改進。

7.滑動操作

Carousel

問題
用戶希望關注特定的內容。

解決方案
允許內容被滑動或移動。這為用戶提供了一種非常直觀的方式來處理屏幕上的信息。例如，谷歌中的“卡片”現在可以在你不需要的時候被滑走，以清理雜物;類似地，Tinder中的配置文件可以向左或向右滑動，以表示積極或消極的響應。這個模式與我們在導航模式中討論的滑動視圖不同。在這里，滑動手勢被用于一項操作，而不僅僅是瀏覽。有些應用程序結合了兩種滑動模式，比如Carousel，它可以讓你通過將照片滑動到一邊來瀏覽多張照片，也可以通過向上或向下滑動來分享或隱藏照片。郵箱推廣了電子郵件客戶端的左右滑動操作，允許你分別通過向右或向左滑動將郵件標記為已讀或安排為待處理。Secret用讓你發(fā)現新菜單的方式來讓你發(fā)現新動作。向左滑動一個secret代表你喜歡它。

8.通知

LinkedIn, Facebook

問題
用戶希望了解他們應該瀏覽的新活動或操作。

解決方案
通過標記新內容來突出最近的活動。這個模式有幾種實現方式。例如，在標簽上放置一個計數徽章是由iOS推廣開來的，但現在這也可以在許多其他應用程序中看到，如LinkedIn、Facebook或Quora。Twitter在通知按鈕上也這樣做，但它在時間軸圖標的頂部還有一個小點，以更微妙的方式指示新的活動。另一種顯示通知的方式是在應用程序中使用一個向下拉的橫幅來顯示新活動。Facebook應用程序也能做到這一點，當新聞推送中出現新條目時，它會彈出一個小窗口。

9.顯性控件

Secret

問題
用戶希望快速訪問那些二級的或僅與應用程序中的特定部分或內容相關的控件。

解決方案
清理雜物，讓用戶只在需要時才發(fā)現特定的操作。這些看不見的控件可以通過任何手勢來訪問——滑動、輕擊、雙擊、長按等等(我們在手勢模式中討論過)。這使你能夠將這些操作保留在屏幕之外，從而節(jié)省一些寶貴的空間。例如，Secret使用手勢而不是可視控件。向右滑動，就會出現一個動作菜單，這是我們前面介紹過的折疊模式的簡化版。在創(chuàng)建內容時，用戶可以在背景上水平滑動或垂直滑動手指來改變背景的顏色和圖案，或者在使用圖片時，可以改變圖片的亮度、飽和度或模糊度。沒有其他控件允許你這樣做——也不應該有其他控件。這種UI設計模式非常直觀、清晰，你一定會看到更多這種類型的交互。Pinterest是另一個使用手勢隱藏動作按鈕的應用程序。長時間按下一個圖像，就會出現一個按鈕，用戶可以通過將彈出控件拖動到該按鈕上來對其進行固定或評論。

Uber是這種設計模式的另一種實現方式。Uber還可以讓你在預訂和查看車費估算之間進行切換，只要你選擇了你想要的乘車類型，就可以通過點擊滑塊按鈕來查看車費估算。這是一個簡單而又重要的UI設計模式，每當我在做五件事的同時還想搭個便車，同時還要確保Uber不會用峰時價格來騙我的時候，它都會讓我微笑。Snapchat和Facebook Messenger允許你在需要的時候通過滑走所有朋友的賬戶來訪問這些功能。

10.可擴展輸入

YouTube

問題
用戶希望關注內容，而不是犧牲屏幕空間給控件。

解決方案
設計當用戶點擊時會展開的控件。這使得大多數控件在用戶需要它們之前都不會出現。例如，YouTube和Facebook通過將搜索欄隱藏在一個圖標后面來節(jié)省屏幕空間，當用戶點擊這個圖標時，它就會展開成一個搜索欄。

11.撤銷

Gmail, Chrome

問題
用戶希望在沒有中斷(例如:確認)的情況下快速地執(zhí)行操作，但是可以選擇恢復意外操作。

解決方案
為用戶提供一個簡單的方法來撤銷他們的操作，而不只是要求他們事先確認。在某些情況下，某個操作可能會導致不方便或數據丟失，例如刪除電子郵件或編輯一些文本。用戶可能因為不知道會發(fā)生什么而完成了一個動作;一個寬容的用戶界面可以讓他們體驗到更多的參與感和友好。對于高級用戶來說，撤銷功能也很強大，他們會喜歡在整個過程中不用UI反復詢問他們是否確定要繼續(xù)操作，就能更好地控制局面。在解釋將要發(fā)生的事情時，確認彈出窗口可能很有用，但是用戶可能直到看到操作的結果才會理解其含義。在這種情況下，最好是讓開，同時提供一個安全網絡，以防出現錯誤。

獲取用戶的輸入
時刻記錄你應該從用戶那里獲得輸入的位置，他們是否曾經查看過這些輸入區(qū)域，他們使用這些輸入控件的頻率，他們從哪里來，又從哪里進入應用程序(即用戶流)，等等。不斷地重新安排、重新排序、調整大小和調整這些控件，直到你獲得更多所需的操作。當然，當用戶能夠提供輸入時，要深入考慮他們實際上是如何使用你的移動應用程序的——確保你在設計應用程序時沒有遺漏什么明顯的東西。

文章來源：站酷  作者：馬克筆設計留學

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

章節(jié)一：為什么要堅持國際化設計？

堅持走國際化設計的背景

出海早已成為中國互聯(lián)網公司的不二選擇。相比在國內廝殺，國外有更多的人口/政策/資源紅利。并且因為互聯(lián)網的可復制模式，使得成熟的經驗可以快速運用到國外，從而搶占先機。而做好國際化的本質就是【做好每個地區(qū)的本地化設計】，想用一套國際化的標準去用在全世界的各個地區(qū)取得成功是非常困難的

那有什么好的方法和理論能夠讓設計提前著落，為業(yè)務帶來一線用戶信息和設計價值呢？接下來我將給大家介紹一些實際的方法和案例幫助大家做國際化的設計，讓自己的設計價值有理可依

*以下內容與公司無關，更多的是基于筆者國際化工作經驗的復盤，如有錯誤，歡迎指正（Salute~）

寫在前面

首先我們要知道，一套通用的設計標準很難在多個國家吃的開，從而拿到用戶信任

我們先來看個案例，這個是日本UBER司機端和日本滴滴司機端對比

最明顯的區(qū)別在于，滴滴國際化在日本業(yè)務和Global業(yè)務這塊，司機端采用的是移動端（global）+平板端（日本），而UBER則是一套方案解決全球問題，可能有些人會問，一套設計不是成本更低，效率更高么，為什么非要制作兩套。這就要從決策成本的角度去考慮問題，而日本市場相對于滴滴其他地區(qū)市場有著完全不同的因素，涉及到了資本，使用場景，市場地位，用戶畫像等多方因素決定，這時的【成本與效率】已經無法排在做與不做的第一位了，接下來我們通過兩張照片來看下日本司機的接駕場景

通過照片我們是否發(fā)現日本司機的畫像其實和全世界其他的出租車司機都不太一樣？是不是明顯發(fā)現他們的年紀相對的更大一些？會穿制服佩戴白手套？ 那年紀更大是不是意味著司機的視力會相對于中年人有所下降，白手套是否會影響他操作屏幕交互，那針對這么不同用戶群體是否需要單獨設計呢？最終的目標是占領市場的話是否要根據本地情況去服務好當地司機呢？

那我再來舉兩個例子來看看，我們來看看針對日本本地化做的特殊設計細節(jié)在哪些方面？

案例一：針對司機群體老齡化設計———大屏幕設計：

日本屬于老齡化國家，司機平均年齡更是在50歲以上，高齡人群的視力相比于青年處于退化階段，因此對于高齡人群來說在駕駛的過程中去讀和操作小屏幕來說是一件非常痛苦的事情，UBER采用的是一套國際化的設計語言并沒有針對日本的市場進行單獨的設計,DiDi在日本則是針對司機群體采用了單獨平板端設計，更大的屏幕降低了司機誤操作可能性的同時，也能將字體放大，盡可能讓司機方便識別

案例二：針對日本司機人文的設計———語音接單

“日本服務業(yè)發(fā)達，體現在服務的細節(jié)。出租車司機出于對客戶的尊重，都會戴上白手套。但是在帶著手套的時候，司機很難去點擊屏幕進行操作，而且在行車過程中，觸碰屏幕本來就是不合規(guī)的行為。無論是從法律層面還是價值觀層面我們都不鼓勵司機做出這種行為，于是開發(fā)了語音接單的功能?？紤]到司機群體的年紀特征，我們選用了在日本相對普及又好識別的“了解しました（りょかいしました）”進行快速語音接單,在新版本上線后，司機可以通過屏中屏的方式去學習語音接單功能，只有他完全掌握這個功能才會為他完全展現，如果司機因為自身原因無法很好地說出那句話，我們依舊會為他保留按鈕輸入的方式”------國際化業(yè)務中的本地化設計

（圖片來自于SUXA文章《國際化業(yè)務中的本地化設計》-呂誠）

國際化設計的思維框架

通過兩個日本的案例我們能明確一個點【國際化實質就是做好每個地區(qū)的本地化設計】

怎么樣讓國際化的設計有法可依，我們先來看懂一個關系框架。做好一個產品實質是服務好每一個場景，那一個場景由哪幾個方面組成，簡單來說是由【業(yè)務】+【用戶】組成，這并不難理解，我們作為產品設計師，首先是背靠業(yè)務，解決公司的商業(yè)訴求，給業(yè)務帶來利益的同時給用戶帶來更多的使用價值然后獲得用戶的認可。在這個過程中，我們會將商業(yè)訴求和用戶價值進行一個有效的結合，從而滿足雙方，但是還不夠，因為一個場景還依賴客觀的條件，比如時間和空間維度，最終也會影響整體的質量，我們將所有的因素通過包含關系展示出來

接下來我們往細的方向進行拆解，【業(yè)務】根據公司行業(yè)，階段的不同以及基礎能力的不同，呈現的點也不盡相同。最核心的點在于當前所屬階段，是1.0階段力求生存下來，還是說2.0和競品之間產生差異化，還是活3.0去打敗競品階段。在不同階段設計師要了解的事情也不同，對于1.0階段來說，更精準的展示出用戶畫像和了解當地的文化與習慣是重中之重。但是到了2.0則應該更加關注產品目標與競品的差異化競爭，通過差異化（殺手級）的功能形態(tài)獲取更多的搖擺用戶

不同的賽道，業(yè)務不同，打法也不同。我今天主要想講的就是左右場景的另外一個因子【用戶】。那如何定義一個用戶呢？我們先來列舉些具象的特征：

【外貌/文化風俗/地域特征/語言等】是一個用戶的畫像的基礎組成，但是光有畫像基礎并不精確，因為每個國家的【法律/政策]同樣會影響用戶的行為。而在當今的互聯(lián)網模式下，用戶體驗的提高必須得考慮各地區(qū)【硬件的水平以及當地的網絡狀況】，最后就是如何與【本地化的設計團隊進行友好的合作】讓體驗和設計策略能夠更加精準的傳達到真實用戶手里，獲得用戶認可，特別是在20年后，疫情的爆發(fā)導致設計師無法到前線進行真實有效的實地探測，那么加強合作以及對齊目標，為業(yè)務拿結果將是重中之重，接下來，我將對于每個影響【用戶】的因子進行舉例講解

章節(jié)二：如何快速了解你服務的用戶

做任何的設計都離不開用戶畫像，而做國際化設計一定也繞不開-霍夫斯泰德文化維度理論

可能你知道，在給拉美客戶做單的時候他們會要求你的界面顏色亮麗，看起來更加奔放，而在給亞洲客戶做單的時候則會相反，整體看起來更加約束。但是你能清楚的知道背后的原因么？如果不清楚那你的這塊分辨更多是依賴于經驗和他人的總結。那有沒有一套理論能夠很好的去輔助你去分析你的客戶用戶畫像，去支撐你的設計。答案是有的，他就是【霍夫斯泰德文化維度理論】

霍夫斯泰德文化維度理論（Hofstede's cultural dimensions theory）是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個框架。他認為文化是在一個環(huán)境下人們共同擁有的心理程序，能將一群人與其他人區(qū)分開來。通過研究，他將不同文化間的差異歸納為5個基本的文化價值觀維度

百科連接：霍夫斯泰德理論詳情 （<-點擊快速查看）

完全不懂的可以看看上面的鏈接，我們這里跳過部分解釋….通過文化將維度理論我們將文化價值觀劃分成6個維度

了解完霍夫斯泰德理論以后我們該如何去使用呢？我們先從拉美用戶和日本用戶的差異對比開始

通過霍夫斯泰德官網查詢我們可得知差距最大的兩個分別是【男性化與女性化(Masculinity versus Femininity)】與【長期取向與短期取向(Long-term versus Short-term)】，差值比例達到了46和44.

接下來我們來對【差值較大】以及【分值較高】的因素進行解釋和舉例，去理解背后的原因

男性化與女性化(Masculinity versus Femininity)

日本是個生性好斗競爭意識強烈的民族。在日本企業(yè)中工作狂是他們男性氣質的一種表現；而日本男主外女主內，62％的女性在第一個孩子之后選擇辭職，也是男性氣質的另一表現.

在日本想要成為一個出租車司機，就要在5年之內不能有任何違規(guī)，某些地方還會有特殊的考試，這里面的合格率并不高。并且在通過考試之后再在通過一系列的評分后，才能被評為A級或者AA級別的出租車，雖然這僅僅只是一張小貼紙，但是他也代表著一個出租車司機的榮譽。在這一方面，也體現日本社會的男性氣質的確定性。

相比較日本，巴西人更會以家庭為中心、以教育為重心、博愛、具有個人風格意識。家庭是關鍵。家庭是巴西人生活的中心，也是其社會的核心價值觀。對于一個家庭而言，家人共同用餐的時間是非常重要的，還有星期天的燒烤活動，能讓更多的遠房親戚和朋友聚會。所以在巴西你很難看到休息日去工作的同事，甚至無法聯(lián)系上他們：）

長期取向與短期取向(Long-term versus Short-term)

日本人將生命視為一個非常短暫的時刻，所以調查發(fā)現日本人普遍相信宿命論，他們鼓勵節(jié)儉和現代教育的努力，作為為未來做準備的一種方式。

巴西相較于日本經濟落后，人民的收入水平普遍不高，很多司機收入僅僅能夠維持一家的支出，很難有結余，在巴西工資會按照周維度支付，以保證一家人的生活開支能夠承擔。

針對巴西的情況我們做了適合當地政策和環(huán)境的本地化服務。錢包1.0的時候我們先是和當地的銀行合作推出了巴西99卡，允許司機隨時提現且提現速度遠遠大于了當地的其他銀行（48小時），那這種優(yōu)勢在收入較低的司機群體當中就會發(fā)揮很大的優(yōu)勢。在3.0的改版中，我們將錢包打造長了本地生活平臺，我們允許司機通過平臺去完成轉賬/水電費/電話費/還款等行為，原本需要走到線下便利店的服務被我們搬到了線上，更是大大的方便了使用99卡的群體。未來呢，我們將加大加多權益，達到使用場景獨占的目的。通過這些服務為我們給用戶帶來了使用價值，同時我們也給業(yè)務帶來了價值，更多的綁卡滲透率為我們后續(xù)的推廣和矩陣式的打法提供了導流的入口

（99與當地銀行合作的線上本地生活功能-99Pay）

不確定性的規(guī)避(Uncertainty Avoidance)

日本地處自然災害頻發(fā)地帶，沒有豐富的自然資源，生存條件不太好，所以日本人有很強的危機意識，學會了為任何不確定的情況做好預防措施，對待事情也希望有明確性

而巴西雖然處于平原，沒有自然災害，但是因為社會安全因素，整個社會對于社恐事件還是有較強烈的危機意識，所以司機會更加關注接送流程中是否會前往不安全地區(qū)，以及乘客的質量

（日本司機的真實駕駛場景）

費用收取的正確與否也是服務體驗優(yōu)秀的表現，日本司機會用計步器進行計價，如果涉及到了其他的費用則會使用單獨的計算器進行精確計算，這么做的原因是為了避免計算錯誤給乘客帶來困擾和爭執(zhí)，那從這個環(huán)節(jié)來看，司機為了規(guī)避【計算錯誤的可能】而預備了計算器，減少了差體驗的可能

在巴西，滴滴如果對司機派單如果過遠會或者是危險地區(qū)會進行提示，允許司機取消派單。并且根據調研司機群體特別是夜班司機會有隨身攜帶防護性的武器用來自我保護，那么也能很好的說明整個社會對于社恐事件還是有較強烈的危機意識。那么做為設計師，是不是意味著可以把危險地區(qū)的派單做的更加醒目，讓司機能夠更快識別，更快決策，而不是為了平臺和用戶利益進行隱藏。是不是可以把安全鏈路透傳做的更強，讓司乘都能更加快捷第一時間選擇自助服務

章節(jié)三：繞不開的硬邊界

法律法規(guī)的約束

每個國家的發(fā)展階段不同，對于隱私重視程度不同，因此針對不同地區(qū)的海外市場，作為業(yè)務的合作伙伴設計師們需要針對不同的市場配套不同的安全合規(guī)方案，這一點格外需要注意，不然會被罰的很慘,通常獲取地理位置/賬號信息保留是每個公司都非要需要的，因此在空投其他國家之前需要了解是否立法關于隱私相關的法律，如果有則需要通過配置化將其他國家上線的隱私條款和設置方式復制過來使用

LGPD和GPDR風控合規(guī)

簡單來說就是要做到信息安全，保護個體隱私。大家都知道在中國我們的信息被侵犯的體無完膚。其實在國外也是一樣，各種權限，各種信息默認保留和上傳。但是隨著各國的重視，個人隱私也逐漸走向明確的法律保護層面。在拉美有LGPD，在歐洲有GPDR

GDPR 是(The European General Data Protection Regulation ）的縮寫，即通用數據保護條例。是歐盟議會和歐盟理事會在?2016?年?4?月通過，在?2018?年?5?月開始強制實施的規(guī)定。

GDPR 意義在于推動強制執(zhí)行隱私條例，規(guī)定了企業(yè)在對用戶的數據收集、存儲、保護和使用時新的標準；另一方面，對于自身的數據，也給予了用戶更大處理權。也就是說在18年生效之后，如果再有歐洲任何公司App不對用戶的數據進行合規(guī)處理，擅自收集信息就將會受到嚴懲

智能硬件的普及度以及新舊

硬件的普及率以及新舊差異也同樣影響著本地化設計，通過調研和外界公布的數據我們得知，在拉美高端手機的占比遠遠低于發(fā)達國家。因此在給發(fā)達地區(qū)做設計的時候可以考慮更多體驗上的拓展，但是在給發(fā)展中國家做設計的時候則需要進行小屏幕最小尺寸的適配，這樣做是為了最好的進行向下兼容，從而保證所有用戶都能夠使用。同樣，如果你在給發(fā)展中國家做設計，那么復雜的動效和高清晰解析的大圖最好是不要去做的

（網上后臺數據展示截圖）

當地的網絡環(huán)境和下載速度及物流環(huán)境

拉美國家，基建水平滯后，網絡下載的速率波動較大，且存在不穩(wěn)定的情況，以及流量費用的價格差異。因此某些設計手法在較發(fā)達國家能帶來體驗但是在發(fā)展中國家可能會是災難

舉個例子，司機端的歷史列表如果存在400條記錄，如果司機有訴求想刷新查看更多的訂單，是一次性下拉刷新展示全部好呢？還是一次性展示50條好呢？還是一次性展示20條呢？

答案是一次性展示20條是最穩(wěn)妥的選擇，因為網絡的不穩(wěn)定性，一次性加載太多數據會導致過長時間，而網絡不穩(wěn)定極有可能導致下載失敗，并且一次性下載太多數據可能并不符合司機查詢的最初訴求，反而浪費司機的寶貴流量，最終會引擎流量消耗過快引發(fā)進線，這里的決策是損失一些用戶的體驗去保障司機的收入，但是在拉美因為手機的性能/網速的穩(wěn)定且快速/套餐足夠便宜，因此我們可以嘗試使用一次性加載全部的數據，這樣能讓體驗感受更好

（99信用卡的申請權益展示/激活流程頁面）

再舉個例子，拉美物流相對沒那么發(fā)達，且因為政治/經濟局勢的不穩(wěn)定性，導致物流包裹存在無法送達的情況，如果收件人不知曉當前的狀態(tài)而超出了等待的預期，那么他就會進線詢問。那在這個場景我們有什么更好的辦法？是否可以透傳更多的包裹進度方便收件人查看，再者再將用戶導流到客服自助而非進線？這樣的好處一來體驗的鏈路完善了，讓司機可以找到自助的出口，二是方便我們可以更好的了解哪些地區(qū)收到郵寄的折損率最大？從而探索新的業(yè)務，發(fā)現新的機會點

章節(jié)四：生活習慣和歷史文化遺留帶來的本地化策略

收入/支出方式占比反映了一個群體的現狀

聊這個話題前我們先將選擇的范圍進行收縮，聚焦在一個國家的一個群體內去看會比較容易解釋。在巴西司機的收入的往往只能支撐下一周的家庭支出，難有結余。這也導致司機會選擇雙開（同時使用UBER接單或者其他競品）或者進行其他賺錢的方法，如果整個群體都是這樣的情況下，那么司機的忠誠度（這里指的忠誠度不是貶義詞，而是每周的出車時長）必然下降。那樣對于大盤的運力來說便是損失。那有沒有什么辦法幫助司機更好的應對這些問題

我們該如何思考這個問題,通過馬斯洛的需求理論我們能夠將人的訴求歸為三類，基礎的生存訴求/歸屬感和成就感。那這三種可以再細化成兩類，物質層面的訴求和精神層面的訴求。司機愿意在滴滴平臺跑單是基于了物質層面。那么，我們是不是可以豐富收入以外的獎勵形式，提供活動獎勵或者權益的折扣，又或者嘗試下小額貸款，那這些是不是可以給用戶帶來價值點呢？

精神層面我們是不是也有發(fā)揮的空間，對于補貼，往往是有限的。那如何做到持續(xù)長期刺激司機群體？如果一個乘客對于司機進行了表揚和小費的激勵，是不是可以給司機帶來更大的信心去服務好乘客，那我們是不是要加強這方面的透傳。是不是可以給司機提供虛擬獎勵，讓司機存在足夠的擁有感和成就感，讓司機群體也能感受到平臺對他們的看重。如果勛章可以，那等級是不是也是成就之一呢？

現金與線上支付普及與思考

不同的國家線上和現金的支付比例大不相同，這里受經濟環(huán)境和政治環(huán)境影響較大?？偟膩碚f習慣了線上支付的習慣后就很難回到現金支付的環(huán)境，因為確實更加方便便利。一個國家大量使用現金支付的情況下，往往是互聯(lián)網公司能做的發(fā)力點和藍海。核心做法是通過核心業(yè)務導流到錢包模塊，在與當地的銀行和機構進行合作，增加卡和賬戶的滲透率。然后通過做權益和服務，滿足用戶的生活訴求，從而達到場景獨占。最終將會讓公司的業(yè)務矩陣從單核的核心業(yè)務到核心業(yè)務+本地生活

文字的適配/i18n翻譯的本地化（不同地區(qū)/國家語言精準翻譯，拒絕里語/文字長度折行問題）

這里我們需要提到一個概念，i18n（其來源是英文單詞 internationalization的首末字符i和n，18為中間的字符數）是“國際化”的簡稱。在資訊領域，國際化(i18n)指讓產品（出版物，軟件，硬件等）無需做大的改變就能夠適應不同的語言和地區(qū)的需要。對程序來說，在不修改內部代碼的情況下，能根據不同語言及地區(qū)顯示相應的界面。 在全球化的時代，國際化尤為重要，因為產品的潛在用戶可能來自世界的各個角落。通常與i18n相關的還有L10n（“本地化”的簡稱）

了解完i18n的相關背景以后我們大概可以把他定義成做國際化翻譯的一個中臺，所有的本地化設計在經過研發(fā)代碼實現后，都會進過他們去對文案進行翻譯校對，最終變成當地人可以理解的話術落地到界面上，從而進行本地化的空投，但是這里面往往存在一個適配優(yōu)化的問題。大家知道英文的單詞平均長度要長于漢字，而西語和葡語是英文的1.25倍到1.5倍之間，而俄語的長度更是能達到葡語的1.25倍。那么面對多國空投的適配不僅僅需要i18n進行精準翻譯，還需要把控字符長度，避免折行和省略問題

我們來看下下面這個例子

（不嚴謹的快速翻譯，只是為了更方便的展示不同文化下的文字長度）

不同國家的語言不同，文字也不同，則會存在單詞，句子長度/行高的差異。如果一個產品在初期沒有做好適配的話，到后期替換當地語言的時候極有可能出現文字溢出的問題，這也是為什么在做海外設計的時候最好拿當地的語言進行設計，能初篩出一些細小的問題 ，避免在和翻譯中臺對接的時候因為文案太長提供的空間不足而修改頁面間距和留白的適配問題

中東國家客戶的產品需要注意適配

如果你服務中東客戶，務必需要呈現出當地的閱讀排版方式（尊重本地化設計）具體的適配細節(jié)這里就不過多說了，網上搜索【RTL適配方法】即可

（Material Design中的RTL適配）

縮寫是否合適（日期/業(yè)內專屬名詞）- 時間格式/貨幣符號/聯(lián)系方式/地址等

格式也是做國際化中一個非常常見且體現專業(yè)度的地方，不同國家的時間展示方式不同，會影響用戶的閱讀，舉個例子“03/08/2019”，如果在A國理解是2019年3月8號，在其他國家復用是會存在理解成2019年8月3號的，更別說我們加上的星期之后的展示方式。這就要求我們在進行開新的國家的時候務必于前線進行更好的溝通，保障閱讀的習慣和當地一致，那貨幣符號/地址等也應該遵守當地的習慣去展示，通常的解法是設計團隊去收集信息并且與前線當地人員進行交流確認，將格式記錄下來，最后與研發(fā)根據上線的國家展示不同的格式

總結

因為時間倉促，無法面面俱到的將每個點都進行舉例論證，盡可能把我認為重要的點都提了出來。理解了這篇文章并不代表看懂看明白就能做好國際化，它更像是一個方法論，幫助沒做過國際化業(yè)務的同學能夠快速理解當地的用戶和業(yè)務的打法

希望我的文章能夠拋磚引玉，給大家一些靈感，也希望更多朋友能夠將國際化的經驗分享給設計的朋友們。讓我們一起把中國互聯(lián)網國際化的業(yè)務做到越來越好

最后引用我一老哥的話進行收尾“更好的國際化就是以更好的本地化思維去看待，去理解它們。而不是僅僅以一個理性的角度去看待。要站在用戶的角度去看，永遠不要輕易地相信自己的理解”

文章來源：站酷  作者：大寶蛋

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