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

堅持走國際化設計的背景

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

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

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

寫在前面

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

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

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

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

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

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

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

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

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

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

國際化設計的思維框架

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（99與當?shù)劂y行合作的線上本地生活功能-99Pay）

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

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

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

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

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

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

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

法律法規(guī)的約束

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

LGPD和GPDR風控合規(guī)

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

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

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

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

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

（網(wǎng)上后臺數(shù)據(jù)展示截圖）

當?shù)氐木W(wǎng)絡環(huán)境和下載速度及物流環(huán)境

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

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

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

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

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

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

收入/支出方式占比反映了一個群體的現(xiàn)狀

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

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

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

現(xiàn)金與線上支付普及與思考

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

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

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

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

我們來看下下面這個例子

（不嚴謹?shù)目焖俜g，只是為了更方便的展示不同文化下的文字長度）

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

中東國家客戶的產(chǎn)品需要注意適配

如果你服務中東客戶，務必需要呈現(xiàn)出當?shù)氐拈喿x排版方式（尊重本地化設計）具體的適配細節(jié)這里就不過多說了，網(wǎng)上搜索【RTL適配方法】即可

（Material Design中的RTL適配）

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

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

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

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

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

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

年少時，經(jīng)常聽到身邊的同事聊一些名詞概念，羨慕之余猶豫羞于提問，導致我經(jīng)常會陷入其中無法自拔，痛苦不已；過了這么多年，大多數(shù)概念都隨著工作的原因慢慢被理解和消化，或逐漸消失或不再提及。但唯獨，“設計系統(tǒng)”這個詞陰魂不散，反反復復的出現(xiàn)在我的面前，特別是在面試這個場景下，幾乎每一場都會有這個詞被提到。

也源于最近做B端稍微多一些，不如今天就以toB產(chǎn)品為例來嘮嘮我認知下的設計系統(tǒng)是什么以及如何幫助設計落地執(zhí)行的。

理論上來講，設計系統(tǒng)分為兩個大部分，一部分是指導思想，另一部分是實際產(chǎn)出；前者去指導后者執(zhí)行，二者的關(guān)系像極了競技運動中的教練安排的“戰(zhàn)術(shù)”和球員場上的“執(zhí)行動作”，如果用一張圖來表示，大概就是這么個事：

1. 語言構(gòu)成

需要強調(diào)的是，要設計一套“設計語言”，首先需要聚焦到“語言”這個詞上，通常我們認知里的語言無非是一套溝通方式，因為我們對他習以為常，所以并沒有更進一步的了解，我試圖去查了下語言的來源，以及為什么世界上會出現(xiàn)這么多語言之類的問題，搜過出來的結(jié)果很多很復雜，但概括來說就是支撐一套語言的核心分為“語言特性”以及“語言構(gòu)成”這兩大部分。

第一塊，詞匯：ta的作用是讓你表達出想法，就好比如果你跟我一樣English is not good的情況下，還嘚嘚瑟瑟的出國游玩，一定也經(jīng)歷過用“蹦單詞+比劃”的方式去問路、點菜吧，典型的通過word的方式傳遞信息。

另一趴，語法，ta會讓你更順暢的表達出自己的想法，通過對詞匯的重組和編排，信息傳遞的有效性被大大增加，你可以通過“主動賓”來陳述觀點或表達疑問，盡可能的豐富此刻你的所思所想。就像上面的例子，按照語法規(guī)則稍微調(diào)整一下，看起來就順暢多的多了~

那么如果映射到設計上，顯而易見，組件庫對應詞匯，交互流程對應語法；所以你會發(fā)現(xiàn)當我們不斷迭代產(chǎn)品的時候，我們無非就是想把產(chǎn)品當做一件事情講清楚罷了。

再就是當一套組件被創(chuàng)造出來，ta需要遵循一定的規(guī)則形成一個完整的頁面，跟我們造句幾乎一模一樣；所以這個時候充當語法的交互流程就至關(guān)重要?，F(xiàn)實情況下，往往交互形態(tài)是千變?nèi)f化的，經(jīng)常性的會因為業(yè)務場景的不同創(chuàng)造一些流程出來；但如果是基于語言的背景下，我們需要盡可能的抽練一些標準化的規(guī)則形成語法，我們稱之為“設計模式”：

我從中挑了搜索這個比較通用的模式來簡單講下；拋開組件的“點”思維，需要我們定義的是“信息交互”的“線性”流程，我試著把其中的每個環(huán)節(jié)提煉了出來，抽練了一個流程出來：

通過上圖也許你會發(fā)現(xiàn)“模式”注重的是流程節(jié)點的體驗感知（用戶跟產(chǎn)品交互的一來一往），并注重封裝成標準化方案。另外有一點，我把整個搜索的過程分為了2個個小線程——輸入行為和消費行為，這是為了以后團隊協(xié)作更好的理解這條模式的運作方式，以及之后的拓展，舉個例子：產(chǎn)品經(jīng)理決定加一個歷史搜索（就是顯示用戶過往的搜索結(jié)果），這個時候設計師就可以把這個功能當做一個拓展包，直接扔到這個主干里來：

另外，toB CRM鼻祖salesforce在自己的設計網(wǎng)站上公布了他們的設計模式，給出了一些特定的場景下的解決方案，不過寫的相對更偏組件流程一些：

PS . 插個有的沒的的小話題，一個很好玩的事，如果你細心琢磨的話，也許會發(fā)現(xiàn)其實組件本身也是帶有一定的潛在交互，這種交互不需要你特意安插，天生就有，就好比一個按鈕擺在那，在沒有任何引導的情況下，正常人也知道點一點。所以映射到語言里，語法貌似并不是必要的（當然ta的存在是為了設計系統(tǒng)更完整，產(chǎn)品更好），比如這個爛大街的梗：

這種現(xiàn)象是著名的“貝葉斯理論”，利用相關(guān)信息總結(jié)出未知信息，也就是說我們的大腦是可以通過殘缺的信息來補足未知的信息的，人類的大腦真的是奇奇妙妙啊~

2. 語言特性

相比構(gòu)成，特性這個就好理解多了，相當于設計原則這類的，我們需要通過一定的規(guī)則約束對語言有一個明確的指向；比如現(xiàn)代漢語就具備適應性、開放性兩大特征。

但不得不說，作為面試官我個人不是很喜歡作品集里描述設計原則的時候就3個詞：“簡潔”“高效”“清晰”。并不是討厭這三個詞，而是當我追問候選人為什么是這三個的時候，我得到的回復基本是Material Design（或其他大廠的設計系統(tǒng)）就是這么寫的亦或是其他很蒼白的回答，這無疑是暴露了對設計系統(tǒng)的認知殘缺，是一個非常掉分的互動過程。其實，當google、IBM、salesforce在對外宣講他們的設計原則的時候，也許就只有兩個字“清晰”，但背后或許有非常多的思考，甚至超乎你我的想象。

但...異乎尋常的是，AntDesign 的設計原則寫的很"深奧"，憑我的功力真的看不出背后的東西，也不知道如何指導設計（也許他們是在探索設計哲學吧哈哈哈哈）：

當我們對上述各方訴求梳理清楚后，首先要精準的概括和整理這些內(nèi)容的權(quán)重和占比（需要注意的是，雖然允許多個原則存在，但也要有一定的側(cè)重和比例，這種做法在順暢的環(huán)節(jié)上不會有所建樹，但在多個原則沖突的情況下為了保全大局，順應占比最大的原則是相對穩(wěn)妥的選擇，一定程度上可以幫助設計師規(guī)避掉不必要的糾結(jié)或撕逼的過程）；再然后基于當下的情況產(chǎn)出相應的原則，形成整套設計系統(tǒng)的王炸：

但在實際操作中，高度整合后的設計原則雖然指明了方向，但缺失了可衡量性，這就會導致“認知偏差”的情況，因為每個人對圖例中的“高效”或“靈活”理解不同，會對同一個事物有不同的理解，就跟“小馬過河”這個典故一樣，小松鼠覺著水很深，小馬卻覺著也就那樣；也正是基于此，需要設計師們在此基礎上拆分明確的細則，幫助整個團隊建立統(tǒng)一認知：

到這一步基本上設計系統(tǒng)就被定了調(diào)了，我們可以明確對一個設計進行評判和衡量，以“清晰”為例，我們有個B端產(chǎn)品里面有個表單填寫的頁面，需要用戶提供一些個信息，前兩天，團隊一個設計師做了個方案是把表單新開tab，但產(chǎn)品覺著不夠清晰，反而覺著蒙版的形式更清晰。他就很疑惑，明明信息獲得了更好的展示咋就不清晰了？

說到底，是我們在做設計定義的時候，對“清晰”的認知就是偏薄的，這個案例里面顯然第一個方案對信息的展示更加充分明了，但在這個場景下“清晰”并不僅僅指的是信息呈現(xiàn)，產(chǎn)品經(jīng)理希望用戶透過浮層能確認當前處在哪一步（或哪個頁面）也同樣是一個維度；從這個case里，你會發(fā)現(xiàn)，定義一個原則真的不僅僅是搬運一個名詞這么簡單，所有的原則和特性必須遵循易于操作且合理，這樣才是一條合格且優(yōu)秀的原則。

ps . Salesforce的Lightning設計系統(tǒng)是我最喜歡的design system之一，原因很多，其中很重要的一條是因為他們真的是把“美”作為一個很重要的原則：

色彩體系的定制往往是重災區(qū)，最常見的做法是把顏色用色塊的方式一字排開，一排叫做品牌色，一排叫做輔助色，還有一排是灰度：

這種定義存在很大的風險，就跟菜譜只告訴你需要哪些食材，不告訴你配比一樣，做出來的菜大概率是一塌糊涂，難以下咽。所以如果你正在建設一套團隊協(xié)作級別的設計規(guī)范，務必要把“協(xié)作”當做最重要的事，用比例的方式來告訴你的隊友他們應該怎么做：

同理，其他的模塊，比如字號，間距，圖標，我都建議盡可能的“場景化”，讓設計規(guī)范有一定的代入感，這樣會大大提高設計的效能和品質(zhì)。

拋出這個問題，是因為經(jīng)常在不同的場合聽到“設計系統(tǒng)是扼殺設計師的創(chuàng)造力”之類的觀點；我個人是很難以認同這個的，對design system的最大誤解就是限制設計師的想象力。首先設計系統(tǒng)本身就是一個龐大且復雜的設計觀集合，需要調(diào)動整個團隊的想象力和創(chuàng)造力，最終達到一個統(tǒng)一共識才有可能被實施和執(zhí)行；其次，創(chuàng)造力并不全是設計個btn或者彈窗，真正能展示創(chuàng)造力的是像樂高一樣，通過零件（組件）拼裝成各種各樣的令人嘆為觀止的創(chuàng)意，那才是我理解的創(chuàng)造力：

另外從系統(tǒng)性思維上講，如果在不考慮資源的情況下，我倒是挺支持每一位設計師都自己去設計一套設計系統(tǒng)，因為在我們平時看來，2/3年經(jīng)驗的設計師和10年的設計師他們的產(chǎn)出物或許不會差太多，但對設計觀架構(gòu)的能力千差萬別，前者依賴感覺和直覺素養(yǎng)做事，后者更靠縝密的邏輯和推理來做事；我更喜歡后者多一些，并不是因為他們講起自己作品的時候聽起來多么高大上，而是因為依據(jù)推理方法可以時刻保持輸出的穩(wěn)定性。

我無意詆毀這兩大巨星，也無意內(nèi)卷，只是想說，做事，終究不能托付給“天賦”和“靈感”，勤奮和努力在一定程度上也許可以幫你飛到更高。

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

文章來源：站酷   作者：負能量補給站

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

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

一個優(yōu)秀的設計不僅要解決正確的問題，同時也是給用戶創(chuàng)造積極的情感。在過去，實體產(chǎn)品可以通過人類的五感來創(chuàng)造情感體驗，但對于如今的數(shù)字化產(chǎn)品來說，這似乎很難達到，因為只是在屏幕上進行枯燥的交互來獲取服務。

所以，數(shù)字化產(chǎn)品設計師們需要更深入的理解每種類型的情感，以及創(chuàng)造它們的心理學原則。

根據(jù)唐.諾曼（Don Norman）的研究，人們對一個物體產(chǎn)生情感有三個層次：本能、行為和反思。

• 本能層: “用戶想要的感覺是什么”

• 行為層: “用戶想要做什么”

• 反思層: “用戶想成為什么樣的人”

在第一層，用戶將通過視覺和與產(chǎn)品的交互設計中產(chǎn)生情緒。因此，這是UI設計師擅長發(fā)揮的地方。除了美學和基本的平面設計原則外，下面是我在工作中經(jīng)常應用到設計中的心理學原則。

格式塔原理

相似律

人類的眼睛傾向于將相似的元素連接成一個組，而大腦會認為這些元素都有相同的目的。 

因此，在設計具有相同功能和內(nèi)容的界面元素時，就應該要保持一致性。（彩云注：這也是為什么要保持一致性的理論解釋）

應用場景: 導航、控件、卡片、banner、內(nèi)容、分頁

連續(xù)律

人眼會將連續(xù)的元素視為一組。這一定律與對稱性和相似性非常相關(guān)，通過在一個序列上設計相似和重復的元素，我們可以將用戶的視線引導到我們想要的方向，它能使得閱讀信息更加連貫和清晰。

一點點的切割是在暗示用戶，這里還有更多的內(nèi)容等待你去查看。

應用場景: 菜單、列表、排序、輪播、服務進度

封閉律

當看到一幅不完整的圖像時，大腦會依賴之前的經(jīng)驗進行填充。 

這是圖形和logo設計中常用的規(guī)則，但是在產(chǎn)品設計中，我們也經(jīng)常把它用在圖標和Loading設計中。

應用: 圖標、loading、數(shù)據(jù)可視化

相近律

這是UI設計中的一個基本規(guī)則，因為人眼會將任何相鄰元素視為一個組。 

在設計的時候，我非常注重使用間距來將元素組合在一起。我通常使用大空間來分隔大內(nèi)容組，然后使用小空間來分隔大內(nèi)容組中的小內(nèi)容組。

應用場景: 導航、控件、卡片、banner、內(nèi)容、分頁

對稱律

我們的大腦喜歡看到對稱和平衡的東西。它是所有設計領(lǐng)域中使用最頻繁、最安全的法則。它幫助我們創(chuàng)造一種穩(wěn)定和秩序的感覺。 

當設計需要簡單和諧可視化的產(chǎn)品時，我經(jīng)常使用對稱律。當用戶需要關(guān)注重要的事情時，它也能讓他們感到更舒服。缺點是，如果過度使用，產(chǎn)品會變得乏味和單調(diào)。通常，我用標題或CTA按鈕來更好地強調(diào)和號召行動，打破畫面的單調(diào)格局。（彩云注：CTA是call to action的縮寫，中文通常翻譯為行為號召。可以理解為引導用戶點擊的行為都算是行為號召）

應用場景:控件，banner，強調(diào)內(nèi)容，產(chǎn)品顯示，清單，導航。

背景分割

這個定律是關(guān)于人眼傾向于注意脫離背景或組合的事物。 

我使用這個規(guī)則引導用戶的眼睛看到重要信息。它通常是一個卡片設計與一個輕投影在背景之上的層。此外，構(gòu)建整體也是應用這一規(guī)則的一種方式。

應用場景：卡片、內(nèi)容、列表、服務、摘要

共同命運法則

在同一方向上移動的元素被認為比固定的元素或在另一個方向上移動的元素更相關(guān)。這個規(guī)則應用幫助我們建立組和狀態(tài)之間的關(guān)系。 

在制作動畫時，我經(jīng)常更明確地使用這個規(guī)則。然而，我們?nèi)匀豢梢赃m用于許多不同的因素。

應用場景：導航/下拉菜單，折疊，手風琴，工具提示，產(chǎn)品滑塊，視差滾動和指示器。

2. 焦點原則

當我們看東西時，我們的眼睛傾向于首先關(guān)注最突出的元素。理解這種行為將幫助我們在設計中創(chuàng)建一個“錨點”，從而推動用戶查看我們的場景之后的內(nèi)容。

應用場景:內(nèi)容、落地頁、價格、產(chǎn)品頁、banner 

3. 雷斯多夫效應

（彩云注：維基百科解釋為指個人對學習材料或所見所聞的資訊，容易記住最特殊的部分的現(xiàn)象。例如：有一些參考書將重要的資料，以不同顏色或特殊的字體標示出來，就是利用雷斯多夫效應來加深讀者的印象。）

這也被稱為隔離效應，它表明人們傾向于注意并記住與其他部分不同的部分。這條規(guī)則很容易與焦點定律混淆。不同的是，應用此規(guī)則的元素通常是獨立的，沒有為用戶導航更多信息的額外功能。 

應用場景：定價表、促銷banner、不同會員介紹 

4. 本能反應

基于現(xiàn)實世界打造的視覺體驗。比如，當我們看一個視頻，每個高潮笑話時都有旁白跟著一起笑時，我們會更容易發(fā)笑（彩云注：想想《快樂大本營》）。用戶會喜歡我們的設計，如果它讓他們感覺良好和舒適。

（彩云注：這個理論的意思是說盡可能讓用戶產(chǎn)生沉浸感，把產(chǎn)品用到真實的環(huán)境上，比如大家平時使用的手機樣機，把設計的界面放到這些樣機中就能夠給人直觀的感受到應用后的效果，也是這個理論的運用）。 

應用場景：產(chǎn)品配圖、插圖、攝影 

5. 色彩心理學

有很多研究表明顏色對我們的潛意識有特別的影響。對顏色的看法也因性別、宗教和文化而異。這張彩色心理學海報就足夠了（彩云注：感興趣的可以自行翻譯研究下）。

此外，我們不要忘記從早期到現(xiàn)在一直在廣泛使用的顏色，這些顏色的使用更符合用戶習慣：

紅色：錯誤

綠色：成功

藍色：進行中

黃色：警告

6. 形狀心理學

就像顏色一樣，人類的潛意識對不同的形狀也有不同的反應。例如:

圓形、橢圓形：傳遞積極的信息，通常與社區(qū)或關(guān)系有關(guān)。

方形和三角形：帶有強烈的信息，通常與力量和穩(wěn)定聯(lián)系在一起。

豎線：代表強度、力量或攻擊性。

橫線：表示平靜、相等、安靜。

7. 雙碼理論

這一理論解釋了人類需要視覺和語言信息來盡可能快地處理信息。此外，人類是視覺動物，我們的大腦處理圖像的速度是處理文本的6萬倍。為了最大化設計的有效性，我們不應該去掉解釋性的文字。

（彩云注：根據(jù)這個理論，在做作品集時，就應該盡可能的多用視覺化語言，文字作為輔助，對于視覺設計師來說，能用圖表達的就盡量減少文字的比重。） 

 一個很明顯的例子就是導航欄。大多數(shù)新的應用或具有復雜功能的應用都同時設計了圖標和文字標簽。 

8. 并行設計

人類的眼睛傾向于看到平行因素比其他因素更相關(guān)。我經(jīng)常使用這一原則對同一屏幕內(nèi)的兩組不同內(nèi)容進行分類。最容易看到的例子可能是Facebook messenger界面，當帖子并排排列時，消息是平行的。 

9. 共同區(qū)域

這一原則類似于格式塔原則中的相似定律，但它并不是完全相似。共同區(qū)域原則是通過我們使用分隔線、形狀或顏色的方式創(chuàng)建的。 

如果一個界面需要用戶滾動更多來查看內(nèi)容，我們應該有一些方法來更清楚地劃分它，而不僅僅是使用間距。

應用場景：列表清單、信息流

10.掃描圖形

根據(jù)NNGroup UXPin等組織或團體的各種研究，兩種最常用的掃描模式是“F”和“Z”。

• F的使用最為廣泛，尤其是對于內(nèi)容量大的網(wǎng)站。

• Z用于不太注重文本的網(wǎng)站，通常強調(diào)在最后的號召行動。

一旦我們理解了如何使用這些模式，我們就可以選擇布局并有效地安排元素來實現(xiàn)我們的設計目標。 

總結(jié)

第一印象是最令人難忘的，積極的體驗可以在用戶和產(chǎn)品之間創(chuàng)造持久的關(guān)系。如果能讓用戶在一開始就喜歡上我們的設計，就能為我們的產(chǎn)品創(chuàng)造了一個很好的優(yōu)勢。

（彩云注：這些都是非?；A的理論，但基礎的厚度才是決定后期發(fā)展高度，我現(xiàn)在越來越能體會到這一點了，也希望大家能重視并加強基礎的學習。） 

 藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

文章來源：站酷   作者：彩云Sky

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

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

一、項目背景

RayData作為一個系列的可視化工具，內(nèi)容資產(chǎn)作為基礎的構(gòu)成發(fā)揮著重要的作用，在日益更新迭代的過程中，會發(fā)現(xiàn)每條產(chǎn)品線對圖表組件的需求都很繁重，無法避免地重復開發(fā)。通過開發(fā)通用型組件可以一定程度的解決問題，但是存在靈活性差，組件庫維護困難等問題，而且內(nèi)部產(chǎn)品圖表庫各自獨立，缺乏統(tǒng)一的設計語言。

通過對類似競品的調(diào)研，發(fā)現(xiàn)圖表做為承載數(shù)據(jù)信息的組件，本身只是工具，它的使用體驗優(yōu)劣還往往取決于業(yè)務需求、數(shù)據(jù)類型、圖表本身的視覺效果接受度等因素。而且圖表類型的豐富和靈活程度，使用的框架及響應時間，商業(yè)或免費和開源狀態(tài)也都是評判標準之一。

無論是小而美的個人項目還是大數(shù)據(jù)可視交互管理系統(tǒng)，項目生命周期的前四分之三階段，進行的緩慢糾結(jié)，充斥著大量需求變更，新想法的臨時加入。當多個項目同時展開，圖表組件效果是否靈活多變、復用性的高低對制作人員生產(chǎn)力、客戶方耐力、項目最終達成時雙方的消耗力有極大考驗。

通過對類似競品的調(diào)研，發(fā)現(xiàn)常見的可視化圖表庫都存在自身的局限性，體量大，功能冗余，更新緩慢。最終促成了我們從兩個維度入手，提煉關(guān)鍵詞，簡化并轉(zhuǎn)化成圖表庫系統(tǒng)的功能點。

二、設計方案

圖表存在很多分類方式，基于形狀命名、作者命名、抽象概念命名和數(shù)據(jù)結(jié)構(gòu)命名等。

為了更好的幫助使用者快速定位，我們簡化了圖表大分類，依據(jù)人對形狀輪廓最初的感知，調(diào)動直觀的感受來進行分類和命名。

整個圖表庫的設計層包含顯性和隱性的兩種，顯性的規(guī)范面向用戶，隱性的規(guī)范面向開發(fā)。
通過調(diào)研常見的工具類產(chǎn)品，結(jié)合對產(chǎn)品易用性的理解，我們把產(chǎn)品的顏色方案提出來單獨定義一個全局的顏色方案，以便一套配色貫穿整個項目使用，然后對通用的設置和個性化設置分開設計。

可視化的組合來源有四種：視覺暗示、坐標系、標尺以及背景信息。
其中視覺暗示是比較重要的組成，以直角坐標系結(jié)構(gòu)為例，對大分類下的參數(shù)進行深入挖掘。

1. 通用設置
   

 - 對圖表表現(xiàn)形式的考慮

從設計的角度出發(fā)，我們希望賦予圖表樣式更多的可能性，開放高度自定義的調(diào)節(jié)參數(shù)。

 - 數(shù)據(jù)強調(diào)的表達

通常用戶在初次瀏覽圖表時會把注意力放在圖形的差異化上，比如突出的顏色、突出的圖形，但并沒有及時將所有的數(shù)值聯(lián)系起來，之后才會進行比較，然后再看整體、分布和多變量關(guān)系。在顏色和屬性系統(tǒng)中單獨設置最大值、最小值的顏色和樣式，可以使得圖表展示信息的信息維度更高一層。

2. 顏色配置方案

數(shù)據(jù)可視化是基于物理世界反饋的信息，通過用各種視覺變量（例如圖形、顏色、維度）把數(shù)據(jù)進行編碼、再現(xiàn)的過程。
色彩是數(shù)據(jù)可視化中濫用和忽視最嚴重的變量之一，也是所有視覺變量中最富于變化的一種。

 - 顏色方案的細粒度覆蓋

信息圖表除圖形外感官最明顯的就是顏色，為了能夠達到圖表設計的高度自定義，色彩的搭配、自定義的程度，每個圖元都有對應的顏色設置。

 - 對圖表質(zhì)感的考慮

從設計的角度出發(fā)，嘗試在顏色系統(tǒng)中加入陰影、發(fā)光、全局陰影等結(jié)構(gòu)，進一步還原設計的圖形處理習慣，豐富圖表的表達。

 - 預置顏色方案

可視化項目的配色一般來源于實際需求和3D場景效果的搭配，通常是不能預判配色的。
在這種情況下如果需要幫助項目的快速搭建，預置方案就要做到覆蓋面廣，適應性強，控制取色范圍，由此提出以下原則。

3. 參數(shù)方案

 - 布局方式

制定規(guī)范時候我們確定了默認的布局方式，綜合實際使用，以柱狀圖為例，寬度滑塊的最大對應100%寬度，圖形撐滿，更貼近使用者的直覺，另外考慮到多端融合，涉及到一些放大預覽的功能，默認選用百分比布局更合理。

 - 數(shù)據(jù)文本位置

在實際配置圖表時候，圖形和文字的位置關(guān)系千變?nèi)f化，為了應對這種情況我們引入了文字基線位置和相對位置作為位置參照。使用中配合偏移量調(diào)節(jié)基本能覆蓋所有的情況。

 - 圖表代碼

為了應對項目靈活配置的需求，我們把圖表編輯和Config參數(shù)結(jié)合，可視化控制生成的圖表Config參數(shù)，直接導出到項目使用。

4. 交互適配優(yōu)化

 - 不同終端hover交互效果

 - 不同終端預覽交互效果

5. 動效規(guī)范

除了勻速動畫，為了達成更自然的動態(tài)效果，引入緩入緩出速度曲線，同時為了達成更豐富的表達，增加了一條簡潔的回彈曲線

動效是圖表數(shù)據(jù)表達的一個重要構(gòu)成，針對圖表的動效，通過總結(jié)圖元的運動方式，結(jié)合Material Design的一些處理方式，整理了一套圖表元素動效規(guī)范集合。

三、設計執(zhí)行

1. 編輯效果演示

針對缺乏靜態(tài)數(shù)據(jù)等真實數(shù)據(jù)源，檢驗生成圖表的視覺效果的問題，我們?yōu)橛脩籼峁┝酥付ǚ秶S機數(shù)生成功能，可以快速生成與應用項目數(shù)據(jù)相類似的效果。
顏色配置方案能在同一項目中起到控制整個顏色風格的作用，可以快速應用到圖表上。

2. 圖表自定義調(diào)節(jié)項

圖表庫在項目中的應用

 藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

文章來源：站酷   作者:RayData實驗室

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

你應清楚的是

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

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

簡潔又靈活的表格

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

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

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

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

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

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

同一組數(shù)據(jù)的不同寬度顯示

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

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

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

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

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

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

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

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

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

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

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

帶有識別功能的輸入框：

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

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

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

友好舒適的彈窗

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

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

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

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

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

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

總結(jié)：

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

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

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

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

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

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

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

圖表視覺層級

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

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

1. 底層元素設計

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

2. 中層元素設計

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

3. 頂層元素設計

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

4. 最終效果

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

圖表排版設計

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

1. 圖表尺寸

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

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

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

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

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

2. 坐標軸

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

第一是橫縱坐標軸的刻度出現(xiàn)過密情況。

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

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

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

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

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

3. 圖例

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

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

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

數(shù)據(jù)色板設計

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

1. 辨識度

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

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

2. 統(tǒng)一性

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

3. 顏色量化與工具

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

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

結(jié)語

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

附：色板及 HCL 工具

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

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

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

圖表是數(shù)據(jù)可視化中最常用的一種表現(xiàn)形式，一定要吃透它。

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

什么是圖表

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

英文叫法：Chart。

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

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

圖表的構(gòu)成

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

圖表元素解析

1. 標題

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

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

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

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

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

2. 圖例

圖例的組成

顏色、名稱、數(shù)值、單位。

圖例的展現(xiàn)形式

圓形、開關(guān)、矩形、鼓包線、實線、虛線。

圖例的位置

從左至右、從上至下。

圖例的作用

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

圖例的顏色選擇

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

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

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

圖例過多時如何展示

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

共用圖例

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

圖例省略

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

圖例名稱限制

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

3. 坐標軸

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

刻度值代表的意義

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

坐標軸使用規(guī)則

是否帶單位：

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

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

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

刻度值過多時如何顯示：

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

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

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

刻度的線朝外。

4. 數(shù)據(jù)展示

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

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

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

5. 網(wǎng)格線

網(wǎng)格線的作用

呼應坐標軸，美觀度。

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

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

網(wǎng)格線使用實線居多，盡量不用虛線。

使用場景

橫、縱、橫縱結(jié)合、無網(wǎng)格線。

6. 提示信息

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

7. 水位線

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

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

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

8. 時間軸

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

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

圖表使用建議

1. 折線圖 line

定義

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

使用場景

常用于觀察一段時間內(nèi)數(shù)據(jù)波動的浮動變化，比如：一天內(nèi)內(nèi)存的使用情況。

使用建議

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

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

數(shù)據(jù)拐點要平滑，不要太鋒利。

2. 面積圖 area

定義

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

使用場景

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

使用建議

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

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

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

3. 柱狀圖 bar

 定義

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

使用場景

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

使用建議

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

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

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

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

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

• hover 的時候出現(xiàn)數(shù)值；
• 數(shù)值默認在柱子上顯示；
• 數(shù)值在柱子頂部 / 右側(cè)顯示。

4. 餅圖 pie

定義

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

使用場景

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

使用建議

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

5. 環(huán)形圖

定義

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

使用場景

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

使用建議

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

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

6. 堆疊面積圖

定義

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

使用場景

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

使用建議

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

7. 堆疊柱狀圖

定義

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

使用場景

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

使用建議

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

8. 非常用圖表

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

雷達圖，散點圖，K 線圖，盒須圖，熱力圖，旭日圖，?；鶊D，樹圖，漏斗圖，儀表盤。

常用的圖表開源網(wǎng)站

1. echartsecharts

網(wǎng)站鏈接：https://echarts.apache.org/zh/index.html

2. highcharts

網(wǎng)站鏈接：https://www.highcharts.com.cn/

3. antv

網(wǎng)站鏈接：https://antv-g2.gitee.io/zh/examples/gallery

總結(jié)

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

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

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

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

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

用戶輸入設計的6個目標

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

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

2. 減少輸入量

3. 設計有吸引力的數(shù)據(jù)輸入屏幕

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

5. 設計所需的輸入文檔

6. 制定有效的輸入控制

模式的概述

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

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

1.智能鍵盤

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

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

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

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

2.默認值&自動完成

Skype, Flightboard

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

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

另一種實現(xiàn)方法是保存用戶輸入的最后一項，并在用戶再次輸入或搜索時顯示這些最近使用過的項。例如，F(xiàn)lightboard在搜索框下面列出了以前使用過的位置，以避免用戶再次輸入。大多數(shù)地圖或?qū)Ш綉贸绦蛞膊捎眠@種模式，在搜索方向時自動輸入用戶當前位置，為用戶節(jié)省幾次點擊，因為這是最常見的情況。

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

Wunderlist

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

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

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

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

4.操作欄

Facebook Paper, Behance

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

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

5.社交賬號登錄

Beats Music, Flipboard

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

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

6.巨大按鈕

Tinder, Shazam

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

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

7.滑動操作

Carousel

問題
用戶希望關(guān)注特定的內(nèi)容。

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

8.通知

LinkedIn, Facebook

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

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

9.顯性控件

Secret

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

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

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

10.可擴展輸入

YouTube

問題
用戶希望關(guān)注內(nèi)容，而不是犧牲屏幕空間給控件。

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

11.撤銷

Gmail, Chrome

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

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

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

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

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

開篇

• 寬度單位我是用百分比還是px？還是rem？區(qū)別是什么？

• 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、設備像素、css像素？瀏覽器窗口大小和設備大小和分辨率大小區(qū)是什么區(qū)別？

• 什么是響應式網(wǎng)站，自適應又是什么？兩者有何區(qū)別和聯(lián)系？

• 百分比寬度布局和流式布局和前者的關(guān)系是什么？

• 既然響應式這么流行，為何淘寶、京東等沒有去做，而是單獨開發(fā)了一個移動端版？這里面有那些坑需要避開？

歷史長廊

在早期，硬件設備落后，網(wǎng)頁使用的是絕對靜態(tài)布局為主，絕對固定寬度的布局被稱為是靜態(tài)布局（StaticLayout），也有叫固定布局（Fixed Layout）。

后隨時代變遷，技術(shù)發(fā)展。因瀏覽器的增多，開發(fā)者們忙于兼容各種瀏覽器。在這個期間，實際已經(jīng)有了針對各設備適配的解決方案，只是未成為主流，這種新布局方式叫自適應布局（Adaptive Web Design，簡稱AWD）。

在當時，大多指的就是寬度自適應布局。在這種新思想下，又出現(xiàn)了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。

在當時，大家都還沒有響應式布局的概念，但此時出現(xiàn)了一個新的詞--漸進增強。漸進增強出現(xiàn)后，另一個詞優(yōu)雅降級也隨之出現(xiàn)了。這里只是舉個典型的例子：gmail和qqmail。這兩個都是百分比寬度布局，都屬于自適應布局，但有區(qū)別。

qqmail就是css hack的完美體現(xiàn)，你用任何一個瀏覽器，幾乎可以看到同一個樣子的郵箱，為的是用戶體驗統(tǒng)一。gmail則使用了漸進增強，你的瀏覽器越新越強，你看到的效果就越好，為的是用戶體驗增強。再后來，Google發(fā)布了Android，移動互聯(lián)網(wǎng)爆發(fā)，html5標準發(fā)布。

互聯(lián)網(wǎng)大戰(zhàn)從PC打到了手機。手機雖然屏幕變小了，但是卻提供了更豐富的功能，用戶要求不斷提高，網(wǎng)站更加看重的是用戶體驗了，所以，谷歌式的漸進增強被廣泛認可，結(jié)合自適應的思想，出現(xiàn)了響應式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。

描述響應式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應不同設備。

現(xiàn)如今，為何需要考慮多設備的兼顧呢，依然是因為時代發(fā)展與生活方式的變遷：

• 即便是PC或Mac用戶，有查顯示只有一半的人會將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預知；

• 臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設備正在不斷增加，“主流設備”的概念正在消失；

• 屏幕分辨率正飛速發(fā)展，同一張圖片在不同設備上看起來，大小可能天差地別。

  結(jié)合自身產(chǎn)品用戶訪問瀏覽器分辨率

• 鼠標、觸屏、筆、攝像頭手勢……不可預期的操控方式正在不斷出現(xiàn)。

因此我們需要在了解基本布局方式的特征下，選擇適合自身產(chǎn)品的布局實現(xiàn)方式。

布局方式對比

靜態(tài)式、自適應、流體式、響應式布局，A+R混合布局的特點對比如下

靜態(tài)式布局：

窗口縮小后內(nèi)容被遮擋時，拖動滾動條顯示布局。不管在哪種設備，哪種瀏覽器上瀏覽都是一個樣。移動設備上則顯示太小或不全。

自適應布局：

用自適應技術(shù)(Adaptive)我們可以開發(fā)和提供不同的布局來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。

分別為不同的屏幕分辨率設備設計不同的樣式布局，相當于多個靜態(tài)布局組成的一個系列合集，每個靜態(tài)布局對應一個屏幕分辨率范圍，頁面通過百分比自動適配設備屏幕分辨率和可視窗口大小，當可視窗口改變時，不會出現(xiàn)橫向滾動條，UI，圖片，文字會自動縮放，元素內(nèi)容、布局、交互方式基本不變。

彈性布局：

以百分比作為頁面的基本單位，可以適應一定范圍內(nèi)所有尺寸的設備屏幕及瀏覽器寬度，并能完美利用有效空間展現(xiàn)最佳效果。

流體式布局：

屬于自適應的一個子集，也是通過百分比自動適配設備屏幕分辨率和可視窗口大小，不同于百分比自適應的是隨著窗口大小的改變，頁面的布局會發(fā)生小的變化，可以進行適配調(diào)整，這個正好與自適應相補。

響應式布局：

如果從廣義上講，響應式布局實際上就是更好、更機智、更靈活的去實現(xiàn)自適應，他們都算是一種彈性布局。再通俗點講響應式重在于「響應」它會隨著設備屬性（如寬高）的變化。

頁面的設計和開發(fā)應當根據(jù)用戶行為以及設備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調(diào)整。具體的實踐方式由多方面組成，包括彈性網(wǎng)格和刪格、布局、圖片、css media query的使用等。

狹義上講，響應式網(wǎng)頁設計指的是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。

A+R混合模型布局

R和A上的區(qū)別

當響應式設計在基于預定義斷點之上用CSS或者JS調(diào)整布局和內(nèi)容。調(diào)整方法提供基于用戶代理和設備類型的預結(jié)構(gòu)化模版。

他們之間主要的區(qū)別是DOM結(jié)構(gòu)，當采用響應式思維開發(fā)時，HTML代碼在各種情況下都會一樣（除非你用JS移除某些DOM節(jié)點），而在自適應開發(fā)中我們可能會有不一樣的代碼結(jié)構(gòu)和體驗。

R采用流體＋斷點，在斷點之間，頁面依然會隨窗口大小自動縮放（通過fluid grid），直到遇到斷點改變界面樣式布局甚至內(nèi)容。R一般來說需要在網(wǎng)頁設計初期就開始（通常采用mobile first策略），所以舊的網(wǎng)站要做RWD很可能要完全重建。

A只在針對幾種分辨率（如320，480，760，960，1200，1600px）進行優(yōu)化，在斷點之間的自動過渡比較少。而A則采用保留現(xiàn)有桌面網(wǎng)站（desktop version）而對于更小的分辨率做針對性的優(yōu)化（適應），減小重構(gòu)的成本。

兩種設計思維都是有效的，需衡量在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發(fā)web應用時經(jīng)常會用到響應式設計，例如通過自適應開發(fā)來構(gòu)建定制化體驗。

兩種方法各有利弊，但是如果同時使用它們到底會得到什么呢？A+R模型結(jié)合了基于單個主要臨界點的自適應和響應式方法。

混合式布局就是為不同終端設備的屏幕分辨率定義布局（適配各種尺寸的PC、手機、穿戴設備等等），在每個布局中，頁面元素隨著窗口調(diào)整而自動適配，混合了百分比、像素為基本單位的組合方式?？梢园鸦旌鲜讲季挚醋魇菑椥圆季帧⒆赃m應布局的融合。

自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現(xiàn)成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應式布局實現(xiàn)方式。

很多時候，單一方式的布局響應無法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點內(nèi)（發(fā)生布局改變的臨界點稱之為斷點，后面內(nèi)容會講到）保持統(tǒng)一邏輯。

否則頁面實現(xiàn)太過復雜也會影響整體體驗和頁面性能。一般通欄、等分結(jié)構(gòu)的布局適合采用彈性布局方式，非等分的多欄結(jié)構(gòu)布局則需要采用混合布局的實現(xiàn)方式。

選型

如何考慮實踐過程中的判斷呢。一是看應用場景，二是看如何設計“響應式”方案。簡單、輕量的頁面直接用media query實現(xiàn)響應性就很好。比如blog、小型企業(yè)站之類?，F(xiàn)在的CSS框架基本都具備響應性。

但請注意響應式不僅僅是響應式布局。對于大型站簡單用media query是遠遠不夠的。于是在同一個controller層上，識別UA，渲染不同版本的模板，組合相應的靜態(tài)資源。這也算是響應式。開發(fā)及維護成本明顯提高。

當各個版本間的差異很大時，維護成本很可能會大到無法接受。即便分開做，架構(gòu)上也要調(diào)整，后端服務化，應用層app化。

根據(jù)不同公司的技術(shù)特點，調(diào)整的成本也難講是否可行。對于大型站，分開做更清晰，同時用響應式組件解決復用、功能同步的問題?？傊?，根據(jù)場景響應式可以從各種層面，各種粒度上做。這是現(xiàn)代web開發(fā)的特點。

建議開發(fā)一套響應式電腦網(wǎng)站（過渡到平板端，不過渡到手機端）和開發(fā)一套響應式手機端網(wǎng)站（過渡到平板端以下的尺寸，不過渡到平板端）響應式布局有可能造成冗余的代碼較多，對研發(fā)的要求也更高，比如如何更好地讓圖片，適配，UI動畫自適應各種布局。

大站還是要考慮數(shù)據(jù)計算和承載的問題，會對桌面和移動端輸出不同數(shù)據(jù)，減輕壓力。

實踐與技巧

首先，我們需要了解幾種分辨率的差別。

ps：原生應用可查詢橫縱兩個方向的像素密度，通常瀏覽器可查詢1個系統(tǒng)像素對應多少物理像素。而設計角度通常需要參考的是所獲取的系統(tǒng)分辨率

以一個SaaS類后臺產(chǎn)品為例，對于基本流量來自Web端網(wǎng)頁的產(chǎn)品而言，需要了解當下的瀏覽器分辨率現(xiàn)狀 Web端不同屏幕分辨率占比情況，數(shù)據(jù)來源百度統(tǒng)計，如圖所示：

如上所述，選擇適配方式時，設計目標為：區(qū)分web與pad端可共享的設計布局大于手機端，且產(chǎn)品規(guī)劃上web端為主流量來源，pad端屬于短期兼顧。考慮技術(shù)維護成本與開發(fā)成本的平衡，于是判斷需要選擇A+R模式來完成產(chǎn)品的跨端設計。

自適應（A）方法能讓我們在不同的設備上有不同的體驗、內(nèi)容甚至是功能。如將960px作為主要的自適應臨界點，根據(jù)全局統(tǒng)計信息定義，我們會得到一些相似處：

• 左側(cè)的可視區(qū)代表整個屏幕小于960px時的具體布局和內(nèi)容

• 右側(cè)的可視區(qū)代表整個屏幕大于等于960px時的另一種布局

  
  

在使用響應式（R）技術(shù)時，我們可以利用主要臨界點創(chuàng)建兩個互不相同的體驗情景，每種體驗里，我們都可以在可用空間內(nèi)定義二級臨界點去調(diào)整布局。

通過結(jié)合自適應和響應的方法，我們得到A+R模型。利用自適應技術(shù)，我們將致力于體驗和功能，作出兩種不同的情景設計。使用響應式組件，我們可以處理上下文內(nèi)的UI組件和布局。

這種設計方法要求設計師真正了解他們想要提供的體驗，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結(jié)構(gòu)完全不同的小型移動設備上運行的大型APP。就像你看到的，你的產(chǎn)品將具有很強的靈活性，但同時也很復雜。

因為你要處理不同的代碼庫和環(huán)境（非強制性）,Twitter、Facebook和Github將此模式應用在他們的移動網(wǎng)站上。如果你在移動設備上瀏覽這些網(wǎng)站，則可以根據(jù)移動用戶的期望來檢驗它們是如何改變的用戶體驗的。

其他輔助手段

刪格

柵格系統(tǒng)可以幫助我們設計，但卻不能保證我們的設計。它有多種可能的用途，并且每個設計師都可以尋找適合其個人風格的解決方案。對于簡化復雜的響應式布局規(guī)則而言，這是一項十分有效的輔助手段。

1. 列和槽（Columns and Gutters）列（Column）用于對齊內(nèi)容。其中的槽（Gutter）是指相鄰列之間的空間，把控頁面留白,有助于分隔內(nèi)容。

2. 頁面邊距（Side Margins）頁邊距是指內(nèi)容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個屏幕尺寸的最小呼吸空間。

3，用于組成柵格的列數(shù)稱為列結(jié)構(gòu)。8、12、16和20是響應式布局中最常見的幾種列結(jié)構(gòu)。而這取決于我們對產(chǎn)品的設計要求。12列結(jié)構(gòu)是相對靈活的。它可以進一步細分，將內(nèi)容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設計系統(tǒng)采用來24列的形式，如Ant-D

4，斷點是指屏幕尺寸的特定范圍，列結(jié)構(gòu)、列寬、槽寬和邊距都取決于斷點。在這個范圍內(nèi)，布局會根據(jù)可用的屏幕尺寸重新調(diào)整，以獲得最佳的布局視圖。

如果較小的屏幕有足夠的可用空間容納內(nèi)容，則列將按比例縮小。如果一列的內(nèi)容無法在較小屏幕上顯示，該列將垂直放置圖文內(nèi)容。

5，網(wǎng)格規(guī)則，列跟槽的寬度是以網(wǎng)格作為基本單位來做增減，所以應該先定義好柵格的原子單位，“網(wǎng)紅款”8點網(wǎng)格指的是設計頁面時，也應該遵循8點規(guī)律。值得注意的是，列跟槽的值盡量取8的倍數(shù)，但不是非得是8的倍數(shù)。

產(chǎn)品中各類元素應該遵循這個倍數(shù)原則（圖標、組件大小等），不同的設計系統(tǒng)根據(jù)自身需求，設定這個規(guī)則。例如在Material Design中使用的是2X網(wǎng)格。

6.流體柵格與混合刪格

流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內(nèi)容寬度，根據(jù)屏幕大小變化在流體柵格中，列可以增長或收縮以適應可用空間。

混合柵格既有不同的寬度，也有固定寬度。在現(xiàn)代布局中，一些元素超出了網(wǎng)格邊緣，與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。

如果內(nèi)容寬度大于可用的屏幕尺寸，那么一個固定柵格就會轉(zhuǎn)變成一個適應屏幕可用空間的流動柵格，以充分適應內(nèi)容。

結(jié)語

設計需在技術(shù)方案前介入，根據(jù)你的產(chǎn)品特點，進行設計方案評估，可借助的手段有刪格，網(wǎng)格規(guī)則等，設計斷點規(guī)則時，需關(guān)注設備的常見系統(tǒng)分辨率。

移動和桌面設計的差別遠不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應式設計來解決的。事實上，你可以認為如果一種設計不能兼顧兩種平臺的主要差別，就不能算是合格的響應式設計。

但是，如果確實想要處理好平臺間的所有差異，我們就回到了原點：進行兩種不同的設計或者使用A+R的模型，在尋求合適的過程中，關(guān)注技術(shù)的革新。

A與B不是硬幣的正反面，它們?yōu)榱私鉀Q同一個問題而生，是同一種思想的延伸。

文章來源：站酷 作者：酷家樂

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