一.什么是阻力 ？

在百度百科的定義中，阻力是物體在流體中相對運動所產(chǎn)生與運動方向相反的力。自然界中存在許多類型的阻力，比如空氣阻力、水流阻力，各種各樣的生物因此進(jìn)化出相應(yīng)的身體特征去減少阻力。如下圖所示，擁有流線型外形的海豚掌握獨特的減少湍流摩擦阻力的游泳方法，這使其游速在某些條件下可以達(dá)到每小時 70-100km，遠(yuǎn)超現(xiàn)代潛艇的航速。

人類為了擺脫自然界設(shè)計的阻力，做了許許多多的努力。采用纖維模仿鯊魚皮膚結(jié)構(gòu)的鯊魚皮泳衣能夠降低 30% 的水阻，提高人類游泳速度。汽車的流線型設(shè)計減小渦旋作用或避免渦旋的形成大大地減低了空氣對其的阻力。

在人類社會，人為設(shè)計的阻力也無時無刻不在。為了公共安全設(shè)立的安檢、為了交通安全而嚴(yán)格控制不同區(qū)域的最高車速、為了社會安定而設(shè)立的法律，諸如此類的阻力都無時無刻規(guī)范著人類的行為。

類似地，對于互聯(lián)網(wǎng)產(chǎn)品，用戶在使用時也會被刻意地或非刻意地設(shè)計出的阻力所影響，這些阻力會阻礙用戶完成目標(biāo)。

二、為什么會產(chǎn)生阻力 ？

在認(rèn)知心理學(xué)中，我們接受外部世界的刺激之后做出反應(yīng)的過程中，涉及到我們?nèi)绾胃兄?、學(xué)習(xí)、推理、記憶，以及如何把意圖轉(zhuǎn)化為行為。人類數(shù)十萬年的進(jìn)化過程中，對于感知、學(xué)習(xí)、推理、記憶的神經(jīng)結(jié)構(gòu)已經(jīng)初步進(jìn)化形成，大多數(shù)的人保持著相似的認(rèn)知能力和認(rèn)知缺陷。用戶在使用產(chǎn)品時感受到的阻力往往來自于設(shè)計師未能充分了解用戶的認(rèn)知能力，從而設(shè)計出容易導(dǎo)致用戶犯下認(rèn)知性錯誤的產(chǎn)品。以下常見的人類的認(rèn)知特點影響了我們感知和獲取信息的過程。

2.1 傾向于通過經(jīng)驗、環(huán)境和目標(biāo)進(jìn)行判斷

對于一件新事物，我們感知它的方式通常受到三個因素影響：過往的經(jīng)驗、周圍的環(huán)境、當(dāng)下的目標(biāo)。我們通過過往的經(jīng)驗將已知概念套用在新事物上，幫助我們理解。一旦產(chǎn)品界面中與用戶的經(jīng)驗預(yù)期相悖，就會產(chǎn)生阻力。

2.2 缺乏耐心和思考

面對一個我們從未使用過的機(jī)器設(shè)備時，我們很少愿意耐心閱讀完它的說明書再去使用它，而是自信滿滿的希望通過簡單的擺弄和熟悉就能夠了解它的使用方法?！饵c石成金：訪客至上的Web和移動可用性設(shè)計秘笈》一書中的第一條可用性原則就是“Don't let me think（不要讓我思考）”，作者認(rèn)為設(shè)計者在設(shè)計一個界面時，最好能夠做到讓界面清晰易懂、一目了然，讓用戶能夠不必過多的思考就能夠使用它，幫助用戶跨越思考過程，讓用戶能夠輕松做出復(fù)雜的決策，減少認(rèn)知壓力。

2.3 心流易被打斷

我們可能都經(jīng)歷過心流狀態(tài)，當(dāng)我們在極度專注地做某件事時完全沉浸其中并且非常高效，但如果意外地被打擾，會讓我們很煩躁。

有關(guān)任務(wù)執(zhí)行的研究文獻(xiàn)中就曾經(jīng)提到過：中斷會導(dǎo)致錯誤，而且人們?nèi)菀走z忘之前的位置或狀態(tài)。當(dāng)一個任務(wù)打斷了另外一個，重新啟動需要的時間會讓每個任務(wù)都變慢。

打擾我們的事情可能是工作時突然的一聲噪聲，也可能是在使用軟件時冗余的彈窗、過多的頁面跳轉(zhuǎn)、無意的誤操作等等。界面中過多的干擾會打斷用戶的心流，造成用戶的使用阻力。

2.4 無法擺脫的認(rèn)知負(fù)荷

認(rèn)知負(fù)荷理論（Cognitive Load Theory）是在 20 世紀(jì) 80 年代由澳大利亞教育學(xué)家 J.Sweller 提出，由于對人類學(xué)習(xí)認(rèn)知和教學(xué)指導(dǎo)提供了新的理論框架，該理論在教育領(lǐng)域成為重要的心理學(xué)指導(dǎo)理論，在交互設(shè)計領(lǐng)域也存在著借鑒意義，理論的主要內(nèi)容如下：

認(rèn)知負(fù)荷是指外部信息進(jìn)入個體短期記憶后中后所需要的注意力資源和記憶容量，被分類為內(nèi)在認(rèn)知負(fù)荷、外部認(rèn)知負(fù)荷以及相關(guān)認(rèn)知負(fù)荷（如下圖）。當(dāng)任務(wù)需要消耗的注意力和記憶容量超出學(xué)習(xí)者的極限時，就會導(dǎo)致認(rèn)知超負(fù)荷，超出的部分將不會被學(xué)習(xí)者有效獲取。

不同的呈現(xiàn)形式形成的外部認(rèn)知負(fù)荷是不同的，一般來說，文字>圖式>視聽。因此，為了避免認(rèn)知超負(fù)荷給用戶帶來的使用阻力，我們應(yīng)該設(shè)法簡化信息來降低內(nèi)在認(rèn)知負(fù)荷，通過更合理的信息可視化形式和信息架構(gòu)構(gòu)建降低外部認(rèn)知負(fù)荷。

三、產(chǎn)品設(shè)計中的阻力應(yīng)用

如下圖，基于上述的用戶的認(rèn)知能力分析，合理的降低阻力，能夠讓用戶在使用產(chǎn)品時效率更高，成本更低。在提高交互效率方面我們可以通過減少操作步驟、提高傳達(dá)效率、減少頁面跳轉(zhuǎn)來達(dá)到目的。在降低交互成本方面，我們可以通過降低操作難度、減少用戶思考來實現(xiàn),同時通過降低認(rèn)知負(fù)荷減少用戶的認(rèn)知負(fù)擔(dān)。阻力并不是越小越好，在某些場景下，我們需要增加阻力和提高用戶的使用成本，進(jìn)而提升用戶體驗或達(dá)成產(chǎn)品目標(biāo)。通過提高防錯能力、提供安全感和營造儀式感來優(yōu)化體驗。通過篩選用戶和內(nèi)容把控社區(qū)生態(tài)。通過功能引導(dǎo)和歧視性策略來迎合商業(yè)目的。

四、降低阻力的應(yīng)用

4.1 提高交互效率

4.1.1 減少操作步驟

類似于一個倒金字塔結(jié)構(gòu)，交互流程中的每一個步驟都伴隨著流失。通過以下減少操作步驟的方法，可以降低用戶行為路徑中的阻力。

使用合適的控件

不同的控件有著不同的應(yīng)用場景，控件的選用不當(dāng)會形成多余的操作步驟。我們需要深入了解每個控件的屬性和應(yīng)用場景才能夠做到靈活運用。

舉一個例子，在微信的朋友圈發(fā)布頁中編輯內(nèi)容后點擊取消后，彈出警告框顯示“不保留”和“保留”按鈕，但是考慮到用戶可能會誤操作點擊取消按鈕的場景，此處應(yīng)增加一個按鈕讓用戶回到編輯狀態(tài)，否則不管用戶選擇哪個選項都會退出發(fā)布頁重新進(jìn)入，從而使用戶多了一步操作。下廚房的發(fā)布頁就考慮到了這個問題，使用了默認(rèn)有返回操作的上拉菜單控件作為提示方式，即使在誤操作場景下也不會增加操作步驟。

控件方面這里就不展開講了，大家可以通過閱讀 iOS 人機(jī)交互指南和安卓 Material Design 規(guī)范來深入學(xué)習(xí)。

復(fù)雜任務(wù)移交系統(tǒng)

任務(wù)都存在其復(fù)雜性，當(dāng)我們無法簡化它時，可以考慮將復(fù)雜性移交給系統(tǒng)，使其代替用戶操作。

比如我們可以利用用戶已經(jīng)在產(chǎn)品中填寫過的信息來幫助用戶填寫相關(guān)信息。例如通過身份證號碼自動識別出用戶的生日和性別，自動為用戶填充。 

預(yù)判用戶行為

預(yù)判用戶行為分為兩種方式，第一種是在用戶操作前，預(yù)判可能發(fā)生的用戶行為，以建議的形式為用戶提供選擇，縮短用戶行為路徑。

比如拍攝照片后，打開微信聊天頁面，微信會以氣泡的形式詢問用戶是否要發(fā)送圖片，如下圖。

第二種是由于用戶的認(rèn)知錯誤進(jìn)行了非目標(biāo)操作時，系統(tǒng)提前識別引導(dǎo)用戶進(jìn)入正確的流程并完成任務(wù)。

比如支付寶聊天界面中，很多用戶誤以為可以直接通過輸入框輸入金額數(shù)后點擊發(fā)送就可以轉(zhuǎn)賬，但實際上只會發(fā)出一條消息。支付寶貼心地在用戶輸入數(shù)字后外顯轉(zhuǎn)賬功能，從而避免了用戶的錯誤操作，如下圖。

優(yōu)化頁面流程

不合理的信息架構(gòu)和流程設(shè)計會增加用戶的操作步驟。比如最新 iOS13 的信息應(yīng)用，將 iOS12 原有的使用分段控件整合信息的方式改為了 iOS13 的列表形式，導(dǎo)致從一級頁面（A）進(jìn)入到二級頁面（B或C）后，如果想切換信息列表還需要返回到一級頁面再次選擇，增加了一步操作。iOS13 的這種改動可能考慮到用戶切換信息列表的頻率沒有那么高，希望用戶專注于當(dāng)前的信息列表，但是我這樣的用戶經(jīng)常查看過濾信息列表，擔(dān)心是否有重要信息被屏蔽，多出的一步操作還是給我?guī)聿恍〉氖褂米枇Α?

淘寶訂單模塊的做法就比較合理，從一級頁面（A）進(jìn)入二級的任何頁面（B 或 C）后，二級頁面可以在標(biāo)簽欄互相切換，而不需要退回一級頁面再次選擇二級頁面，從而節(jié)省了一步操作。

快捷方式

快捷方式有跳轉(zhuǎn)類和功能類兩種，跳轉(zhuǎn)類的快捷方式可以幫助用戶快速觸達(dá)或回退到某個頁面。

比如我們可以通過長按 iOS 應(yīng)用圖標(biāo)調(diào)出功能的快捷方式使用，減少中間的操作步驟。淘寶可以在大多數(shù)頁面通過快捷方式快速回退到首頁。

功能類的快捷方式提供給用戶更快捷的方式完成復(fù)雜或較多的任務(wù)，比如嗶哩嗶哩的一鍵三連。被蘋果收購的應(yīng)用快捷指令可以自定義系統(tǒng)以及第三方應(yīng)用的復(fù)雜任務(wù)，并且在下次一鍵即可完成。

4.1.2 減少頁面跳轉(zhuǎn)

米哈里·契克森米哈賴在《心流：最佳體驗心理學(xué)》中將“最佳體驗”定義為：當(dāng)我們在做某些事情時，那種全神貫注、投入忘我的狀態(tài)。這種狀態(tài)下，我們身心合一，甚至感覺不到時間的存在，技術(shù)水平也會達(dá)到頂峰，在這件事情完成之后我們會有一種充滿能量和非常滿足的感受。然而，周圍突然的干擾或環(huán)境刺激都有可能打破心流體驗。 

用戶在使用軟件產(chǎn)品時很少有心流體驗，因為過多的頁面的跳轉(zhuǎn)和刷新會中斷用戶心流，冗余的頁面層級會增加用戶的理解成本和操作成本。針對這個問題，我們可以提高單個頁面的動態(tài)容量，在不跳轉(zhuǎn)頁面的前提下使用戶完成任務(wù)，為用戶創(chuàng)造在視覺感受層面上的心流體驗，下面是一些方法舉例。

覆蓋層

覆蓋層是出現(xiàn)并覆蓋在原頁面上層的一個彈出窗口，可以由用戶觸發(fā)或系統(tǒng)自動觸發(fā)，在網(wǎng)頁端和移動端都有著廣泛應(yīng)用。我們通?？梢詫⑵溆糜谳斎雰?nèi)容、附加信息、子頁面信息外顯、顯示操作指令等。

a.模態(tài)覆蓋層

模態(tài)覆蓋層一般由點擊觸發(fā)，通常出現(xiàn)后會伴隨亮盒效果，使用戶聚焦于覆蓋層上的任務(wù)，用戶操作完畢后才可以進(jìn)行覆蓋層外的其他操作。模態(tài)覆蓋層的大小不固定，它可以是一個小型的顯示警示信息的彈窗，也可能是一個篇幅很大的信息介紹，在保持上下文的情況下展示更多信息，避免了用戶迷失在各種頁面跳轉(zhuǎn)中。

如下圖，behance的首頁點擊一個作品后，會在當(dāng)前頁面上生成一個模態(tài)覆蓋層供用戶瀏覽詳細(xì)的作品內(nèi)容，而不是跳轉(zhuǎn)到新的頁面。在設(shè)計師瀏覽單個作品的場景中，一般只需要 1-3 分鐘的瀏覽后就會關(guān)閉頁面，模態(tài)覆蓋層的方式使得打開和關(guān)閉的操作更加流暢，提高了設(shè)計師的瀏覽效率。

模態(tài)覆蓋層在移動端同樣也有著應(yīng)用。如果前后兩個頁面存在較強(qiáng)的關(guān)聯(lián)性，為了避免用戶產(chǎn)生明顯的割裂感，一般適合采用模態(tài)覆蓋層的方式展示新頁面。如下圖，知乎使用模態(tài)覆蓋層展示評論。

b.詳情覆蓋層

詳情覆蓋層在網(wǎng)頁端通過光標(biāo)移入觸發(fā)，觸發(fā)后不需要刷新頁面既可顯示附加信息。如下圖Boss直聘中光標(biāo)移入某條招聘介紹時，會觸發(fā)詳情覆蓋層展示出次級頁面的詳細(xì)崗位信息，避免了跳轉(zhuǎn)新頁面。

嵌入層

嵌入層類似于抽屜，需要的時候?qū)⑵湔归_，不需要的時候?qū)⑵涫掌?。與模態(tài)層不同之處在于，展開后也不會遮蓋頁面的其他信息和影響其他操作。嵌入層的主要的應(yīng)用場景有：拓展內(nèi)容、展示下級內(nèi)容。

如下圖，微博的發(fā)現(xiàn)頁面的功能圖標(biāo)可以通過嵌入層進(jìn)行拓展從而展示更多功能。

Xmind的嵌入層展示了格式的下級內(nèi)容，可以在保持能夠繼續(xù)編輯腦圖的前提下進(jìn)行格式設(shè)置。

標(biāo)簽頁

對于內(nèi)容豐富的頁面，希望用戶能夠通過盡可能少的跳轉(zhuǎn)就能夠觸達(dá)。我們可以將列表導(dǎo)航、宮格導(dǎo)航修改為標(biāo)簽導(dǎo)航或分頁的形式。

4.2 降低交互成本

4.2.1 降低操作難度

把某些操作難度大耗費成本高的操作使用新技術(shù)解決，比如人臉識別和 OCR 技術(shù)可以降低信息輸入成本，不但幫助用戶使用較少的時間完成任務(wù)，也降低了用戶的犯錯幾率和使用阻力。

手勢的優(yōu)化也是降低操作難度的可行方法，優(yōu)化的方式有增加多手勢操作和加大熱區(qū)。比如在 App Store 首頁進(jìn)入應(yīng)用推薦頁后，針對不同使用場景的用戶提供了三種退出的方式，大大降低了操作難度。

舉一個反例，得到的書籍詳情頁中，查看詳情的按鈕熱區(qū)只存在于文字上，但是用戶的使用習(xí)慣會誤認(rèn)為整塊區(qū)域都可以點擊，因此每次點擊多次失敗后才理解熱區(qū)的正確位置，如果將熱區(qū)擴(kuò)大到整個區(qū)域就可以降低操作的難度。

想要了解更多交互手勢知識可以拓展閱讀： 交互手勢的容錯性和邏輯性 

4.2.2 減少用戶思考

提供默認(rèn)選擇

用戶的每一次思考都伴隨著流失的風(fēng)險。有時用戶對于我們提供的選擇不是很了解，會糾結(jié)和疑惑不同選擇之間的區(qū)別，最終可能導(dǎo)致放棄選擇進(jìn)而流失。我們需要做的是為用戶提供默認(rèn)選擇，同時允許用戶切換到其他選擇，以此來減少思考，降低使用阻力。

以手機(jī)淘寶查看相似寶貝功能改版為例，在舊版中，長按淘寶某個商品會出現(xiàn)「找相似」和「找同款」的按鈕選項，點擊后會跳轉(zhuǎn)到對應(yīng)頁面。在新版中，長按淘寶某個商品會直接跳轉(zhuǎn)到「相似寶貝」頁面展示商品，同時可以通過分段控件切換為「同款寶貝」。我猜測的改版原因是，由于舊版的第二步給用戶的兩個選項讓用戶過多思考，導(dǎo)致第二步的流失率過高，很多用戶沒能體驗到「相似寶貝」和「同款寶貝」功能的的特色。改版后直接將更高頻的「相似寶貝」的商品頁展示給用戶，同時也很方便地去切換到「同款寶貝」，這種交互形式的變化讓用戶無需思考就可以迅速體驗到功能的特色、并在熟悉后下次會繼續(xù)使用。

保持一致性

我們通過過往的經(jīng)驗將已知概念套用在新事物上，幫助我們理解。一旦交互界面中與用戶的經(jīng)驗預(yù)期相悖，就會產(chǎn)生阻力。

上文提到過，我們習(xí)慣于從過去獲得的經(jīng)驗中獲得對于當(dāng)下問題的解決方案。甚至對于重復(fù)出現(xiàn)的問題，我們已經(jīng)形成了條件反射和肌肉記憶去解決它們而不是再次思考。因此，當(dāng)設(shè)計缺乏一致性時，不但會導(dǎo)致我們已經(jīng)形成的條件反射和肌肉記憶失效，還會更容易導(dǎo)致錯誤的發(fā)生。此時我們不得不從條件反射的無意識操作轉(zhuǎn)換為消耗注意力的緩慢操作，從而形成阻力。為了避免這些阻力，我們需要確保按鍵的一致性、交互文案的一致性、交互手勢的一致性。

如下圖，警告框的按鈕位置一旦第一次用戶經(jīng)過使用熟悉后，之后用戶會進(jìn)行無意識地快速操作，此時如果某個警告框缺乏一致性就會導(dǎo)致錯誤的發(fā)生。

4.3 降低認(rèn)知負(fù)荷

4.3.1 降低內(nèi)在負(fù)荷

內(nèi)在負(fù)荷是任務(wù)中包含的信息和用戶固有的認(rèn)知結(jié)構(gòu)產(chǎn)生交互作品而形成的負(fù)荷。體現(xiàn)在界面中的信息就是文案的設(shè)計了，它也是產(chǎn)品設(shè)計中重要的一環(huán)。悖于用戶認(rèn)知結(jié)構(gòu)的文案設(shè)計會帶給用戶理解上的阻力。一份合格的文案設(shè)計需要做到簡潔易懂、重點突出、無歧義性和保持一致。

簡潔易懂

如果能夠做到簡潔，就不要冗余。確保每一個字都有其存在的意義。大部分用戶會對冗余的大段文字產(chǎn)生畏難情緒，從而放棄閱讀。詞匯的選擇要符合用戶人群的認(rèn)知范圍，不應(yīng)該使用用戶難以理解的各種黑話和行話。在此基礎(chǔ)上，如果能夠通過形象生動的修辭手法幫助用戶快速理解，就更勝一籌了，比如針對垃圾分類，一些網(wǎng)友發(fā)明的快速記憶方法就是一個很不錯的例子，如下圖。

重點突出

一段文案中可能有些是重點內(nèi)容，有些是解釋內(nèi)容，并不是所有內(nèi)容都需要讓用戶閱讀并理解。大部分情況下只需要突出重點內(nèi)容告知用戶，能夠引導(dǎo)用戶下一步行動就足夠了，至于其他解釋性或者不重要的內(nèi)容弱化即可。

針對前兩條規(guī)則，我們以 12306 以及飛豬的學(xué)生票和成人票的選擇彈窗作為案例進(jìn)行對比。如下圖所示，每一次購買火車票的過程中，當(dāng)我遇到 12306 的這個彈窗，都會讓我用不少時間去進(jìn)行理解和思考。首先在個人看來，“溫馨提示”在任何彈窗上都是占用空間沒有實際意義的存在，如果沒有標(biāo)題，直接展示正文即可；其次，正文的內(nèi)容重點信息不突出，其中有一個句子“請憑購票時所使用的有效身份證件原件和附有學(xué)生火車票優(yōu)惠卡的有效學(xué)生證原件換票乘車。”過于長和復(fù)雜，很考驗用戶的短期記憶和耐心；最后，按鈕文字沒有提供操作路徑，用戶想知道如何操作需要先閱讀完上面的文案。

飛豬的案例就避免了 12306 所存在的問題，做到了簡潔易懂和重點突出，如下圖。

表意清晰

表意清晰指的是文案傳達(dá)的含義明確、不含糊、不存在歧義。下圖是一款社交軟件的警告框文案，文案的歧義讓用戶疑惑“取消”按鈕是取消約會還是取消本次操作。經(jīng)過修改后歧義性就消失了。

保持一致

同一個軟件系統(tǒng)中，表達(dá)相同概念的用詞一致。模塊中的相似文案，語法表達(dá)方式一致。上文提到我們?nèi)祟惡苌僭敢馑伎嫉奶攸c，一旦一個軟件系統(tǒng)出現(xiàn)表示同一個概念，但是名稱不一樣的詞語，我們大腦就不得不開始被迫思考：“這個詞語和之前那個很接近但是有些不一樣，它們是同一個東西嗎？”這個思考過程從而形成了不小的阻力?！墩J(rèn)知與設(shè)計》一書中提到一條規(guī)則：“同一個名稱，就是同一個東西；不同的名稱，就是不同的東西。”因此，一致性是撰寫交互文案的一條重要原則。

4.3.2 降低外在負(fù)荷

當(dāng)信息的內(nèi)在負(fù)荷不能再進(jìn)行降低時，通過改變信息的呈現(xiàn)方式、結(jié)構(gòu)設(shè)計和邏輯安排來將復(fù)雜信息可視化，降低外在負(fù)荷，使信息更容易被用戶接受和理解。這里涉及到信息可視化這個課題，這里就不做展開了。

五、提高阻力的應(yīng)用

阻力并不是越小越好，在某些場景下，我們需要提高阻力提高用戶的使用成本達(dá)成某些目的。

5.1 優(yōu)化交互體驗

5.1.1 提高防錯能力

類似于馬路上的減速帶，在車輛進(jìn)入需要低速行駛區(qū)域時進(jìn)行阻礙。我們通常在用戶容易犯錯的操作前設(shè)定一定的阻力，減緩用戶的操作的節(jié)奏，達(dá)到防錯的目的。如下圖，在藍(lán)湖中如果要刪除一個項目，就需要先輸入項目的名稱后才能成功刪除，通過增加阻力提高了防錯能力。

5.1.2 提供安全感

針對涉及到用戶隱私的敏感操作，通過設(shè)計特定的交互流程讓用戶體驗到安全感，比如通過增加指紋、面部識別等操作降低用戶對于危險和風(fēng)險的擔(dān)憂，增加用戶的確定感和可控感。

5.1.3 建立儀式感

生活中大部分的時刻都是單調(diào)乏味的，我們需要使用各種儀式點綴它。與此類似，在用戶的操作行為路徑里增加一些不必要的過程，也能成為用戶體驗旅程中的點睛之筆。

就像多年前堅果手機(jī)一代的包裝，設(shè)計師別具匠心的將包裝設(shè)計為一次充滿著童趣的體驗，雖然拆包裝的過程時間增加，但是給予用戶似曾相識的場景是不可替代的。

看似使用起來費力的微信搖一搖，可以加強(qiáng)用戶的參與感和儀式感，就仿佛融合著一種占卜未知世界的神秘體驗，這種感覺是點擊無法給予的。當(dāng)初支付寶基于 LBS 和 AR 技術(shù)推出了 AR 實景紅包，眾多用戶不惜跨越“千山萬水”收集線索圖去尋找紅包，并樂此不疲。盡管增加了操作成本和使用阻力，但是這些富于互動性和趣味性的體驗帶給用戶的儀式感也是不可多得的。

5.2 維護(hù)社區(qū)生態(tài)

用戶的屬性和其產(chǎn)生的內(nèi)容質(zhì)量對于產(chǎn)品的社區(qū)生態(tài)建設(shè)有很大的影響。對于社區(qū)的認(rèn)同感越高的核心用戶越多，內(nèi)容質(zhì)量就越高，進(jìn)而社區(qū)對潛在用戶的吸引力就越大。一旦一些修養(yǎng)低或居心不良的用戶大量涌入社區(qū)，就會同時帶來大量的負(fù)面內(nèi)容，造成對其他用戶的干擾，甚至導(dǎo)致他們大量流失。因此，為了讓一個產(chǎn)品的社區(qū)生態(tài)能夠健康發(fā)展，我們需要采取一些篩選方法來設(shè)置阻力，以此來篩選出對平臺有益的用戶和內(nèi)容。

5.2.1 篩選用戶

邀請制

很多產(chǎn)品在冷啟動階段，為了避免垃圾用戶和提高社區(qū)質(zhì)量，會設(shè)立邀請制來控制用戶來源，然后根據(jù)現(xiàn)有用戶的使用反饋進(jìn)行可控的優(yōu)化迭代。這種方式可以有效地降低初期的運營成本，保持服務(wù)器穩(wěn)定，甚至可以制造一種供不應(yīng)求的感覺，獲得更多的討論度。

價格門檻

網(wǎng)絡(luò)騙局在社交類產(chǎn)品屢見不鮮，婚戀類產(chǎn)品更是重災(zāi)區(qū)。很多推行高端婚戀或高端社交的產(chǎn)品為了保證用戶質(zhì)量，不僅嚴(yán)防死守，還會設(shè)立價格門檻，不付費直接無法使用，這在現(xiàn)今已經(jīng)廣泛推行的基礎(chǔ)服務(wù)免費、增值服務(wù)收費的收費模式中很少見，但是確實有效地進(jìn)行了用戶篩選。

測試門檻

通過設(shè)置測試題將用戶分成不同的群體，進(jìn)行具有針對性的權(quán)限設(shè)置。比如 B 站轉(zhuǎn)正時需要完成具有社區(qū)特色的晉級考試，需要花費的時間成本比較高，通過這種方式篩選出真正認(rèn)同 B 站社區(qū)文化的優(yōu)質(zhì)用戶，給予這些用戶更多在社區(qū)中互動的權(quán)限，從而也大量減少了低質(zhì)量用戶的負(fù)面行為。

上述的三種用戶篩選方法是否適用，需要考慮的產(chǎn)品屬性。不同維度的篩選用戶的方法還有很多，這里只是簡單舉例。

5.2.2 篩選內(nèi)容

不同的內(nèi)容形式對于社區(qū)的價值是不一樣，我們可以通過一定的方式引導(dǎo)用戶生產(chǎn)對于社區(qū)建設(shè)更有利的內(nèi)容。比如微信發(fā)布朋友圈時并沒有直接給用戶提供純文字信息的輸入方式，如果用戶想要發(fā)布純文字內(nèi)容，需要長按發(fā)布按鈕才能進(jìn)入相應(yīng)界面。原因是微信官方認(rèn)為相對于純文字內(nèi)容，附有圖片的內(nèi)容對于其他用戶更具有吸引力，通過阻礙用戶使用純文字發(fā)布、鼓勵用戶使用配圖發(fā)布使得整體的朋友圈社區(qū)的內(nèi)容能夠吸引用戶瀏覽更長的時間，從而也可以使朋友圈廣告得到更多的曝光。

5.3 迎合商業(yè)目標(biāo)

有時產(chǎn)品的商業(yè)目標(biāo)和用戶目標(biāo)存在一定沖突時，損失一定的用戶體驗滿足商業(yè)目標(biāo)是不得不進(jìn)行的選擇，這需要我們進(jìn)行合理的平衡。

5.3.1 功能引導(dǎo)

為了迎合商業(yè)目標(biāo)，我們有時需要針對一些功能設(shè)置一定操作阻力將其進(jìn)行弱化，然后引導(dǎo)用戶去使用我們希望其使用的一些特定功能。這類阻力設(shè)計最為常見，比如通過強(qiáng)化按鈕對比進(jìn)行功能的引導(dǎo)，如下圖。

5.3.2 歧視性策略

歧視性策略常見的的應(yīng)用方式就是通過 VIP 制度或等級制度將用戶進(jìn)行身份區(qū)分，針對身份等級低的用戶設(shè)置使用阻力，以便于引導(dǎo)其投入更多精力和資源，或者通過此方式給予高等級用戶優(yōu)越感，刺激其進(jìn)行分享炫耀。

16 年發(fā)布的支付寶生活圈就是一個很好的案例，芝麻信用 750 分以上才可以使用的歧視性策略非常簡單粗暴。很多達(dá)標(biāo)的土豪用戶在朋友圈炫耀生活圈的截圖，等待朋友們的膜拜點贊。互聯(lián)網(wǎng)產(chǎn)品中，每增加一個動作，用戶都會呈幾何級流失，但是支付寶的歧視性策略給了用戶巨大的動力完成了截圖、保存、打開微信、分享照片等一系列動作，幫助支付寶生活圈實現(xiàn)了刷屏傳播的效果。

六、總結(jié)

雖然讓用戶暢通無阻地使用產(chǎn)品是我們的目標(biāo)，但是有時還需要我們合理地限制。不同的使用場景和商業(yè)目的共同影響著設(shè)計策略。在如今互聯(lián)網(wǎng)產(chǎn)品越來越趨于存量競爭的態(tài)勢下，我們更多的工作開始專注于產(chǎn)品的優(yōu)化。希望本文能夠提供相應(yīng)的思路，助力你在產(chǎn)品優(yōu)化探索中找到可行的切入點。

參考資料：

《微交互：細(xì)節(jié)設(shè)計成就卓越產(chǎn)品》作者：Dan Saffer

《心流》作者：米哈里·契克森米哈賴

《web界面設(shè)計》作者：Bill Scott / Theresa Neil

《認(rèn)知與設(shè)計》作者：Jeff Johnson

《阻力設(shè)計：探索質(zhì)量和數(shù)據(jù)間的平衡點》IXDC 演講，作者：王毓瑩

《點石成金》作者： 史蒂夫·克魯克

《設(shè)計心理學(xué)2:管理復(fù)雜》作者：唐納德·A·諾曼

作者：Ballen成明

轉(zhuǎn)載請注明：站酷

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

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

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

最近新的一批應(yīng)屆生開始步入職場，讓我想到自己剛?cè)朐O(shè)計這一行時，遇到的大大小小問題感到很是無助。今天這篇是結(jié)合自身經(jīng)驗寫給入行不久的設(shè)計，希望你們眼中有光心中有夢對設(shè)計仍不忘初心。

前言

相信你在設(shè)計工作中一定遇到過這樣的場景，當(dāng)好不容易拿著設(shè)計稿推進(jìn)時，被各種角色提出意見：
“我覺得這個設(shè)計不高級”，“我覺得這里可以再大一點，顏色更亮一點”，“我覺得可以試試競品那樣”，“算了，還是用第一稿吧”等等，然后陷入無限改改改的循環(huán)中，往往做著做著就開始懷疑自己是不是不適合設(shè)計

為什么會發(fā)生這種情況？

我認(rèn)為有3個方面的問題

1、視覺的主觀性

每個人的審美不一樣，天然會摻雜著主觀因素，導(dǎo)致每個人都能很容易的提出自己的意見。而我們對設(shè)計的關(guān)注往往是各種好看概念稿、當(dāng)前流行趨勢等等，導(dǎo)致我們過于追求視覺表現(xiàn)，而忘記從需求層面出發(fā)

2、用戶洞察缺失，設(shè)計方案不符合用戶認(rèn)知

每個需求都是有具體的目標(biāo)用戶，用戶身份不同，同一個問題背后的需求也是不一樣的，當(dāng)與真實用戶脫節(jié)，業(yè)務(wù)理解不到位，很可能就把整個需求理解錯誤，這樣修改的幾率就很大

3、目標(biāo)不清晰

沒有理解每個功能是什么，背后要解決的問題是什么，滿足了什么需求，能夠得到的價值是什么

產(chǎn)品或運營提出一個需求的背后，往往都有一個非常明確的結(jié)果預(yù)期，他們也需要層層審核。我們不應(yīng)該想“他是不是對我有意見”“他不懂設(shè)計的吧，就喜歡瞎BB”“每次都這樣針對我，設(shè)計做的真沒意思”等等，而是需要主動溝通，了解為什么？只有充分的理解需求，才能尋找更正確更好的解決方案。

我們做稿子時常存在問題是我們僅僅關(guān)注了設(shè)計視覺表達(dá)環(huán)節(jié)，整個項目流程我們理解的過于狹隘，騰訊百度這些大廠設(shè)計流程往往從項目立項設(shè)計已經(jīng)開始介入了

如何解決？

想要提升設(shè)計方案的說服力，首先要從思想上改變對設(shè)計認(rèn)知，然后再從執(zhí)行層上落實每個小點

1、體系化的思考

1. 1、拓寬邊界

這里需要設(shè)計師站在更高的視角，把設(shè)計從表現(xiàn)和執(zhí)行抽離往前后延展，在整個過程中往前去挖掘需求和規(guī)劃產(chǎn)品結(jié)構(gòu)，往后做到把控和沉淀，跳出視覺認(rèn)知層，才能宏觀看待整個業(yè)務(wù)改版

1.2、轉(zhuǎn)換視角

從不同的視角看待問題，學(xué)會拆解問題和解決問題，從產(chǎn)品、設(shè)計、開發(fā)不同的角度來全盤看整個產(chǎn)品，分析這個需求的投入產(chǎn)出比是否足夠，是否能達(dá)到目標(biāo)（包括設(shè)計目標(biāo)和產(chǎn)品目標(biāo)）。設(shè)計、產(chǎn)品、開發(fā)從來都不是對立的，都是不同角色為了整個產(chǎn)品發(fā)力。

1.3、追本溯源

我們在開始著手項目的時候，不要單點去看要在某個頁面要做什么改動，而是從問題入手，和產(chǎn)品同學(xué)對齊好目標(biāo)，結(jié)合設(shè)計理念。

最后找到發(fā)力點在哪里，循序漸進(jìn)，這樣很大程度上能避免項目的反復(fù)，對設(shè)計流程的準(zhǔn)確把控也是輸出優(yōu)秀設(shè)計方案的基礎(chǔ)。

1.4、認(rèn)知創(chuàng)新

有些新設(shè)計師認(rèn)為創(chuàng)新就是把原項目進(jìn)行翻天覆地的改變，初入職場會覺得負(fù)責(zé)的業(yè)務(wù)和項目都很小，沒有什么意思，其實創(chuàng)新的維度有很多，包括設(shè)計工作流程的優(yōu)化，還有從小的問題點著手去深挖和思考，找到合適的解決方案并打磨細(xì)節(jié)給用戶創(chuàng)造驚喜。

陌陌情感化設(shè)計和貝殼旗下被窩家裝產(chǎn)品圖標(biāo)設(shè)計異曲同工之處，大方向上都是利用大色塊、細(xì)節(jié)處用線條勾勒，整體設(shè)計輕量化符合年輕人喜歡，但兩者又有不同之處。陌陌對表情和動作的處理線條更簡潔更抽象，而被窩家裝圖標(biāo)融入品牌IP趣味化表達(dá)，傳達(dá)出詼諧、幽默的正面情感

2、理解需求

設(shè)計師往往對信息的獲取比較片面，很多往往坐等原型，然后刷網(wǎng)站找圖接著打開軟件擼圖，這種不充分理解需求就開始做設(shè)計的行為，屬于思維懶惰，就被稱為常說的美工

我們在需求階段設(shè)計師應(yīng)該主動跟需求方深入溝通，搞清楚以下方向的問題：

3、明確目標(biāo)

明確目標(biāo)是為了最終設(shè)計方案可衡量，設(shè)計師工作不是提供一個天花亂墜的方案，而是盡可能走在一個正確道路上提供給需求最合適的方案，只有大方向不錯的情況下才有好壞之分

4、實際案例帶練

4.1、前期分析

在業(yè)務(wù)探索初期，舊版滿足了業(yè)務(wù)方和用戶的基本訴求。但是隨著業(yè)務(wù)擴(kuò)張與更新迭代，我們逐漸發(fā)現(xiàn)現(xiàn)有的租售模塊實價登錄信息不能提供用戶有效的參考價值，該頁面點擊到實價登錄頁面的用戶量極少

（1） 價值點展示不足，人均點閱量較低

這個改版的背景是在租售業(yè)務(wù)上優(yōu)化實價登錄社區(qū)的需求，租售詳情頁的上內(nèi)容的呈現(xiàn)還是舊版，現(xiàn)有框架和內(nèi)容對社區(qū)價值點展示不足。

解決辦法：優(yōu)化信息框架，豐富該房屋社區(qū)信息，滿足用戶找房時了解社區(qū)資訊需求
比如整個社區(qū)在該市的排名、整個社區(qū)的配置圖、口碑評分等以及在實際找房場景過程中，用戶會找這個社區(qū)內(nèi)同格局同戶型的房屋等等

（2） 與用戶預(yù)期不符，跳出率較高

整個591APP是臺灣地區(qū)關(guān)注度最高房屋的產(chǎn)品，但是從二手房引流過來的用戶很少，埋點數(shù)據(jù)不理想

解決辦法：除了在視覺上也要與本身租售的業(yè)務(wù)分開，讓用戶理解注意到該模塊的價值外，另外在體驗層也需要優(yōu)化

4.2、用戶分析：深挖用戶真實的場景訴求

為了更好的明確實價登錄的價值定位，以及確認(rèn)用戶期望什么的信息呈現(xiàn)，我們在實際改版時對用戶做了多輪的摸底調(diào)研，挖掘用戶在使用關(guān)注功能時的真實場景訴求。

在調(diào)研過程中，我們發(fā)現(xiàn)使用實價登錄的用戶分兩類，分別是觀望期的用戶和決策期的用戶，這兩類用戶雖然都使用，但是對實價登錄功能的場景訴求是不一樣的。

（1） 觀望期用戶

觀望期用戶一般是有買房計劃，但是對于自己要買什么樣房或能賣什么樣的房子需求沒有那么明確。這類用戶大多數(shù)是了解為主，從慢慢對比中做到心中有數(shù)

（2） 決策期用戶

決策期的用戶大多已經(jīng)線下看過房，有些甚至已經(jīng)到了和議價階段，他們對于自己的購房訴求已經(jīng)十分清晰。在這個階段的用戶，期望提供更多有關(guān)體現(xiàn)房源價值的信息，比如掛盤時間、成交表、周邊完善程度等等，這些信息一方面可以展示出目前房源再市場內(nèi)的定位，重新調(diào)整價格預(yù)期；另一方面也能了解到業(yè)主心里預(yù)期，提升線下斡旋的成功率

我們可以從這兩類用戶的使用訴求看到，大家都期待能提供更豐富有效的信息，幫助自己明確需求和輔助決策。

4.3、設(shè)計目標(biāo)

由上述信息得出我們的設(shè)計目標(biāo)，提高租售模塊的實價登錄的點閱、降低跳出率，當(dāng)我們的設(shè)計方案每個細(xì)節(jié)，都是以目標(biāo)為導(dǎo)向時，你輸出的方案將更有說服力

4.4、設(shè)計實踐

結(jié)合實價登錄歷史現(xiàn)狀和不同階段用戶場景使用預(yù)期。我們在本次關(guān)注改版上制定了對應(yīng)的設(shè)計策略。

（1） 首屏

舊版分析：僅滿足用戶基本使用，其中承諾的誤差率未達(dá)標(biāo)，與內(nèi)政部信息同步也存在問題；同時，視覺上更像是內(nèi)容說明展示，點擊感不明顯

優(yōu)化策略：圍繞用戶買房租房場景，為用戶提供最新的實價登錄信息，同時添加點擊指向性箭頭，告知用戶可點

通過對首屏不斷的優(yōu)化和迭代，打磨體驗細(xì)節(jié)和設(shè)計細(xì)節(jié)，首頁的點閱提升了43%

（2） 實價詳情

從框架層對功能和層級進(jìn)行梳理，原層級主要功能不突出，根據(jù)功能的重要層級以及用戶使用頻次進(jìn)行梳理，將入口進(jìn)行提煉，同時針對多樣化需要增加新的入口

舊版分析：用戶在不了解社區(qū)情況下缺少關(guān)注動機(jī)；折線圖不明所意；同社區(qū)是否有成交與當(dāng)前用戶缺乏聯(lián)系；查看更多實價登錄卻到社區(qū)詳情頁與預(yù)期不符

優(yōu)化策略：圍繞用戶買房租房場景，展示與用戶切身利益相關(guān)信息

（3） 保持規(guī)范，風(fēng)格統(tǒng)一

關(guān)于顏色

整個產(chǎn)品主色是橙色，但是目前租售詳情頁上藍(lán)色橙色混用，當(dāng)然設(shè)計的改版也需要鍥機(jī)，所以我們這次改版沿用橙色，當(dāng)好區(qū)別之前的藍(lán)色，達(dá)到凸顯實價登錄模塊的目的

配色從樸素到亮眼跟從LOGO配色，“暗藍(lán)色”到“亮橙色”增強(qiáng)年輕感，加強(qiáng)了顏色的對比度，讓品牌感知更加直接，增加品牌視覺分量

關(guān)于圓角

圓角，代表友好、親和，具有更強(qiáng)的內(nèi)指向性。我們對于圓角的取值上也做了足夠的思考：結(jié)合房屋特性，卡片內(nèi)需承載的內(nèi)容信息眾多，圓角太大會影響邊角信息的呈現(xiàn)，所以我們在圓角選取上將圓角數(shù)值整體縮小，采用了可根據(jù)場景精細(xì)程度選擇合適數(shù)值的圓角(4-6-8px)，使卡片容器信息展示更聚焦。

5、高效溝通

設(shè)計師不僅要會設(shè)計，還要能夠有理有據(jù)的，跟需求方陳述自己的設(shè)計方案。尤其是在項目合作和設(shè)計推進(jìn)時，非常重要。方法可以分為以下幾點：a.有邏輯；b.能堅持；c.會妥協(xié)。

5.1、有邏輯

向別人推進(jìn)自己方案之前，先把自己要表達(dá)的內(nèi)容梳理清晰，進(jìn)行調(diào)整和簡化。試想你小時候全校上臺發(fā)表考試獲獎感言，是不是有個長長的稿子
多問自己一些為什么，比如下面稿子類似于廣告位的地方，當(dāng)前目標(biāo)是提高點擊率。但是整個模塊展示是在另外的業(yè)務(wù)上，也是存在突出的同時不能太突出的問題

初稿給出的時候也是出于2個方向考慮，方案一是出于頁面整體風(fēng)格一致性同時優(yōu)化視覺，稍作強(qiáng)調(diào)；方案二考慮到方案一視覺引導(dǎo)弱了，用重色強(qiáng)引導(dǎo)達(dá)到產(chǎn)品目標(biāo)。2個設(shè)計方案都可達(dá)到產(chǎn)品目標(biāo)，剩下的就是調(diào)優(yōu)了

5.2、能堅持

在符合最終產(chǎn)品目標(biāo)的設(shè)計方案，必須堅持。但是，你要有證據(jù)證明為什么它值得或者能夠堅持。

這里再分享一個案例來，臺灣用戶往往特別注重個人隱私，基本不開通系統(tǒng)定位，但是買房租房位置選擇及交通地域選擇是第一步，否則后續(xù)搜索無法定位到用戶預(yù)期。所以此次產(chǎn)品目標(biāo)是加強(qiáng)導(dǎo)航的視覺層級，當(dāng)然這只是優(yōu)化需求里面一個小需求

經(jīng)過競品分析、加強(qiáng)品牌感知和用戶使用習(xí)慣等方面確定使用品牌橙。但是這個橙飽和度比較高，在測試階段非專業(yè)人士提出疑問導(dǎo)航這個太刺眼，讓整個頁面感覺不高級，讓產(chǎn)品和交互再次懷疑這個橙色是否需要調(diào)整

這個時候設(shè)計堅持是非常有必要的，因為大量結(jié)果驗證是可達(dá)到產(chǎn)品預(yù)期也符合用戶使用習(xí)慣，僅因為大陸同事質(zhì)疑就在測試環(huán)節(jié)隨意修改，這個是非常沒必要的。測試環(huán)節(jié)離上線時間是非常緊迫的，這個急促的時間推翻重來結(jié)果也可想而知

5.3、會妥協(xié)

體驗設(shè)計會有很多不可控的因素，是在各種局限下做出最合適的選擇。要處理好問題的優(yōu)先級，分清楚哪些是核心目標(biāo)，哪些是兼顧目標(biāo)，這樣才能更有效的管理自己的時間以及項目的進(jìn)度。

6、方案闡述

6.1、什么是清晰有效的設(shè)計方案？

清晰設(shè)計層面來說就是方案能做到方向明確，方案明了；有效字從設(shè)計層面來說就是輸出的方案可以解決存在的問題，能達(dá)到設(shè)定的目標(biāo)以及可以切實落地。

清晰和有效的維度是不一樣的：清晰更多是針對設(shè)計，在于不同方向/方案的差異度和側(cè)重點；
有效更多需要聯(lián)合設(shè)計上下游（用戶/產(chǎn)品/開發(fā)），對于優(yōu)秀的設(shè)計方案來說兩者相輔相成，缺一不可

6.2、清晰：方向明確，方案明了

數(shù)量并不代表一個設(shè)計師的專業(yè)，最多只能說明設(shè)計師技法嫻熟。在評審的過程中，不建議將所有的設(shè)計方案直接平鋪。而是你要先經(jīng)過自己思考、衡量與推敲，挑選出最優(yōu)的 1~2 個方案進(jìn)行方案評審，并給出設(shè)計說明，陳述方案的思考邏輯。

在設(shè)計最初期先思考有哪些途徑達(dá)到目標(biāo)，確保所有實現(xiàn)手段的方式都有考慮到，整合途徑一致、方向近似的方案。對差異性不大的方案進(jìn)行合并劃歸，才能在合理范圍內(nèi)整理出具有不同思考維度與目標(biāo)側(cè)重的提案方向。

之前的例子比如目標(biāo)答案是提高點擊率和閱讀量，我從3個方面闡述方案的可行性
方案一：沿用當(dāng)前頁面的比較扁平設(shè)計樣式，選用大間隔大標(biāo)題區(qū)分模塊，在頁面里加入品牌色裝飾強(qiáng)調(diào)我們的模塊，吸引用戶點擊；
方案二：可以采用卡片式設(shè)計突出點擊感，吸引用戶點擊；
方案三：因為頭部有用橙色裝飾強(qiáng)調(diào)，所以整個頭部模塊不用卡片式呈現(xiàn)，突出后面2個模塊

這樣3個方案給需求方，即滿足對方產(chǎn)品需求，又滿足設(shè)計需求，對方就不會全盤否認(rèn)設(shè)計方案，走入改改改模式了，就算對方有修改意見也能說出具體點去修改，而不是說我覺得不好，不夠突出這樣非常主觀的想法

強(qiáng)調(diào)一點：我們在方案都沒說服自己的情況下不要推出去，專業(yè)度是每次和對方碰撞中中慢慢建立起來的，如果說服不了自己的情況下，推出去對方很大可能性要你試無數(shù)稿對比；另外在闡述發(fā)需求方時候，也要注意語言的引導(dǎo)，慢慢理解對方的意圖

6.3、有效：解決存在的問題、能達(dá)到設(shè)定的目標(biāo)、可以落地的方案

初入行時認(rèn)為滿足了需求方便是好的設(shè)計，當(dāng)其他角色提出不同意見就會覺得他們不懂的設(shè)計。這些現(xiàn)象是因為設(shè)計師在項目前期沒有正確思考需求本身需要解決什么問題、方案能否達(dá)到團(tuán)隊共同設(shè)定的目標(biāo)，以及方案是否能平穩(wěn)落地這三個維度

（1）解決存在的問題——從問題出發(fā)

我們在實際輸出方案的時候，不能從產(chǎn)品經(jīng)理的需求文檔開始，而是要把考量維度更前置，從項目現(xiàn)有的問題出發(fā)。這個問題的搜集包括外部用戶的反饋，內(nèi)部團(tuán)隊的聲音，同時對問題進(jìn)行篩選和甄別。

比如下面同一個產(chǎn)品按鈕2種懸浮狀態(tài)，左側(cè)案例按鈕hover狀態(tài)是由正常狀態(tài)面型變成線型；右側(cè)案例按鈕hover狀態(tài)是正常狀態(tài)下加投影。

如果我們僅從產(chǎn)品需求文檔開始，不去深究其背后的原因，很可能把右側(cè)hover狀態(tài)直接變色處理，沒有去思考hover的幾種樣式哪種是更適合當(dāng)前場景的的，這樣簡單粗暴的處理方式多了之后使得產(chǎn)品體驗大大折扣

（2）能達(dá)到設(shè)定的目標(biāo)——從目標(biāo)啟動

問題還需要結(jié)合目標(biāo)一起考慮，解決問題的思路并不完全等同于目標(biāo)，目標(biāo)是大家一起制定的未來產(chǎn)品的發(fā)展方向。比如之前導(dǎo)航的案例，未發(fā)版前部分工作人員認(rèn)為顏色偏重，但是從產(chǎn)品目標(biāo)和品牌調(diào)性及目標(biāo)用戶審美上是沒有問題的

（3）能落地的方案——技術(shù)可以實現(xiàn)

在輸出設(shè)計方案的時候，需要考慮到開發(fā)實現(xiàn)的可行性，需要消耗多少資源去實現(xiàn)這個需求，最低成本達(dá)到目標(biāo)的路徑是什么。最常見的就是情感化設(shè)計，下圖案例2個空狀態(tài)下的場景，原本考慮到趣味性及品牌屬性加入動效，但是開發(fā)的業(yè)務(wù)需求已經(jīng)排到下月，最后只能以靜態(tài)圖展示，先滿足基本需求后續(xù)有時間再進(jìn)行優(yōu)化

再例如下面三組數(shù)據(jù)的排版方案一：文字最左邊間距30px，文字最右邊間距30px，中間一組數(shù)據(jù)中間對齊；

方案二：三組數(shù)據(jù)分別在360px寬的格子里距離左邊30px。方案一在視覺上可能更加合理，當(dāng)寬度是1200時右側(cè)不會空太多，但是按方案二的邏輯寫更加便捷，一組數(shù)據(jù)樣式可以解決3組數(shù)據(jù)的排版，大大提高開發(fā)效率，如果用方案二評審加入開發(fā)實現(xiàn)方式的思考，那么按過稿率大大提升了

以上是跟進(jìn)項目一整個具體過程，了解背景、分析問題、設(shè)定目標(biāo)、到方案推導(dǎo)及執(zhí)行輸出、再到方案的落地，整個過程與產(chǎn)品研發(fā)溝通非常順利，最后也獲得良好的用戶反饋，整個團(tuán)隊滿滿的成就感是非常開心的

總結(jié)

進(jìn)入互聯(lián)網(wǎng)公司工作初期，大多數(shù)人對設(shè)計的理解更多停留在表現(xiàn)層，對設(shè)計的判斷標(biāo)準(zhǔn)更多是好不好看、喜不喜歡。但作為設(shè)計師我們不要盲目的去畫設(shè)計圖，只有在設(shè)計方案前，更好的理解和分析了需求，才能很好地服務(wù)用戶幫助用戶使用產(chǎn)品；同時，只有站在用戶的角度去分析理解產(chǎn)品，才可以幫助產(chǎn)品站在全局的視角提升用戶體驗和設(shè)計需求，從而打造優(yōu)秀的用戶體驗。這2點綜合起來才是設(shè)計師價值的體現(xiàn)。

原文地址：站酷

作者：貝賢設(shè)計筆記

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》科幻機(jī)甲風(fēng)格海報怎么做？

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

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

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

“仰望星空，腳踏實地” ，做設(shè)計需要想象空間，也要有反思和總結(jié)的能力。

什么是設(shè)計體系？
設(shè)計體系是為了實現(xiàn)數(shù)字產(chǎn)品的目的而組織起來的一套相互關(guān)聯(lián)的模式和共享實踐。

讓我們來看兩個毫無關(guān)聯(lián)的產(chǎn)品的界面。

BI產(chǎn)品

團(tuán)隊協(xié)作產(chǎn)品

這兩個案例展現(xiàn)了如何選用不同的模式以實現(xiàn)不同的目的。
對于BI產(chǎn)品來說，目的是讓數(shù)據(jù)分析更徹底，提高數(shù)據(jù)分析效率；更好的整合數(shù)據(jù)，為企業(yè)提供報表，做為企業(yè)決策的依據(jù)；更好的幫助企業(yè)管理者管理企業(yè)，提高企業(yè)實力。
對于teambition來說，目的是輕松記錄要做的事，并與伙伴實時同步進(jìn)展。讓彼此清楚地了解項目整體情況及事項優(yōu)先級，從而完成目標(biāo)。


基于產(chǎn)品目的我們可以看出BI產(chǎn)品重效率；teambition 更看重清晰以及使用是否輕松愉悅。
而產(chǎn)品的目的決定了它所采用的設(shè)計模式也會不同，下面我們再對照界面看下基于目的在界面設(shè)計上有什么不同。

BI產(chǎn)品

團(tuán)隊協(xié)作產(chǎn)品

BI數(shù)據(jù)分析類產(chǎn)品的布局多是小部件組成，這樣做會方便用戶進(jìn)行多任務(wù)處理。界面設(shè)計也會相對比較密集，整個界面承載了很多信息。它使用了緊密的間距、緊湊的控件、靈活的布局和排版方式。

設(shè)計模式

設(shè)計模式的概念最早是建筑師克里斯托弗 ? 亞歷山大（Christopher Alexander）在他的開創(chuàng)性著作《建筑的永恒之道》和《建筑模式語言》中提出的。 

《建筑模式語言》里面包含了253個建筑設(shè)計模式，大的如城市和道路系統(tǒng)的布局，小的如家庭住宅中的照明和家具。 

類似地，我們在創(chuàng)建界面時，也在使用設(shè)計模式（組件）來解決常見的問題：使用標(biāo)簽頁將內(nèi)容分成幾個部分，并表明哪一個選項對應(yīng)于當(dāng)前的頁面；使用下拉菜單展示可供用戶選擇相關(guān)選項。

標(biāo)簽頁

下拉組件

設(shè)計模式分為2類：

第一類：功能性模式（組件庫）表現(xiàn)為界面上的具體模塊，如按鈕、標(biāo)題、表單元素、菜單等。
第二類：感知性模式（視覺規(guī)范）則是描述性的樣式，以可視化方式表達(dá)和呈現(xiàn)產(chǎn)品的個性，如配色、排版、圖標(biāo)、形狀、動畫等。

功能性模式有點像名詞和動詞，它們是界面中那些具體的、可操作的部分；而感知性模式則類似于形容詞，它們是描述性的。

例如，按鈕是具有明確功能的模塊，它讓用戶能夠提交某項操作。但按鈕上的文字的樣式，以及按鈕本身的形狀、背景色、填充、交互狀態(tài)和過渡動畫不是模塊，而是樣式，這些樣式描述了按鈕是什么樣的。

共享語言

唐·諾曼在《設(shè)計心理學(xué)》一書中說過：系統(tǒng)映像（界面）和用戶模型（用戶通過與界面交互而形成的感知）之間存在著一道鴻溝。

在設(shè)計團(tuán)隊內(nèi)部也是如此，比如“范圍輸入框”組件，你能想象它是一個什么樣的組件嗎？相信不同的人肯定有不同的心智模型，因為這個組件不是常用組件，在ant design、arco.design組件庫中也找不到這個名稱組件，因為它是TDesign的產(chǎn)物。

而每個公司都會根據(jù)自己的產(chǎn)品特性創(chuàng)造一些非常規(guī)類組件名稱，這個時候就需要在所有參與產(chǎn)品創(chuàng)建的人之間共享。只有產(chǎn)品內(nèi)部設(shè)計語言一致，才能去培養(yǎng)用戶的心智模型，這樣才能去除系統(tǒng)映像與用戶模型之間的這道鴻溝。

例如上面這個組件，每個人都需要知道這個組件叫“范圍輸入框”，而不是“輸入框”或者“數(shù)字輸入框”。

如何衡量設(shè)計體系的有效性

例如，teambition的目的是“輕松記錄要做的事，并與伙伴實時同步進(jìn)展”。

于是，我們可以去看產(chǎn)品，設(shè)計體系在實現(xiàn)這一目標(biāo)的過程中發(fā)揮了多大作用，以及這些設(shè)計實踐的效果如何。如果視覺、交互混亂，導(dǎo)致無法實現(xiàn)上述目標(biāo)，那么可以認(rèn)為這套設(shè)計體系是無效的。

上面介紹了設(shè)計體系包含的內(nèi)容，下面我們針對這些內(nèi)容進(jìn)行具體的介紹：

設(shè)計原則

有效設(shè)計原則特征

做B端的小伙伴應(yīng)該都知道ant design，但不知道有多少小伙伴有認(rèn)真的看過ant design的設(shè)計原則。 可能有小伙伴會問這個設(shè)計原則有什么用，我最開始也覺得沒什么用，后來在參與設(shè)計體系優(yōu)化過程中發(fā)現(xiàn)這個原則就是金字塔尖。 

例如：用戶沒有填寫完表單，那么表單的提交按鈕能不能點？是置灰好，還是按了以后再給彈窗提示。 

例如：可編輯表格，是放一個筆狀icon來提示可編輯，還是采用鼠標(biāo)觸發(fā)時出現(xiàn)輸入框以及指針變?yōu)槲谋緺顟B(tài)。

日常工作中總會在這些細(xì)節(jié)問題上爭論很久，美其名曰“打磨設(shè)計”，其實很多時候就是設(shè)計原則在團(tuán)隊內(nèi)部沒有達(dá)成共識。

為了避免出現(xiàn)上述問題，我們要建立一套基本的價值觀和原則。在一些公司里，尤其是在處于初創(chuàng)期的公司里，嘗試建立一套共同的準(zhǔn)則是很難的。設(shè)計原則是無法量化的，因此定義這些原則可能需要多次迭代。

對于原則到底是什么，可能存在一些爭議。有些公司的設(shè)計原則偏重于品牌，有的偏重于團(tuán)隊文化，有的則偏重于設(shè)計流程。 

例如，Pinterest的設(shè)計原則便偏重于品牌。

Atlassian公司沒有分團(tuán)隊或者產(chǎn)品單獨制定原則。

他們的目標(biāo)是在客戶可觸及的每一點上都體現(xiàn)一些核心的價值觀。比如“大膽”“樂觀”“實用但不乏味”作為價值觀的體現(xiàn)。
不過，盡管各處的價值觀是相同的，但體現(xiàn)程度并不一樣。

例如，官網(wǎng)就會較多的提現(xiàn)“”大膽”，但產(chǎn)品里面就不會，正如Atlassian公司的設(shè)計經(jīng)理Kevin Coffey所說的，“沒有人想要一個‘大膽的’服務(wù)支持頁面”。

Atlassian 官網(wǎng)截圖 https://www.atlassian.com/zh

Atlassian 設(shè)計體系 https://atlassian.design/

設(shè)計原則是真實而貼切的

我們以TED為例。TED的一條設(shè)計原則是“追求永恒，而不是追求潮流”。永恒這個詞不光體現(xiàn)在TED的界面上，還體現(xiàn)在TED的整個品牌和設(shè)計方法上。 

這意味著他們不會為了追逐潮流而采用一項新的技術(shù)或引入一個新的設(shè)計元素。

設(shè)計原則是實用的、可操作的

例如：定義了原則為“簡化”（讓產(chǎn)品盡可能簡單，簡單到幾乎感覺不到它的存在）。這種原則就是不實用也不可操作的。 

怎么能讓團(tuán)隊所有人都能理解？ 

消除無用的部分。每一個設(shè)計元素，無論大小，都必須有一個目的，并遵循它所屬元素的目的。如果你無法解釋一個元素為什么要在那里，那么它便很可能不應(yīng)該在那里。這樣的定義就清晰很多。

再例如：定義了設(shè)計原則為“有用”，什么是“有用”？ 

從需求開始。如果你不知道用戶需要什么， 就無法做出正確的事情。去做調(diào)研，去分析數(shù)據(jù)，去與用戶交流，而不是做假設(shè)。

設(shè)計原則能幫我們確定優(yōu)先級 

好的設(shè)計原則也能幫我們確定優(yōu)先級和平衡點。 

Salesforce公司的Lightning設(shè)計體系的原則是“清晰、高效、一致、美觀”。 

這些原則的優(yōu)先級必須遵從以上順序?！懊烙^”不應(yīng)該高于“高效”和“一致”，而“清晰”應(yīng)該始終放在第一位。按照這種方式對原則進(jìn)行排序，可以讓團(tuán)隊在做設(shè)計決策時明確哪些東西應(yīng)該優(yōu)先考慮。

設(shè)計原則是能產(chǎn)生共鳴、容易讓人記住

Atlassian和Airbnb的團(tuán)隊成員被問及他們的設(shè)計原則時，他們都能脫口而出，沒有片刻猶豫，沒有人表現(xiàn)出遲疑，沒有人想要去翻看品牌手冊里的原則內(nèi)容。他們?yōu)槭裁茨馨言瓌t記得這么牢固呢？因為他們的原則足夠簡單、實用、易于讓人產(chǎn)生共鳴。

Airbnb公司的四條設(shè)計原則（“統(tǒng)一”“通用”“風(fēng)格化的”“對話式的”）便深深地扎根于其設(shè)計過程之中。

每當(dāng)設(shè)計一個新的組件時，我們都會確保它完全滿足四條原則。如果我們沒有這一套原則，便很難就各種問題達(dá)成一致意見。----Airbnb 首席交互設(shè)計師

怎么定義設(shè)計原則

每個團(tuán)隊建立其設(shè)計原則的方法都不盡相同：有的會召開幾輪研討會，有的可能會征求CEO或創(chuàng)意總監(jiān)的意見。不過，無論采取哪種方式，都離不開下面幾點：

從目的開始

TED網(wǎng)站的主要目的可以用一句話來表述：“盡可能廣泛地傳播演講?！币虼?，TED網(wǎng)站的精神和價值觀便是觸及盡可能多的人群，降低使用門檻，讓產(chǎn)品具有很高的兼容性和可訪問性。這意味著優(yōu)化性能和提升可訪問性比添加華而不實的功能更重要，清晰的文案比大膽的設(shè)計更重要。

尋找共識

如果你仍處在定義設(shè)計原則的階段，那么一個有效的方法便是讓團(tuán)隊的一些人或所有人（取決于團(tuán)隊規(guī)模）各自回答關(guān)于設(shè)計原則的問題。例如，在他們眼里，什么樣的設(shè)計對你們產(chǎn)品來說是好的設(shè)計？他們將如何用既實用又易于理解的五句話向團(tuán)隊的新成員解釋設(shè)計原則？

面向正確的受眾

如果搞不清楚設(shè)計原則是為誰寫的，就一定會寫出含糊不清的原則。有的小伙伴說我們領(lǐng)導(dǎo)就喜歡“美觀”，那我們是不是把“美觀”放在第一位？一定要搞清楚為誰而寫。原則到模式

原則到模式

作為一個設(shè)計師，定義設(shè)計原則可能對你來說也許并不難， 但怎么把原則、品牌價值、組件相結(jié)合，怎么體現(xiàn)在設(shè)計模型中，這個我覺得是個挑戰(zhàn)。

對于 TED 來說，信息的清晰比美觀更重要。試圖將每個演講都 提煉成一個短句可能很難，所以有時候標(biāo)題可能很長。對標(biāo)題 進(jìn)行截斷是很容易的，但對他們來說，演講信息的優(yōu)先級是最 高的。

因此，他們沒有選擇相對容易的標(biāo)題截斷方案，而是確保他們的設(shè)計模式可以容納長的標(biāo)題。

功能性模式（組件）

功能性模式是界面中有形的構(gòu)件（表單）。它們的目的是讓用戶能夠完成某種行為（填寫表單），或者激勵用戶完成某種行為。

功能性模式可以很簡單（標(biāo)簽?字、輸?框、按鈕 ），也可以組合成更復(fù)雜的模式（搜索組件）。

標(biāo)簽?字、輸?框、和按鈕

搜索組件由標(biāo)簽?字、輸?框和按鈕組成

模式在變，行為不變

隨著產(chǎn)品的發(fā)展，模式也在不斷發(fā)展。包括風(fēng)格，甚至功能和交互方式，都有變化。然而，它們的目的基本保持不變。

我們用頂部導(dǎo)航舉例：

頂部導(dǎo)航是由logo、搜索定位框、文字下拉框、圖標(biāo)功能按鈕、通知按鈕構(gòu)成。導(dǎo)航條里的每一個模塊都有自身的目的：搜索定位框告訴我們怎么快速找到想要的東西，導(dǎo)航帶領(lǐng)我們?yōu)g覽全局，指引我們到想去的地方，而后面的的圖標(biāo)按鈕讓我快速觸達(dá)。

總的來看，這些模塊都有一個共同的目的：引導(dǎo)用戶快速瀏覽使用。隨著產(chǎn)品的發(fā)展，模式也在不斷發(fā)展。

例如，隨著產(chǎn)品功能越來越多，可能會在導(dǎo)航上面新增設(shè)置功能，讓用戶自己去排布常用功能。又如，我們可能會對導(dǎo)航進(jìn)行重新布局，把導(dǎo)航按模塊分類，采用標(biāo)簽按頁展示。把模塊下面更多功能放到子頁面左側(cè)。雖然我們不斷的對模式進(jìn)行迭代，希望它更好的實現(xiàn)各自的目的或者說更有效地激勵用戶使用。

在設(shè)計開始階段就闡明模式的目的，能避免在產(chǎn)品發(fā)展過程中做重復(fù)性的工作。

目的決定了其他的一切：模式的結(jié)構(gòu)、內(nèi)容及呈現(xiàn)。了解模式的目的，可以幫助我們設(shè)計和構(gòu)建更加穩(wěn)健的模塊。

如果說功能性模式是界面中的組件，那么感知性模式則更像是樣式——描述組件是什么類型的，給人的感受是什么樣的。下面，我們將探討感知性模式。

感知性模式（視覺規(guī)范）

設(shè)想我們每個人各有一套房子，且每套房子都有以下這些家具：一張桌子、幾把椅子、一張床和一個衣柜。

不過，雖然都有這些家具，但每套房子給人的感覺截然不同：可能是因為家具的樣式、材料、顏色、紋理不同，或者是床罩的布料、裝飾品的樣式、房間的布局和燈光，甚至是房間里播放的音樂不 同。

上述這些屬性便稱作感知性模式。正是因為它們，可能你的房子就像是一個地中海風(fēng)格的小窩，而我的房子就像是一個倉庫。

而數(shù)字產(chǎn)品感知性模式的例子包括語氣、排版、配色、布局、插圖與圖標(biāo)樣式、形狀與紋理、間距、意象、交互或動畫，以及這些要素在界面中的組合和使用的具體方式。

有時，人們將這樣的特性視為產(chǎn)品的樣式，或稱作皮膚，也就是最外面的一層。但要想取得成效，它們必須不僅存在于表面，還必須存在于品牌的核心，并隨著產(chǎn)品的發(fā)展而發(fā)展。

只有這樣，感知性模式才會成為讓產(chǎn)品脫穎而出的強(qiáng)大力量。

感知性模式的作用

同一領(lǐng)域的產(chǎn)品，哪怕具有相似的模塊，它們給人的感覺也是不一樣的。感知性模式通過界面?zhèn)鬟f品牌，并讓品牌被人記住。

看下面的圖片，你能認(rèn)出它們是什么產(chǎn)品嗎？

這兩張圖里面并沒有太多的信息，你只能看到排版的樣式、一些圖形和顏色，以及一些圖標(biāo)。然而那些視覺上的線索極具辨識度，所以你仍然很有可能看出它們分別屬于什么產(chǎn)品（即釘釘和飛書）。

這些視覺元素通過有意識地反復(fù)使用，便形成了模式，這就是為什么我們可以在沒有上下文的情況下認(rèn)出它們。

感知性模式讓系統(tǒng)更為連貫

在模塊化的系統(tǒng)中，想要做到視覺上的連貫統(tǒng)一可能是一件很棘手的事情。模塊是由不同的人根據(jù)不同的目的創(chuàng)建的。而由于感知性模式是滲透到系統(tǒng)中各個部分的，因此它們可以將系統(tǒng)的不同部分連接起來。如果這種連接是有效的，那么用戶就會感受到模塊之間的統(tǒng)一性。

例如：飛書和騰訊的相同功能的組件感知模式是不一樣的，所以兩個公司設(shè)計體系不能混用。

探索感知性模式

如果說功能性模塊反映的是用戶需要且想要的內(nèi)容，那么感知性模式關(guān)注的則是他們直觀的感受或行為。

在《網(wǎng)站情感化設(shè)計》一書中，作者提出了一 個簡單的方法，通過創(chuàng)建“設(shè)計角色”捕捉產(chǎn)品關(guān)鍵的個性 品質(zhì)。以下是一些有助于探索感知性模式的一些技巧。

情緒板

情緒板是探索不同視覺主題的絕佳工具。可以使用數(shù)字化的方式創(chuàng)建情緒版（Pinterest或花瓣都是一種用于創(chuàng)建數(shù)字化情緒板的常用工具）。

如果你目前做的產(chǎn)品是需要體現(xiàn)：科技、質(zhì)感、智能，那上圖應(yīng)該可以滿足這些條件，你可以通過這張圖與領(lǐng)導(dǎo)進(jìn)行溝通達(dá)成一致，然后從中提煉出一些顏色、元素、材質(zhì)，這樣大方向就不會有太大問題，只需在細(xì)節(jié)上進(jìn)行打磨。

樣式疊片

定義好了大致的方向之后，便可以使用樣式疊片來更加細(xì)致地探究多種可能性。樣式疊片的概念由Samantha Warren提出，他將其定義為“由字體、顏色等界面元素組成的能傳遞Web視覺品牌精髓的設(shè)計交付物。”

和情緒板一樣，樣式疊片可以為用戶和產(chǎn)品團(tuán)隊提供有價值的討論點，并呈現(xiàn)他們對特定設(shè)計方向的初始反應(yīng)。

arco.design 首頁這張圖可以理解為就是樣式疊片，把不同的組件樣式疊片放在一起比較，有助于準(zhǔn)確地找到設(shè)計方向。

迭代與改進(jìn)

當(dāng)功能模式和感知模式建立完成后，我們將它們集成到產(chǎn)品的過程，它們還將進(jìn)行演變。

因為在真實的界面中，模塊、交互、樣式之間相互影響下會產(chǎn)生新的問題，這都是很正常的，是典型的迭代過程，這個過程會一直持續(xù)，直到設(shè)計語言最終形成。

像ant design、arco.design應(yīng)該都經(jīng)歷過這個過程，只是我們不知道而已，要不然也不需要花費幾年的時間打磨后才發(fā)布出來。

平衡品牌性與一致性：

過分關(guān)注一致性也會扼殺品牌性。矛盾在于，讓設(shè)計達(dá)到完美的一致性無法確保它依然具有很強(qiáng)的品牌性。有時，這樣做反而會削弱品牌性——在一致性和統(tǒng)一性之間存在著細(xì)微的差別。

《英國公開大學(xué)》的創(chuàng)意總監(jiān)曾說過：“當(dāng)你專注于產(chǎn)品一致性的時候，打造產(chǎn)品質(zhì)感的一些重要的細(xì)微之處就有可能會丟失。

發(fā)展感知性模式需要為設(shè)計師賦予打破常規(guī)的權(quán)力，鼓勵設(shè)計師積極地探索更多的可能性。好的設(shè)計體系能在品牌的一致性和創(chuàng)造性表達(dá)之間取得平衡。

小規(guī)模試驗：

后期如果發(fā)現(xiàn)樣式無法滿足，我們?nèi)绾螌⑿碌臉邮揭朐O(shè)計體系呢？

可以先進(jìn)行一些小規(guī)模的試驗是一種相當(dāng)有效的做法。如果某些元素的效果很好，我們就逐漸將它們集成到其他界面中去。

例如，在學(xué)習(xí)者完成一個步驟時，純功能性的切換按鈕缺乏慶祝和成就的感覺。于是，我們用帶有圓形樣式、彈跳 動畫以及勾號圖標(biāo)的按鈕取代了先前的按鈕。

雖然新的按鈕樣式受到了學(xué)習(xí)者們的好評，但它與設(shè)計體系的其他元素格格不入。后來，我們開始在網(wǎng)站的其他地方應(yīng)用圓形圖案、彈跳動畫和勾號圖標(biāo)。如果不這樣做，那么整個設(shè)計 體系給人的感覺就是割裂的。

共享設(shè)計語言

數(shù)字產(chǎn)品都是由團(tuán)隊打造的。團(tuán)隊里的每個人都有各自的具體目標(biāo)，都有各自的截止日期。這就意味著難免會出現(xiàn)草率加入的模式、重復(fù)或錯誤的模塊。

我們能確保一個產(chǎn)品即便有多人協(xié)作，卻仍能連貫、統(tǒng)一嗎？ 只要我們團(tuán)隊對自己的設(shè)計體系及其運轉(zhuǎn)方式有共同的理解，我們就能做到這一點。

這意味著我們遵循相同的指導(dǎo)原則，我們對品牌愿景的理解是一致的，我們在設(shè)計和前端架構(gòu)方面有共享的方法，我們知道什么樣的模式是最有效的，也知道它們的工作原理。換句話說，創(chuàng)建統(tǒng)一的設(shè)計體系需要共享設(shè)計語言。

許多偉大的建筑物（如圣家族大教堂、沙特爾大教堂、阿爾罕布拉宮）并不是由一位主建筑師在繪圖板上費力地創(chuàng)造出來的，而是由一群人構(gòu)建出來的，這群人對能將這些建筑物變?yōu)楝F(xiàn)實的設(shè)計模式有著深刻的共識。

“幾組人可以通過遵循一個共同的模式語言，當(dāng)場構(gòu)思出他 們的大型公共建筑，就好像他們共有一個心靈?！?

——克里斯托弗 ? 亞歷山大，《建筑的永恒之道》

我們可以用類似的想法構(gòu)建數(shù)字產(chǎn)品。設(shè)計語言可以讓人們創(chuàng)建出具有整體感的產(chǎn)品，哪怕不同的人負(fù)責(zé)不同的部分也是如此。

為模式命名

如果一個界面上的元素沒有恰當(dāng)?shù)拿Q、團(tuán)隊里人盡皆知的名。那么該元素就沒有在你的設(shè)計體系中成為有效的單元。一旦你給一個物件命了名，你就塑造了它的未來。

例如，如果你給的是一個表現(xiàn)型的名稱，那么它將來就會受到樣式的限制：“藍(lán)色按鈕”只能是藍(lán)色。

例如，如果你給的是一個狀態(tài)屬性的名稱：“幽靈按鈕”，它的特點是：按鈕形狀的透明按鈕，但有細(xì)實線的邊框，常用在有色背景上。

將團(tuán)隊融入設(shè)計語言

僅僅完成命名還不足以建立共享的設(shè)計語言。整個團(tuán)隊都應(yīng)該 沉浸到設(shè)計語言中去，讓它無所不在。

讓設(shè)計模式變得可見：

如果有條件，可以在墻上開辟一塊專門展示設(shè)計體系的空間，將它稱作“模 式墻”

讓你的設(shè)計體系更加開放，人們會感覺你歡迎他們的加入，歡迎他們提出問題甚至做出貢獻(xiàn)。

引用事物的名稱：

所有語言的共同特點是，只有不停地使用才能讓它保持活力。

它需要成為日常對話的一部分：

這就是為什么需要有意識地使用約定好的名稱去引用這些模式很重要——無論這個名稱聽起來有多奇怪。將設(shè)計體系作為入職培訓(xùn)的一部分將設(shè)計體系的內(nèi)容作為入職培訓(xùn)的一部分，新員工了解設(shè)計體系就會更加容易。當(dāng)新員工入職時，他們將了解到設(shè)計指南是如何創(chuàng)建出來的，這樣他們就可以理解為什么以及如何做出決策。在 《英國公開大學(xué)》 內(nèi)部，他們創(chuàng)建了一個入門性質(zhì)的線上課程，其中有一章專門對模式庫進(jìn)行了介紹，并包含了 一些小測驗和小課程，這樣可以幫助新員工更好的理解設(shè)計體系。

定期組織設(shè)計體系會議：

每個人都討厭開會。但是，如果你希望每個人都跟得上設(shè)計體系的發(fā)展，那么組織召開設(shè)計體系的會議就是必要的。這是所有設(shè)計師和開發(fā)人員共同專注于設(shè)計體系的時間。一開始，可 以每周舉行一次，當(dāng)團(tuán)隊找到節(jié)奏之后，可以每兩周舉行一 次。團(tuán)隊可以利用例會時間就產(chǎn)品的總體模式（如圖標(biāo)、排版）得出一致意見。同時，這也是分享新模塊并討論其目的、 用途及可能遇到的問題的好機(jī)會。

設(shè)計體系不是一夜之間構(gòu)建出來的，而是通過日常的實踐逐漸形成的。

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

作者：夜鷹YEAH   來源：站酷

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

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

前言

對于B端來說，可能很多UI和前端喜歡直接套用Ant Design或Element ui組件規(guī)范；因為之前企業(yè)要求并不高，但是隨著市場和環(huán)境的發(fā)展，企業(yè)對B端越來越重視，這些模版太類同，顯然就太爛大街了。隨后字節(jié)推出Arco Design、騰訊推出企業(yè)級設(shè)計體系TDesign、有贊推出Zan Design，很多大廠都推出了適合自己產(chǎn)品的模版和規(guī)范，給了我們許多借鑒，能讓我們快速作出一個不出錯的方案。不過企業(yè)、市場的要求顯然不止于此，我們的設(shè)計追求也不止于此。那么我們?nèi)绾尾拍軘[脫套模版，提高界面的精致度，提升界面的交互體驗?zāi)兀?/span>

一. 設(shè)計目標(biāo)

為啥要搭建設(shè)計系統(tǒng)？設(shè)計系統(tǒng)對我們開發(fā)團(tuán)隊中誰有指導(dǎo)作用？

◆ 設(shè)計系統(tǒng)可以保證我們產(chǎn)品風(fēng)格的統(tǒng)一性，降低用戶對新產(chǎn)品適應(yīng)時間和學(xué)習(xí)成本；對UI設(shè)計輸出效率有很大的提高，在團(tuán)隊協(xié)同中可以大大的減少無效溝通，節(jié)約時間成本

◆ 在開發(fā)團(tuán)隊中，設(shè)計系統(tǒng)對UI、交互、前端、測試等崗位的工作都有一定的指導(dǎo)作用

二. 設(shè)計原則

設(shè)計原則是傳統(tǒng)智慧的沉淀與未來趨勢的結(jié)合體，能夠幫助我們更好的進(jìn)行設(shè)計活動時代在進(jìn)步，設(shè)計原則也必然需要不斷的更新以適應(yīng)發(fā)展新的設(shè)計原則要求界面更友好，操作更加人性化。

這里我歸納了8條原則僅供大家借鑒學(xué)習(xí):

◆ 可用性：有助于檢查用戶是否能夠輕松地完成任務(wù)、產(chǎn)品是否正常運行以及是否完成工作

◆ 易用性：易用是首要考慮的因素，能一步解決的事情絕不兩步

◆ 統(tǒng)一性：頁面風(fēng)格、色彩、布局等要保持全局統(tǒng)一，不可為了某一功能的美觀而去破壞整體

◆ 親密性：信息的關(guān)聯(lián)性強(qiáng)，距離就要相應(yīng)的縮短，讓他們看起來是一個視覺單元；反之，則距離要加大，要讓用戶對信息的區(qū)域劃分一目了然

◆ 對齊性：在界面中，將元素進(jìn)行對齊，符合用戶的認(rèn)知，引導(dǎo)視覺流向，讓用戶更加流暢的閱讀信息

◆ 對比性：對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識別關(guān)鍵信息。

◆ 重復(fù)性：相同的元素在整個界面中不斷重復(fù)，不僅可以有效降低用戶的學(xué)習(xí)成本，也可以幫助用戶識別出這些元素之間的關(guān)聯(lián)性。

◆ 穩(wěn)定性：沒有任何東西比產(chǎn)品的穩(wěn)定重要，down機(jī)再好的產(chǎn)品也是徒勞。會影響到系統(tǒng)穩(wěn)定的事情不能做

三. 框架布局

響應(yīng)式布局，能夠適應(yīng)各種屏幕尺寸及分辨率，確保整體布局的一致性簡而言之，就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。一般采用柵格系統(tǒng)布局，常用柵格一般是16列或24列。

◆ 柵格：是對界面當(dāng)中元素橫向排布的一種模式，主要用于大型區(qū)塊間距的排列，不適用于圖標(biāo)與文字間隔的小型元素。

◆ 模度：為界面布局的一致性和韻律感，統(tǒng)一設(shè)計到開發(fā)的布局語言，減少還原損耗，我們網(wǎng)格基數(shù)設(shè)為8，卡片寬度及間距為8n。常用模度：4 8 16 24 32 40 48 56 64 … 1920

◆ 布局：常用左右布局或上下布局

左右布局以1920頁面布局為案例：通常B端產(chǎn)品左側(cè)會有一個導(dǎo)航菜單，假設(shè)240px,右側(cè)核心工作區(qū)域總寬1632px, 右偏移240px ,列數(shù)16列，列寬86px, 間隙16px， 左右邊距24px; 左邊導(dǎo)航和邊距固定不變。

上下布局以1920頁面布局為案例：通常左右會有一個留白區(qū)域，假設(shè)144px,中間核心區(qū)域總寬1632px, 右偏移144px ,列數(shù)16列，列寬86px, 間隙16px。

四. 設(shè)計風(fēng)格

設(shè)計風(fēng)格說白了就是用戶最直觀的感受，“商務(wù)、時尚、簡約、科技感、沉穩(wěn)、年輕、高端...”?

決定設(shè)計風(fēng)格的因素有這些：

1. 顏色

色彩是UI設(shè)計的基石，人腦對于色彩的記憶度要高于形態(tài)；除了美學(xué)之外，色彩還是是情感和聯(lián)想的創(chuàng)造者。通過對自然的感知和行為，我們通常對色彩定義品牌色板、功能色板、中性色板，以及衍生色。 

◆ 品牌色：是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺元素之一（例如：我們熟悉的政府藍(lán)/黨政紅/淘寶橙，他們都能直觀或間接的傳達(dá)產(chǎn)品特征屬性）

◆ 功能色：遵守用戶對色彩的基本認(rèn)知，保持一致性，不過多的自定義干擾用戶的認(rèn)知體驗，提高用戶的閱讀理解力，功能色代表了明確的信息以及狀態(tài)，比如正常、成功、失敗、警告、鏈接等

◆ 中性色：主要應(yīng)用在界面的文字部分、背景、邊框、分割線等場景，根據(jù)使用場景，通常將中性色被定義為 3 類：文字、線條、背景

◆ 衍生色：B端產(chǎn)品中顏色的應(yīng)用場景可能很廣泛，要考慮它的延展性，按照一定規(guī)則定義完畢主色，便可以自動獲得一系列完整的衍生色

2. 文字

設(shè)定統(tǒng)一的字體規(guī)范，無襯線黑體中宮更為開放，布白更為勻稱，顯示效果更為舒適，醒目利于閱讀，更利于視覺信息的傳達(dá)，在互聯(lián)網(wǎng)時代后期在界面設(shè)計中字體樣式還是會以無襯線體為主。

◆ 字體家族：根據(jù)系統(tǒng)區(qū)分Mac or Windows，如果用戶使用的是Mac系統(tǒng)可以優(yōu)先使用Mac默認(rèn)字體渲染 ；如果使用的是Win，字體兼容性選擇順序（有購買版權(quán)字體的可優(yōu)先考慮），例：

◆ 字號：為了提升用戶的閱讀體驗，滿足用戶的可讀性，更為舒適、清晰，也能保證界面的層次感（結(jié)合WCAG 2.0標(biāo)準(zhǔn)），將 PC/Web 端主字體從以前的12px改為 14px。

◆ 行高：為上下文之間提供了呼吸的空間，規(guī)范的行高，可以使得界面層次清晰、重點突出

◆ 字體顏色：WCAG 2.0 中將顏色對比等級分為 3 種，A級，AA級，AAA級，等級越高意味著顏色的對比度越高，呈現(xiàn)出來的視覺壓力越大。字體顏色數(shù)量不建議太多，根據(jù)文字主次關(guān)系定義3-4個為宜（例：主文字、輔助性文字、提示文字、輕提示/禁用文字）

◆ 字重：字重不建議太多種，2-3種為宜（例：Regular、Medium、Light）

3. 圖型

圖形中有圖片、圖標(biāo)、圖表，都對整體風(fēng)格有一定影響，設(shè)定統(tǒng)一的圖形使用規(guī)范，可以使視覺效果更加和諧

五. 交互

交互，即交流互動，也就是說我們自己通過我們的五覺：視覺、聽覺、觸覺、嗅覺、味覺來感受其他事物并和他們之間產(chǎn)生信息溝通的過程。在互聯(lián)網(wǎng)中交互對象個體主要是人和機(jī)器，所謂人機(jī)互動，相互配合，共同達(dá)成某種目的。

◆ 交互方式：保持產(chǎn)品的統(tǒng)一性，同類別的交互不可有不同的操作感受。要符合大眾的認(rèn)知習(xí)慣，可創(chuàng)新但不可違背潛意識，例：wab端頁面鼠標(biāo)交互操作一般有下拉、上滑、按壓、懸停，移動端一般左右上下滑動、下拉、上拉、雙指縮放...

◆ 交互狀態(tài)：按鈕狀態(tài)變化，頁面狀態(tài)變化，組件狀態(tài)變化...交互內(nèi)容確實太大了，我個人也只接觸到的也只是冰山一角，只能拋磚引玉，勾起大家思維，相互探討學(xué)習(xí)

◆ 引導(dǎo)：引導(dǎo)一般常見5 種：新手引導(dǎo)）、步驟引導(dǎo)、幫助/操作引導(dǎo)、新功能引導(dǎo)、空白頁引導(dǎo)

六. 組件

什么是組件？組件是抽象概念,對面向過程而言是對數(shù)據(jù)和方法的簡單封裝。對面向?qū)ο蠖允且恍┓夏撤N規(guī)范的類組合在一起就構(gòu)成了組件。它可以提供某些特定的功能。組件出現(xiàn)的原因軟件工程中重復(fù)、反復(fù)出現(xiàn)、普遍的、有相似的問題的出現(xiàn),導(dǎo)致開發(fā)過程中有大量的代碼需要不斷的重新設(shè)計,開發(fā)周期延長,開發(fā)復(fù)雜度增加。需要岀現(xiàn)一種模型通過剝離掉各個問題的特性,抽取各個問題之間的共性。從而在保證代碼的靈活性下極大的增加代碼的可重用性。組件的岀現(xiàn)就是為了解決這些實際問題的。

在前端眼里，組件通常是指頁面上的視圖單元，可以說，UI組件是組件的子集。組件庫大致可以分為這幾大類：

◆ 導(dǎo)航：固釘、面包屑、下拉菜單、下拉導(dǎo)航、電梯、菜單、分頁器、步驟條

◆ 數(shù)據(jù)錄入：自動完成、級聯(lián)選擇、多選框、日期選擇框、表單、輸入框、數(shù)字輸入框、提及、步進(jìn)器、評分、下拉選擇、滑動條、穿梭框、文件上傳

◆ 數(shù)據(jù)展示: 頭像、標(biāo)題、卡片、輪播、折疊面板、表格、拖拽排序、高亮關(guān)鍵詞、時間軸、走馬燈、空狀態(tài)、徽標(biāo)數(shù)、樹、標(biāo)簽、標(biāo)簽頁、圖片、氣泡...

◆ 反饋: 警告提示、抽屜、全局提示、對話框、通知提醒框、氣泡確認(rèn)框、進(jìn)度條、結(jié)果、加載中..

◆ 其他: 錨點、回到頂部、圖標(biāo)...

七. 總結(jié) 

設(shè)計規(guī)范是為了更高效的做設(shè)計，但不是一成不變的，它在落地使用的時或多或少都會有問題，需要我們慢慢的去反復(fù)檢驗它的合理性，發(fā)現(xiàn)不合理的及時更正，不斷迭代，不斷沉淀，不斷優(yōu)化，這樣才能不斷提高產(chǎn)品的用戶體驗。此次分享借鑒一些前輩的經(jīng)驗，主要是整理歸納學(xué)習(xí)，如有需要補(bǔ)充或糾正的，歡迎大家相互探討！

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

作者：小魚ID   來源：站酷

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

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

臨摹是一個很好的學(xué)習(xí)方法，人類學(xué)習(xí)就是從模仿開始的，而對于設(shè)計師來說，臨摹作品對于提升學(xué)習(xí)效率尤其有用。

但在做具體臨摹練習(xí)時，就會發(fā)現(xiàn)一些問題，比如在星球里看到同學(xué)們做日常打卡練習(xí)時會遇到臨摹的原作本身質(zhì)量不高，不會分析作品優(yōu)缺點，不知道如何用到自己的項目中等等。所以我在星球里的月度分享會上跟大家聊了這方面的經(jīng)驗，今天也將部分內(nèi)容整理成文章分享給大家，希望能提高學(xué)習(xí)效率。

分享的內(nèi)容分以下幾點：

1、為什么需要做臨摹練習(xí)？

2、臨摹的幾個階段

3、如何找到優(yōu)質(zhì)臨摹作品？

4、如何做臨摹思考？

5、保持行動力的秘訣

6、總結(jié)

1.為什么需要做臨摹練習(xí)？

有些新人在剛?cè)胄械臅r候，出于對設(shè)計天馬行空的想象，不屑于做臨摹練習(xí)，覺得作為設(shè)計師就應(yīng)該多發(fā)揮一些自己的原創(chuàng)能力。想法是很好的，但此時更多的是手上的輸出跟不上腦子中的想法，產(chǎn)出的原創(chuàng)作品質(zhì)量往往不高。而臨摹是站在巨人的肩上做事，提升動手能力的同時吸收優(yōu)秀的設(shè)計思路對自己的提升來說非常有幫助。

其實不光是小白需要臨摹，很多資深設(shè)計師甚至藝術(shù)家也會采用臨摹的方式提升自己的能力，從中學(xué)習(xí)別人的創(chuàng)作思路、表達(dá)方式，學(xué)無止境。

2.臨摹的幾個階段

不同的階段，臨摹的目的也有所區(qū)別。一般來說，前期臨摹更多的是練習(xí)軟件、技法，后期才會是練習(xí)別人的風(fēng)格表達(dá)，綜合運用。所以，我把臨摹分為3個階段：

1）技法階段，目標(biāo)是一模一樣

因為是練習(xí)技法，訓(xùn)練的是自己的軟件操作能力和觀察解構(gòu)能力，所以我通常會選擇稍難一些的作品進(jìn)行臨摹，目標(biāo)是跟原作盡可能的一模一樣。

比如我6年前臨摹的Mike大神作品，就比較考驗技法，適合初期剛?cè)腴T階段做練習(xí)。

2）半原創(chuàng)階段，目標(biāo)是保留精髓的同時有所區(qū)分

這個階段主要是練習(xí)思考和分析能力，嘗試?yán)斫庠髡哌@樣設(shè)計的原因和目的。這個階段，我通常會選擇臨摹一些有特點的圖標(biāo)或者界面，并嘗試改動原作中的一些小的元素，目標(biāo)是有保留原作的特征，又會加入更多自己的思考讓作品在細(xì)節(jié)上有所區(qū)別。

比如在2015年做的界面練習(xí)，同時還會記錄自己的思考

3）原創(chuàng)階段，目標(biāo)是準(zhǔn)確輸出自己腦中的想法

其實經(jīng)過一段時間的練習(xí)，你肯定已經(jīng)積累了不少創(chuàng)意，現(xiàn)在有實現(xiàn)能力就可以盡情發(fā)揮了。雖說是原創(chuàng)，其實也會大量找參考。剛?cè)胄性O(shè)計的時候，我一直覺得，大師應(yīng)該是可以完全自己創(chuàng)造出新的作品，但后來知道，優(yōu)秀的作品大部分都是建立在融合非常多優(yōu)質(zhì)作品精華之上完成的。之前看過暴雪的設(shè)計師分享，他們做一個場景效果，光找參考都要花掉一半的時間，可見找參考的重要性。

這個作品當(dāng)時是我在圣誕節(jié)前做的，是有參考笑臉、塑料口袋、光碟、進(jìn)度條光帶等等結(jié)合起來的原創(chuàng)作品。

3.如何找到優(yōu)質(zhì)臨摹作品？

既然是希望通過臨摹從別人的作品中學(xué)到東西才去做，那么臨摹優(yōu)質(zhì)作品就很關(guān)鍵。我一般會從Dribbble,Behance,Pinterest,Instagram和大廠出品的應(yīng)用中找臨摹對象。判斷是不是優(yōu)質(zhì)作品，可以從推薦上，細(xì)節(jié)上，吸引你的點上進(jìn)行選擇。

比如，我想做一些細(xì)節(jié)豐富的UI控件，那平時大家打王者的時候，里面的UI細(xì)節(jié)都是非常精致的，包括按鈕樣式，排版，造型，動效，可以從中學(xué)到的知識點可太多了。

在比如在Dribbble中，用關(guān)鍵詞進(jìn)行搜索，再篩選為熱門，時間選擇最近一年，就能知道流行趨勢和設(shè)計佳作了。從中選擇一些很有感覺的作品來臨摹練手，肯定很有動力了。

4.如何做臨摹思考？

不要無腦臨摹，做的過程一定要多加思考，我一般會從以下幾個方面來做分析：

1）原作好在哪？

同一個作品，閃光點的判斷因人而異，但你既然喜歡它肯定就有你看中的地方。你喜歡的那個細(xì)節(jié)，就可以是它的亮點，記錄下來就是你的思考。這些記錄會成為你下次創(chuàng)作時的靈感，在實際做項目的時候就不會腦袋空空了。

比如下面這張作品，我就很喜歡它的光影細(xì)節(jié)表達(dá)，在開關(guān)的邊緣還會有小光源的顏色影響，會有紅色和綠色的邊緣光。我覺得這張圖值得學(xué)習(xí)，所以就臨摹了下來，這張圖就是我臨摹之后的效果。

2）原作有什么問題？

記錄你覺得是問題的地方就行，不講對錯，只需有你自己的理由就行，然后嘗試給出自己的優(yōu)化方案。沒有完美的作品，但如果確實暫時看不出來也沒關(guān)系。

3）設(shè)計的難點是什么？

在做臨摹的過程中，會遇到哪些問題，比如某些效果跟原作有差異，某些字體大小間距不好把握等等，這些就是你可以學(xué)習(xí)的地方。

比如我在最初做UI的時候，就不清楚具體的設(shè)計規(guī)范，我就逐個把原作用到的間距，字體，尺寸全都量出來，然后用到臨摹的界面中，自己來摸索出設(shè)計規(guī)范，而不是去死記硬背。更多當(dāng)年我的打卡日記系列請見https://www.zcool.com.cn/work/ZODAxNzI2MA==.html

5.保持行動力的秘訣

做練習(xí)，最重要的是堅持，讓很多人苦惱的是做了幾天看不到效果就沒了動力了，但其實想要堅持做事也是有方法的。

1）按主題系列

就像挖井一樣，每次打井就要打通看到水才行，設(shè)計練習(xí)也是如此。一段時間專注一個能力的練習(xí)，學(xué)到會運用才算是真正掌握。這里我的方法是按主題系列來執(zhí)行，比如這周我主要打卡練習(xí)美食類的圖標(biāo)設(shè)計，那么就會找各種差異化的風(fēng)格來練習(xí)。系列感的練習(xí)也更容易出效果，獲得滿足感。今天練這個，明天練那個，心態(tài)很容易浮躁。

2）拆分成清單

往往做練習(xí)的時候，很多時間會花在糾結(jié)到底練什么內(nèi)容上。減少選擇的辦法就是列好清單，提前規(guī)劃好每天做的內(nèi)容，具體可以直接執(zhí)行的程度。

3）保持規(guī)律

學(xué)習(xí)最忌諱的是三天打魚兩天曬網(wǎng)，保持規(guī)律，每天進(jìn)步一點點很重要。忙的時候，也要至少保證自己比昨天有點進(jìn)度。這個進(jìn)度哪怕只是改個顏色，調(diào)個比例，或者有點思考記錄都是行的。做兩天又中斷幾天，很容易產(chǎn)生挫敗感，而每天進(jìn)步一點點的本質(zhì)就是讓你獲得心態(tài)上的穩(wěn)定感，這會成為你堅持下去的持久動力之一。

4）不斷尋求正反饋

千萬別悶頭做東西，多尋求反饋，不論是發(fā)設(shè)計作品到平臺還是朋友圈，亦或是在星球里跟一群相同想法的人互相打卡點贊，這些反饋和認(rèn)同感都會不斷激勵自己堅持下去。當(dāng)你因為堅持一件事而有收獲的時候，就能體會到一種成就感與滿足感。不斷給予自己一些正向激勵會讓自己進(jìn)入一個良性循環(huán)，更不容易放棄。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 

ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

最近幾年以來，大家能看到B端設(shè)計趨勢已經(jīng)越來越火熱，在B端設(shè)計中關(guān)于圖表的設(shè)計算是為數(shù)不多的視覺發(fā)揮點了。那么怎樣才能做好圖表設(shè)計，讓設(shè)計出來的圖表高大上，符合業(yè)務(wù)需求，讓業(yè)務(wù)方和總監(jiān)對你贊不絕口，本文就必須看完和收藏了，因為實在是太實用！

應(yīng)用設(shè)計越來越依賴數(shù)據(jù)驅(qū)動，對高質(zhì)量的數(shù)據(jù)可視化需求也越來越高。然而我們身邊卻充斥著令人困惑和誤導(dǎo)的數(shù)據(jù)圖表，但我們其實可以通過遵循一些簡單的規(guī)則來改變這個情況。

1. 選擇一個正確的圖表可視化類型

選擇錯誤的圖表類型，或默認(rèn)為最常見的數(shù)據(jù)可視化類型，可能會讓用戶感到困惑或?qū)е聦?shù)據(jù)的誤解。根據(jù)用戶希望看到的內(nèi)容，可以用多種方式表示相同的數(shù)據(jù)集。盡量做到每一次做數(shù)據(jù)可視化時都能從數(shù)據(jù)集類型分析和用戶訪談開始。 

2. 根據(jù)正負(fù)值使用正確的繪圖方向

當(dāng)使用水平條時，在基線的左側(cè)繪制負(fù)值，在右側(cè)繪制正值。不要在基線的同一側(cè)繪制負(fù)值和正值。 

3. 條形圖總是以0基線開始

刪數(shù)據(jù)起點會導(dǎo)致曲解。在下面的例子中，看左邊的圖表可以很快的得出結(jié)論，值B比D大3倍多，而實際上，兩者的差異要小得多。從0開始可以確保用戶獲得更準(zhǔn)確的數(shù)據(jù)表示。

4. 折線圖應(yīng)該要清晰體現(xiàn)y軸上的趨勢變化

對于折線圖，總是限制y軸比例從0開始可能會使圖表幾乎平坦。由于折線圖的主要目標(biāo)是表示趨勢，因此根據(jù)給定時期的數(shù)據(jù)集調(diào)整比例并保持直線占據(jù)y軸范圍的三分之二是很重要的。 

5. 使用折線圖時要考慮時間連貫性

折線圖是由線連接的“標(biāo)記”組成，通常用于可視化時間間隔內(nèi)的數(shù)據(jù)趨勢。這有助于說明數(shù)值是如何隨時間變化的，并且對于較短的時間間隔非常有效，但當(dāng)數(shù)據(jù)更新不頻繁時，這可能會導(dǎo)致混淆。 

例如: 使用折線圖來代表年度收入，如果數(shù)據(jù)是每月更新的，則每個月在圖表中會生成一個個孤立的標(biāo)記點。用戶可能會假設(shè)連接“標(biāo)記”的線代表實際值，而在特定時間實際的收入數(shù)字是未知的，所以可能會產(chǎn)生誤會。在這種情況下，使用垂直條形圖可能是一個更好的選擇。 

6. 不把折線圖強(qiáng)行”平滑“

平滑的折線圖可能在視覺上很好看，但它們錯誤地反映了背后的實際數(shù)據(jù)，而且過粗的線會模糊真正的“標(biāo)記”位置。 

7. 避免使用比例不同的雙軸折線圖

通常，為了節(jié)省可視化空間，當(dāng)有兩個具有相同度量但大小不同的數(shù)據(jù)系列時，可能傾向于使用雙軸圖。但這些圖表不僅難以閱讀，而且它們還以完全誤導(dǎo)的方式代表了兩個數(shù)據(jù)系列之間的比較。大多數(shù)用戶不會密切關(guān)注比例，只是瀏覽圖表，然后就得出了錯誤的結(jié)論。 

8. 限制餅圖中顯示的切片數(shù)量

餅狀圖是最流行的也是經(jīng)常被誤用的圖表之一。在大多數(shù)情況下，條形圖是更好的選擇。但如果你決定做一個餅狀圖，有2個比較好的建議:

1）不要超過5-7片，保持簡單

2）可以將額外的最小段分組到“其他”切片 

9. 在圖表上直接標(biāo)注

如果沒有適當(dāng)?shù)臉?biāo)簽，無論你的圖表有多好，它都不會有意義。直接在圖表上標(biāo)注對所有用戶都非常有幫助。查閱圖例需要時間和精力來理清數(shù)據(jù)和對應(yīng)的部分。 

10. 不要在切片上貼數(shù)據(jù)

將數(shù)據(jù)放在切片上可能會導(dǎo)致多個問題，在可讀性問題上和窄切片上都會有挑戰(zhàn)。相反，添加黑色標(biāo)簽?zāi)芮逦逆溄拥矫總€部分。 

11. 保持餅圖切片秩序以提升閱讀效率

在確定餅片秩序時，有幾種常用的方法:

1）將最大的切片放在12點的位置，然后將下一片切片順時針降序排列

2）把最大的切片放在12點的位置，第二大的放在順時針相鄰位置，第三大的放在11點的位置，其余的切片按順時針降序排列 

12. 避免隨機(jī)排列

同樣的建議也適用于其他許多圖表。不要默認(rèn)采用字母排序，將最大的數(shù)值放在頂部(對于水平條形圖)或左側(cè)(對于垂直條形圖)，以確保最重要的數(shù)值占據(jù)最突出的空間，減少眼球運動和閱讀圖表所需的時間。 

13. 窄的餅圖是難閱讀的

餅圖通常不是最容易閱讀的圖，因為比較相似的值非常困難。當(dāng)我們把中間部分去掉，創(chuàng)建一個圓圈圖表時，我們騰出了空間來顯示額外的信息，但這樣犧牲了清晰度，極端情況下，圖表就會變得毫無用處。 

14. 視覺效果不要搶了數(shù)據(jù)風(fēng)頭

不必要的造型不僅會分散注意力，還可能導(dǎo)致對數(shù)據(jù)的誤解和用戶的錯誤印象。你應(yīng)該避免:

1）3D元素，明暗面

2）陰影、漸變和其他扭曲的多彩色

3）斑馬圖案，過多的網(wǎng)格線

4）過度裝飾，斜體，粗體或襯線字體 

15. 選擇與數(shù)據(jù)性質(zhì)相匹配的調(diào)色板

顏色是有效的數(shù)據(jù)可視化的組成部分，在設(shè)計時考慮以下3種顏色類型:一個定性調(diào)色板最適合顯示分類變量。為確保易用性，所分配的顏色應(yīng)該是不同的。連續(xù)調(diào)色板最適合需要按特定順序放置的數(shù)字變量。使用色相或亮度或兩者的組合，可以創(chuàng)建一個連續(xù)的顏色集。

發(fā)散調(diào)色板是兩個連續(xù)調(diào)色板的組合，中間有一個中心值(通常為0)。通常不同的調(diào)色板將傳達(dá)積極和消極的價值。確保顏色也與“消極”和“積極”表現(xiàn)的概念相匹配。 

看看一個方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以幫助你生成各種調(diào)色板。 

16. 設(shè)計的可訪問性

根據(jù)美國國家眼科研究所(National Eye Institute)的數(shù)據(jù)，大約每12人中就有1人是色盲。你的圖表只有在廣泛的受眾可以訪問時才會成功。

1）在調(diào)色板中使用不同的飽和度和亮度

2）把現(xiàn)有配色去色然后檢查對比度和可讀性。 

17. 關(guān)注易讀性

確保排版能夠準(zhǔn)確傳達(dá)信息，幫助用戶專注于數(shù)據(jù)，而不是分散用戶的注意力。

1）選擇易讀的字體，避免襯線和裝飾過度的字體

2）避免使用斜體、粗體和全部大寫

3）確保與背景有高對比度

4）不要旋轉(zhuǎn)文字

18. 使用水平條形圖代替旋轉(zhuǎn)標(biāo)簽

這個簡單的技巧將確保用戶能夠更有效地閱讀圖表，而不會扭傷他們的脖子。 

19. 事先選擇合適的圖表庫

如果你的任務(wù)是在web和移動項目中添加交互式圖表，你應(yīng)該問的第一個問題是我們將使用什么圖表庫?現(xiàn)代圖表庫包含了許多前面提到的交互和規(guī)則?；谝讯x庫的設(shè)計將確保易于實現(xiàn)，并能提供大量交互想法。 

20. 做成動態(tài)圖表

幫助用戶通過改變參數(shù)，可視化數(shù)據(jù)進(jìn)行探索。然后得出結(jié)論，最大化價值和洞察力。在下面的示例中，你可以看到IOS Health應(yīng)用使用了各種數(shù)據(jù)表示的組合。 

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

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

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

B 端產(chǎn)品主要是 Web 端產(chǎn)品，空間大、操作多，內(nèi)容相對復(fù)雜。需要通過頁面布局或者視覺設(shè)計表達(dá)出明確的邏輯關(guān)系，從設(shè)計角度降低用戶的學(xué)習(xí)成本。而用戶有固定的認(rèn)知規(guī)律。格式塔原理揭示了人類視覺的認(rèn)知是整體的：我們的視覺系統(tǒng)自動對視覺輸入構(gòu)建結(jié)構(gòu)，并在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區(qū)域。

格式塔主要包括 7 個基本原則：

今天我們就來總結(jié)下，格式塔原理在 B 端產(chǎn)品中是如何應(yīng)用的？

接近性原則

我們先看 2 張截圖，分別是不同分辨率下的界面效果。

可以明顯的感覺到高分辨率下，菜單列間距離較大，菜單的歸屬關(guān)系很清晰。而低分辨率下，菜單間的距離變小，特別是后面兩列的菜單會給人混在一起的感覺。這就是格式塔原理中的接近性原則，距離近的關(guān)聯(lián)親密，距離遠(yuǎn)的就各自獨立分組。

當(dāng)我們想要傳達(dá)給用戶層級關(guān)系時，就需要善于利用接近性原則。例如表格上方的功能按鈕，通常我們將高頻、核心操作放置在左側(cè)，低頻、輔助功能放置在右側(cè)。通過增大元素間的距離，達(dá)到功能分區(qū)的目的。

相似性原則

相似性原則是通過顏色、尺寸、圖形等方面的共同屬性，實現(xiàn)信息的分組或者高可讀性。

例如在可視化圖表中，不同范圍值的指標(biāo)采用不同的背景色。通過背景色的差異，將同一范圍內(nèi)的數(shù)據(jù)形成視覺關(guān)聯(lián)，提高用戶對信息的識別效率。

通過圖形尺寸的相似性也可以構(gòu)建內(nèi)容分區(qū)。例如阿里云、騰訊云控制臺的首頁，都采用了雙列設(shè)計，左側(cè)主要以高頻的業(yè)務(wù)功能信息為主，右側(cè)是輔助運營信息。兩列尺寸寬度有明顯差異，用戶會將相同寬度的卡片歸為一組。這樣有助于用戶理解兩類卡片的內(nèi)容差異，并有效地突出業(yè)務(wù)信息。

閉合性原則

IBM、蘋果的 Logo 設(shè)計，無論是“用刀砍過”，還是被“偷咬了一口”，用戶仍然可以識別出完整圖形。這就是視覺閉合性原則的一種表現(xiàn)方式。

在 UI 設(shè)計中，則會通過對齊方式，形成虛擬空間。例如下圖中阿里云通過明顯的背景色、陰影等手法形成有形的內(nèi)容空間。而微信公眾號則是平鋪背景色，內(nèi)容區(qū)借助標(biāo)題、卡片對齊形成視覺閉合空間，最終將頁面劃分為左側(cè)導(dǎo)航菜單和內(nèi)容區(qū)兩個空間。視覺表現(xiàn)上更輕量化。

另外閉合性是需要元素之間相互輔助的，單獨的元素?zé)o法構(gòu)建出閉合空間。以下圖為例，雖然四個小的卡片做了間距分割，但是由于界面整體上是橫向分割的。我們會將 4 個卡片看作是整體元素去理解和認(rèn)知。

連續(xù)性原則

用戶更習(xí)慣于從左到右的橫掃閱讀，因此連續(xù)性主要體現(xiàn)在橫向空間中。

下圖中，雖然左側(cè)的標(biāo)簽文字與右側(cè)的內(nèi)容信息有較為明顯的間距，高度尺寸差距也比較大。但是用戶不會將內(nèi)容看作是 4 個獨立的個體，而是理解為兩組信息。

在某些場景中，如果信息平均分布，不會產(chǎn)生連續(xù)性的視覺感知。

例如下圖指標(biāo)監(jiān)控中，指標(biāo)都是采用小卡片，間距、尺寸較為統(tǒng)一。這種情況下用戶就很難對信息分組處理。在我看來這些指標(biāo)只是一個個的視覺散點，沒有明確的視覺重點。用戶無法感知到內(nèi)在的邏輯性。用戶想要找到某個指標(biāo)時，需要逐個檢索，花費的成本更高。

簡單對稱原則

通過上述很多圖片，我們可以看出頁面元素基本都是橫平豎直，中規(guī)中矩的元素和分割方式。或許有些單調(diào)乏味，但是勝在簡單，不會帶來額外的視覺噪點。

特別是 B 端產(chǎn)品，基本看不到異形的存在，甚至全圓角矩形都很少見到。即使有異形，也只是作為視覺表現(xiàn)元素存在于內(nèi)容中，而不會作為空間的劃分邊界。

主體與背景原則

主體與背景原則最典型的應(yīng)用就是蒙版彈窗。通過拉大主體與背景的差異性，凸顯彈窗信息。

當(dāng)我們需要著重表現(xiàn)內(nèi)容時，同樣適用于主體與背景原則。例如登錄界面的設(shè)計，會通過差異化的背景、陰影等方式，帶給用戶清晰的視覺層級，適當(dāng)凸顯輸入框的主體地位。

而 B 端內(nèi)容區(qū)是核心空間，基本都是采用純白背景，與頁面背景形成對比，從而占據(jù)信息的主體地位。

共同命運原則

共同命運原則聽起來有點玄學(xué)，指的是相同運動特征的元素會被認(rèn)為是同一組或者是具有相關(guān)性的內(nèi)容。運動的元素在 B 端產(chǎn)品中應(yīng)用很少，我沒有找到合適的案例解釋這個原理。

在移動端產(chǎn)品中有些應(yīng)用案例。比如 iOS 系統(tǒng)中，桌面布局編輯態(tài)下抖動的圖標(biāo)，可以與靜態(tài)不可編輯的內(nèi)容形成隔離效果，視覺引導(dǎo)性更強(qiáng)。同樣今日頭條頻道編輯時，也采用了抖動效果。

總結(jié)

雖然 B 端產(chǎn)品沒有 C 端色彩豐富，表現(xiàn)力上沒那么炫酷。但是兩者對信息傳達(dá)的要求是一樣的，要求和諧、有序、層次分明，輔助傳達(dá)內(nèi)在的業(yè)務(wù)層信息。靈活地運用格式塔原理將對產(chǎn)品的體驗提升會有很大的幫助。

格式塔原理不僅限于視覺表現(xiàn)，產(chǎn)品經(jīng)理或交互設(shè)計師在原型設(shè)計時，也要重視格式塔原理，輔助設(shè)計方案表達(dá)，提高團(tuán)隊間的協(xié)作效率。

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

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

What 是什么

簡介： 按鈕組是把相關(guān)的動作組織成一組按鈕的設(shè)計模式。按鈕組的內(nèi)部內(nèi)容彼此水平或垂直對齊，并采用相似的視覺設(shè)計。如果超過三個或四個動作，往往會采取多個分組。

例子： 語雀編輯器的頂部工具欄

Why 為什么

按鈕組可以讓界面不言自明。在復(fù)雜的布局中，被精心安排過的按鈕組會很容易被用戶感知和使用。一方面，它們在界面上往往非常明顯，用戶能夠一眼看到有這些功能可以進(jìn)行相關(guān)操作。

大家所熟知的格式塔原則（Gestalt principles）也在這里起作用。彼此相鄰的按鈕往往暗示著這些按鈕的功能相近，因此會讓用戶感覺到這一組按鈕可以完成類似的功能。相對的，不同的按鈕分組往往暗示著不同的功能類型，因此彼此間應(yīng)該保持間距，或用不同的形狀，或用分割線進(jìn)行區(qū)分。

When 什么時候使用

如果你需要在界面上展示許多操作按鈕，且需要確保它們隨時在界面上可見。但同時，你又需要用圖形化的方式組織它們，以使它們看起來不會特別散亂。

這些動作中有許多是彼此相似的 —— 它們有相似或互補(bǔ)的效果，比如，它們的功能語義相類似 —— 由此它們可以三五成組地放在一起。

按鈕組可以用在對產(chǎn)品全局有效的操作上（例如「打開」和「選項」操作），或特定的一些通用操作（「保存」、「編輯」和「刪除」），或特定的某些操作（例如布局的「對齊」、「分布」）。不同范圍的操作不應(yīng)當(dāng)被到一個組中。

使用條件：

· 存在大量操作按鈕；

· 希望用圖形化的方式組織這些按鈕；

· 操作按鈕間存在功能相關(guān)性和差異性；

How 如何使用

這個模式的總結(jié)簡單到像是一句廢話：把相關(guān)的操作按鈕分成一組。

但如果詳細(xì)展開就會有更多的介紹。比如：

· 如果需要包含文本說明，盡量使用兩個字或三個字的動詞短語，不要使用專業(yè)術(shù)語。

· 不要把不同功能范圍的按鈕放在一個組，應(yīng)當(dāng)將它們分成不同的分組。

· 同一組的按鈕應(yīng)該有同樣的視覺設(shè)計：邊框、顏色、高度或?qū)挾?、圖標(biāo)風(fēng)格、動態(tài)效果等。

· 在空間排布上，可以將它們并排起來作為橫排放置，如果空間不太適用的話，也可以考慮一列縱列放置（例如Photoshop的左側(cè)工具欄）。

· 如果某一個動作是核心動作，可以將其區(qū)別對待。例如網(wǎng)頁表單中的“提交”按鈕。核心動作是希望大部分用戶都需要（或期待）執(zhí)行的動作。讓這個按鈕擁有更加強(qiáng)烈的圖形或視覺風(fēng)格來讓它在顯得更為突出。

· 如果按鈕足夠多，而且它們都有小圖標(biāo)，你也可以把它們放在工具條或者像工具條那樣的狹長條上，放置在頁面的頂部。

通過使用按鈕組可以避免界面上按鈕或鏈接過于擁擠混亂，也可以避免一長串冗長的動作列表看起來毫無關(guān)聯(lián)或區(qū)別。

通過這一模式，你可以創(chuàng)建一個較為清晰的元素層級結(jié)構(gòu)：用戶可以一眼看出哪些動作是彼此相關(guān)的，哪些是重要的。

Example 案例

案例一：Sketch 的頂部按鈕工具區(qū)

用戶需求：編輯設(shè)計文件中的對象

Sketch 也是個很典型的應(yīng)用了按鈕組的設(shè)計工具。Sketch頂部的按鈕不少于15個， 有很多要理解和追查。 但是得益于精心的視覺和語義組織，界面按鈕始終保持一定的可理解性。

案例二：macOS Finder

用戶需求：按自己需求對文件進(jìn)行顯示修改和操作

這個案例顯示了來自 macOS 的 Finder 窗口的頂部按鈕組。 秉承其設(shè)計傳統(tǒng)，按鈕風(fēng)格明顯。 導(dǎo)航組是放置在左側(cè)中的按鈕組。 布局相關(guān)的按鈕組放在了中間，文件操作相關(guān)的按鈕組放在了右側(cè)。這樣的設(shè)計使得界面變得易于理解和使用。

案例三：WebStorm 頂部操作區(qū)

用戶需求：項目執(zhí)行相關(guān)操作

這個案例顯示了 Webstorm 的頂部功能操作區(qū)。WebStorm 采用了按鈕組的模式，將項目執(zhí)行的相關(guān)操作和Git相關(guān)的操作聚合在一起，中間使用了分割線進(jìn)行了區(qū)分。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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