為回饋新老用戶(hù)、持續(xù)提升業(yè)務(wù)增長(zhǎng)、打造品牌影響力，開(kāi)展年終回饋活動(dòng)；本次活動(dòng)通過(guò)拉新、促活、轉(zhuǎn)化等方式實(shí)現(xiàn)用戶(hù)和業(yè)務(wù)的增長(zhǎng)。

基于兔年和送福的節(jié)日習(xí)俗，采用了“福兔迎新”主題，并結(jié)合業(yè)務(wù)目標(biāo)，構(gòu)建活動(dòng)玩法。

在頁(yè)面交互上，需建立統(tǒng)一框架承載豐富的玩法，也要保證易用性和擴(kuò)展性。

為保證主頁(yè)進(jìn)出游戲的體驗(yàn)流暢，采用了統(tǒng)一的結(jié)構(gòu)框架。頂部標(biāo)題固定，中間模塊下移，露出游戲區(qū)域，再利用過(guò)渡動(dòng)效，保證無(wú)縫轉(zhuǎn)場(chǎng)的自然流暢。

3.1 標(biāo)題 &圖形設(shè)計(jì)

在標(biāo)題設(shè)計(jì)中，將“兔”耳造型融入字體設(shè)計(jì)中，與主視覺(jué)相呼應(yīng)，營(yíng)造濃郁的兔年氛圍。傾斜8度的字體，展現(xiàn)出我們對(duì)新年蓬勃向上的精神追求和快速高效的業(yè)務(wù)增長(zhǎng)速度。統(tǒng)一圓角處理和圓點(diǎn)元素延續(xù)了順豐logo的設(shè)計(jì)，更好地提升了親和力。

簡(jiǎn)潔的符號(hào)往往可以傳達(dá)強(qiáng)有力的情感，所以選取了兔年元素和中國(guó)傳統(tǒng)紋飾融入到此次活動(dòng)的代幣設(shè)計(jì)中。這些符號(hào)也延續(xù)使用在活動(dòng)頁(yè)的其他設(shè)計(jì)和頁(yè)面裝飾上。

3.2 IP形象設(shè)計(jì)

“福兔”作為本次活動(dòng)的IP卡通形象，將貫穿于活動(dòng)各場(chǎng)景。小游戲中福兔作為重要角色，親切可愛(ài)的造型配上鮮活豐富的表情不僅能引起用戶(hù)共鳴，流暢輕松的動(dòng)作還能極大提升用戶(hù)的操作體驗(yàn)，增強(qiáng)活動(dòng)趣味性和互動(dòng)性。

福兔的造型設(shè)計(jì)從以下幾方面去結(jié)合順豐品牌元素：

· 強(qiáng)調(diào)品牌標(biāo)志：帶有順豐logo的杜邦紙袋延展設(shè)計(jì)為福兔的斜挎包

· 從細(xì)節(jié)入手：福兔的圓形腮紅與順豐快遞員IP形象的腮紅設(shè)計(jì)呼應(yīng)，同時(shí)也與順豐logo紅色圓點(diǎn)一脈相承。

我們?yōu)楦Ｍ迷O(shè)計(jì)了小游戲中的多種狀態(tài)動(dòng)畫(huà)，用豐富多變的表情，可愛(ài)的肢體語(yǔ)言，融入到小游戲中，增強(qiáng)游戲過(guò)程趣味性和可玩性，提升沉浸感。

與開(kāi)發(fā)協(xié)作在動(dòng)效上使用了spine骨骼動(dòng)畫(huà)，通過(guò)控制骨骼，可以快速輸出各種動(dòng)作，減少了動(dòng)畫(huà)體積，提升頁(yè)面加載速度。

“福兔跳跳”小游戲，通過(guò)躲避“鞭炮”障礙物，跳躍收集“福氣值”、“獎(jiǎng)勵(lì)金”。同時(shí)設(shè)置難度不同的關(guān)卡，以提高游戲的挑戰(zhàn)性和可玩性。

3.3 場(chǎng)景設(shè)計(jì)

主頁(yè)場(chǎng)景跟隨節(jié)日以提升感知，通過(guò)換膚減少視覺(jué)疲勞。隨著節(jié)日變化，色彩和營(yíng)銷(xiāo)氛圍感也隨之增強(qiáng)。

為了增強(qiáng)游戲氛圍、新鮮感，提高游戲體驗(yàn)。小游戲與主頁(yè)同步進(jìn)行換膚，前進(jìn)時(shí)街景也會(huì)呈現(xiàn)節(jié)日特色建筑、裝飾。

為了突出用戶(hù)的品牌感知，在背景街道設(shè)計(jì)中，盡可能融入了較多順豐元素，快遞箱、貨車(chē)、LOGO等等。

3.4 其他

多玩法設(shè)計(jì)

小游戲玩法，符合大眾群體的偏好；獎(jiǎng)勵(lì)金、配對(duì)搶免單有效提升用戶(hù)留存，激勵(lì)用戶(hù)持續(xù)參與活動(dòng)；兌獎(jiǎng)、沖榜玩法回饋高價(jià)值用戶(hù)，豐厚獎(jiǎng)品打造活動(dòng)口碑。

引導(dǎo)設(shè)計(jì)

在活動(dòng)的不同觸點(diǎn)對(duì)用戶(hù)進(jìn)行引導(dǎo)與轉(zhuǎn)化。

年終活動(dòng)是一年中業(yè)務(wù)搶收的重要節(jié)點(diǎn)。活動(dòng)上線后，整體上活動(dòng)的訪問(wèn)量、參與率及留存率，均表現(xiàn)不俗，達(dá)到預(yù)期目標(biāo)。未來(lái)我們會(huì)繼續(xù)在運(yùn)營(yíng)活動(dòng)的創(chuàng)新上探索更多有趣好玩的方向，豐富用戶(hù)體驗(yàn)，挖掘創(chuàng)新玩法。

我們下個(gè)活動(dòng)再見(jiàn)～

前言

作為設(shè)計(jì)師的你，是否也遇到過(guò)這樣的問(wèn)題：

1.負(fù)責(zé)的業(yè)務(wù)線產(chǎn)品邏輯復(fù)雜難懂，產(chǎn)品自己想不清楚需求，導(dǎo)致項(xiàng)目難以有效推進(jìn)；

2.設(shè)計(jì)方案拍板的人太多，一人一個(gè)想法，溝通成本高，還總是返工；

3.設(shè)計(jì)優(yōu)化找不到頭緒，不知道是否匹配產(chǎn)品目標(biāo)等等…

本文將從what、why、how三方面帶你一起解讀設(shè)計(jì)共創(chuàng)的方法論模型，并以實(shí)際案例為指導(dǎo)，分享設(shè)計(jì)共創(chuàng)五步法；感受在設(shè)計(jì)過(guò)程中，通過(guò)與其他核心角色一起共創(chuàng)，從明確共同目標(biāo)、共同決策、共創(chuàng)設(shè)計(jì)、共同評(píng)價(jià)，到最終共享設(shè)計(jì)成果過(guò)程。

一起來(lái)赴一場(chǎng)創(chuàng)新共贏的設(shè)計(jì)盛宴吧！

What-什么是設(shè)計(jì)共創(chuàng)

共創(chuàng)行為由來(lái)已久

共創(chuàng)模式并非現(xiàn)代社會(huì)的新生事物，其萌芽可追溯至人類(lèi)文明早期，比如中國(guó)最早的詩(shī)歌總集《詩(shī)經(jīng)》、古希臘的《荷馬史詩(shī)·伊利亞特》等耳熟能詳?shù)奈膶W(xué)作品，都是在民間大眾共創(chuàng)基礎(chǔ)上再由作者整理完成的；還有《永樂(lè)大典》、《四庫(kù)全書(shū)》等大型文化工程著作，都是集體協(xié)作的結(jié)晶。共創(chuàng)行為在人類(lèi)文化發(fā)展史的各個(gè)階段，我們都可見(jiàn)其蹤影。

設(shè)計(jì)共創(chuàng)的定義

1.名詞定義

網(wǎng)上較少關(guān)于設(shè)計(jì)共創(chuàng)方法的完整介紹和明確定義，只有一些相關(guān)資料是對(duì)于該方法的理解。

如：“Co-designis a design-led process that uses creative participatory methods. There is noone-size-fits-all approach nor a set of check- lists to follow. Instead, thereare a series of patterns and principles that can be applied in different wayswith different people. Co- designers make decisions, not just suggestions”(Burkett, 2012).

“協(xié)同設(shè)計(jì)是一個(gè)通過(guò)使用創(chuàng)造性和參與性的方法進(jìn)行設(shè)計(jì)的過(guò)程。在這個(gè)過(guò)程中，沒(méi)有一種放之四海而皆準(zhǔn)的方法。但是，有一系列的模式和原則可以與不同的人以不同的方式進(jìn)行應(yīng)用。協(xié)同設(shè)計(jì)是為了做出決策，而不僅僅是建議”

2.筆者對(duì)設(shè)計(jì)共創(chuàng)的理解

經(jīng)過(guò)在實(shí)際工作中的不斷實(shí)踐和應(yīng)用，用一句話來(lái)總結(jié)我對(duì)設(shè)計(jì)共創(chuàng)的理解：“邀請(qǐng)核心角色參與設(shè)計(jì)關(guān)鍵過(guò)程，共識(shí)問(wèn)題和目標(biāo)、了解設(shè)計(jì)思考過(guò)程并共同決策、共識(shí)評(píng)價(jià)標(biāo)準(zhǔn)并共享設(shè)計(jì)成果”

Why-為什么要使用設(shè)計(jì)共創(chuàng)

設(shè)計(jì)共創(chuàng)的價(jià)值

設(shè)計(jì)共創(chuàng)有以下三個(gè)重要價(jià)值

1.打破能力邊界：個(gè)人能力是有限的，通過(guò)卷入其他核心角色的參與，發(fā)揮各個(gè)角色優(yōu)勢(shì)，實(shí)現(xiàn)資源的優(yōu)勢(shì)整合，有效打破個(gè)人能力的邊界。

2.豐富視角維度：設(shè)計(jì)是一個(gè)不斷平衡的過(guò)程，了解并兼容更多信息才能使方案更加完備，然而設(shè)計(jì)的單一視角往往是具有局限性，設(shè)計(jì)共創(chuàng)可以幫我我們從多視角思考問(wèn)題，有效規(guī)避風(fēng)險(xiǎn)。

3.拓展價(jià)值廣度：項(xiàng)目的價(jià)值如果僅僅從設(shè)計(jì)角度進(jìn)行評(píng)估會(huì)顯得單薄，難以獲得其他角色的認(rèn)可。通過(guò)多角色共建評(píng)估標(biāo)準(zhǔn)拓展價(jià)值廣度，最終實(shí)現(xiàn)價(jià)值共享。

什么類(lèi)型的項(xiàng)目適合進(jìn)行設(shè)計(jì)共創(chuàng)

實(shí)際工作中我們通常會(huì)從項(xiàng)目的相對(duì)設(shè)計(jì)成本和相對(duì)設(shè)計(jì)價(jià)值兩個(gè)維度來(lái)評(píng)估項(xiàng)目類(lèi)型。設(shè)計(jì)價(jià)值相對(duì)較高，又具有一定設(shè)計(jì)成本的項(xiàng)目，比較適合進(jìn)行設(shè)計(jì)共創(chuàng)。例如一些業(yè)務(wù)邏輯復(fù)雜的改版項(xiàng)目、從0-1的前瞻探索項(xiàng)目、設(shè)計(jì)多方?jīng)Q策的橫向項(xiàng)目等。

對(duì)設(shè)計(jì)成本、設(shè)計(jì)價(jià)值的理解

相對(duì)設(shè)計(jì)成本通常由業(yè)務(wù)復(fù)雜度、需求是否明確、溝通成本量決定；而對(duì)相對(duì)設(shè)計(jì)價(jià)值的評(píng)估則需要從用戶(hù)、業(yè)務(wù)、設(shè)計(jì)三個(gè)視角進(jìn)行評(píng)估。

設(shè)計(jì)共創(chuàng)流程 VS 常規(guī)設(shè)計(jì)流程

對(duì)比我們常規(guī)的設(shè)計(jì)流程，設(shè)計(jì)角色通常作為一個(gè)需求的把關(guān)者出現(xiàn)，重點(diǎn)參與需求確認(rèn)后的設(shè)計(jì)相關(guān)環(huán)節(jié)，最終從設(shè)計(jì)單一視角進(jìn)行項(xiàng)目復(fù)盤(pán)。在項(xiàng)目從需求到上線的整個(gè)過(guò)程中作為被動(dòng)者的角色，斷點(diǎn)式的參與，缺少控制權(quán)。

而設(shè)計(jì)共創(chuàng)流程要求我們?cè)陧?xiàng)目的各個(gè)環(huán)節(jié)深度參與共同決策，變被動(dòng)為主動(dòng)，從共創(chuàng)視角全流程掌握項(xiàng)目細(xì)節(jié)，提高對(duì)業(yè)務(wù)的理解和判斷。

How-如何開(kāi)展設(shè)計(jì)共創(chuàng)

以《百度保障體驗(yàn)優(yōu)化項(xiàng)目》為例

注：百度保障項(xiàng)目主要服務(wù)于百度網(wǎng)民權(quán)益保障計(jì)劃，這是百度聯(lián)合國(guó)家司法部、消協(xié)推出的首個(gè)搜索引擎網(wǎng)民權(quán)益保障體系，其目的是為了更好的保障網(wǎng)民的合法權(quán)益，當(dāng)用戶(hù)在百度進(jìn)行搜索、購(gòu)物等行為時(shí)，遭到釣魚(yú)、欺詐、假冒官網(wǎng)并造成經(jīng)濟(jì)損失時(shí)，可以享有一定額度的保障金，屬于百度APP的特色功能。

從項(xiàng)目的相對(duì)設(shè)計(jì)成本、相對(duì)設(shè)計(jì)價(jià)值來(lái)看，百度保障體驗(yàn)優(yōu)化是一個(gè)設(shè)計(jì)成本&價(jià)值相對(duì)較高的項(xiàng)目，比較適合進(jìn)行設(shè)計(jì)共創(chuàng)：

1.相對(duì)設(shè)計(jì)成本高

①業(yè)務(wù)復(fù)雜：百度保障是一個(gè)涉及BC雙端用戶(hù)的產(chǎn)品，流程復(fù)雜，設(shè)計(jì)側(cè)處于剛接手的階段，對(duì)業(yè)務(wù)邏輯不熟悉。

②需求不明確：百度保障業(yè)務(wù)屬于百度特色功能，起步晚且少有可參考的行業(yè)競(jìng)品，常常是一句話的改版需求。

③溝通成本高：產(chǎn)品團(tuán)隊(duì)新調(diào)整，一線產(chǎn)品同學(xué)經(jīng)驗(yàn)不足，缺少成熟的合作流程，總是頻繁改需求。

2.相對(duì)設(shè)計(jì)價(jià)值高

①用戶(hù)體驗(yàn)差：保障業(yè)務(wù)體量雖小，面對(duì)的用戶(hù)卻都屬于高危用戶(hù)，然而之前的功能沒(méi)有經(jīng)過(guò)設(shè)計(jì)介入，用戶(hù)體驗(yàn)極差。

②業(yè)務(wù)重點(diǎn)：影響百度口碑，是產(chǎn)品側(cè)的重點(diǎn)優(yōu)化對(duì)象。③設(shè)計(jì)視角：改版需求設(shè)計(jì)發(fā)揮空間大，產(chǎn)品給予高度配合。

《設(shè)計(jì)共創(chuàng)五步法》

接下來(lái)將結(jié)合《百度保障體驗(yàn)優(yōu)化項(xiàng)目》說(shuō)明設(shè)計(jì)共創(chuàng)的實(shí)踐路徑。

第一步：業(yè)務(wù)理解

1.項(xiàng)目背景摸底

產(chǎn)品最初的需求只有一句話“保障官網(wǎng)目前體驗(yàn)很差，很久沒(méi)有優(yōu)化過(guò)了，需要設(shè)計(jì)團(tuán)隊(duì)幫忙整體改版”，并在此基礎(chǔ)上提出一些非常稀碎的優(yōu)化點(diǎn)，缺乏關(guān)聯(lián)性和整體性。

設(shè)計(jì)側(cè)開(kāi)始通過(guò)定性、定量多種形式對(duì)業(yè)務(wù)進(jìn)行摸底，明確整體的業(yè)務(wù)邏輯以及保障官網(wǎng)所處的位置，并通過(guò)用戶(hù)反饋和用戶(hù)數(shù)據(jù)分析問(wèn)題，明確用戶(hù)的真實(shí)訴求。

2.理解業(yè)務(wù)價(jià)值

通過(guò)業(yè)務(wù)摸底，設(shè)計(jì)側(cè)將對(duì)業(yè)務(wù)價(jià)值、業(yè)務(wù)邏輯的整體理解梳理出來(lái)，并與產(chǎn)品確認(rèn)達(dá)成共識(shí)。

百度保障業(yè)務(wù)有三個(gè)重要的環(huán)節(jié)：保障官網(wǎng)、申請(qǐng)保障、保單管理。通過(guò)這三個(gè)環(huán)節(jié)建立起用戶(hù)端和商家端之間的聯(lián)系。其中，百度保障官網(wǎng)起著非常重要的信息傳達(dá)、用戶(hù)保障認(rèn)知建立的作用。

3.現(xiàn)狀問(wèn)題分析

百度保障官網(wǎng)作為重要的保障認(rèn)知傳達(dá)陣地，存在框架層級(jí)混亂、信息簡(jiǎn)陋缺乏針對(duì)性、傳達(dá)效率低等問(wèn)題。

第二步：共識(shí)目標(biāo)

通過(guò)多角色溝通，我們將官網(wǎng)改版的核心目標(biāo)確認(rèn)為“如何從BC雙視角重塑官網(wǎng)信息強(qiáng)化保障認(rèn)知，讓官網(wǎng)內(nèi)容更易理解”。

在共識(shí)目標(biāo)的過(guò)程中，設(shè)計(jì)側(cè)可以先基于共識(shí)的業(yè)務(wù)價(jià)值和問(wèn)題定一個(gè)初版目標(biāo)，然后拉其他核心角色一起討論，避免無(wú)目的低效率溝通，在基本共識(shí)點(diǎn)的基礎(chǔ)上更容易達(dá)成一致。

第三步：設(shè)計(jì)共創(chuàng)

基于共識(shí)目標(biāo)，設(shè)計(jì)側(cè)組織開(kāi)展多角色腦暴進(jìn)行設(shè)計(jì)方向共創(chuàng)和方案細(xì)節(jié)共創(chuàng)。

1.設(shè)計(jì)方向腦暴共創(chuàng)

①共創(chuàng)前-充分準(zhǔn)備有效的腦暴和共創(chuàng)過(guò)程需要組織者具備清晰的思路和明確的引導(dǎo)。在腦暴前我進(jìn)行了詳細(xì)的腦暴議程安排，并通過(guò)郵件和工作群的方式同步給參會(huì)同學(xué)，要求所有參會(huì)同學(xué)會(huì)議前完成閱讀，保證信息同步。

②共創(chuàng)中-把控節(jié)奏

共創(chuàng)過(guò)程中為了保障腦暴的質(zhì)量，我會(huì)要求全部參會(huì)同學(xué)關(guān)閉電腦聚焦在討論的目標(biāo)上，明確問(wèn)題和目標(biāo)→各自思考并用標(biāo)簽記錄想法→共同討論并在大白板上進(jìn)行整理分析→得出共識(shí)結(jié)論。

以C用戶(hù)官網(wǎng)優(yōu)化視角來(lái)舉例

我們?cè)诠沧R(shí)官網(wǎng)想要為C用戶(hù)營(yíng)造的感知是讓他們能【了解保障作用，建立信任感，知道如何申?！恐?。從使用場(chǎng)景、用戶(hù)訴求、訴求滿足依次進(jìn)行腦暴共創(chuàng)：

1.核心場(chǎng)景：通過(guò)對(duì)業(yè)務(wù)的理解發(fā)散討論用戶(hù)什么場(chǎng)景下會(huì)來(lái)到保障官網(wǎng)，大家一起共識(shí)了兩個(gè)核心場(chǎng)景。

2.用戶(hù)訴求：基于核心場(chǎng)景，將自己帶入用戶(hù)，想象進(jìn)入保障官網(wǎng)的自己核心訴求是什么？每個(gè)人寫(xiě)下自己的想法，然后貼標(biāo)簽找共性，共識(shí)核心訴求。

3.訴求滿足：共識(shí)訴求后，我們轉(zhuǎn)變視角，思考作為產(chǎn)品設(shè)計(jì)師我們可以通過(guò)提供哪些內(nèi)容來(lái)滿足用戶(hù)的訴求。同樣的，每個(gè)人寫(xiě)下自己的想法后貼標(biāo)簽找共性，此次的內(nèi)容對(duì)于官網(wǎng)信息的呈現(xiàn)已經(jīng)起到很大的決定性作用，再此基礎(chǔ)上，我們一起投票決定信息的優(yōu)先級(jí)完成頁(yè)面內(nèi)容的基本布局并形成共識(shí)結(jié)論。

③共創(chuàng)后-記錄共識(shí)共創(chuàng)后，最重要就是及時(shí)記錄共識(shí)結(jié)論并同步到所有相關(guān)成員進(jìn)行確認(rèn)，這樣不僅可以幫助我們理清思路，更能夠很好的減少后續(xù)結(jié)論變動(dòng)的風(fēng)險(xiǎn)，降低溝通成本。

2.方案細(xì)節(jié)共創(chuàng)

①?zèng)Q策框架層方案以官網(wǎng)中BC用戶(hù)信息的強(qiáng)弱關(guān)系為依據(jù)，進(jìn)行框架結(jié)構(gòu)的多方案發(fā)散，并通過(guò)制作demo的方式完成不同方案的原型效果。

拉關(guān)鍵角色進(jìn)行體驗(yàn)并投票。大家一致認(rèn)為【方案3：強(qiáng)化C弱化B】的效果更符合我們的優(yōu)化目標(biāo)。

在框架方案3的基礎(chǔ)上，進(jìn)行方案細(xì)化。對(duì)比線上原方案，框架層有兩個(gè)核心優(yōu)化點(diǎn)：

1.層級(jí)優(yōu)化：由原層級(jí)關(guān)系不清晰的5個(gè)頁(yè)面，減少后一個(gè)C用戶(hù)首頁(yè)+B商家二級(jí)頁(yè)，重點(diǎn)突出層級(jí)簡(jiǎn)單。

2.提高屏效：將原來(lái)的雙底bar合并，提高頁(yè)面展示屏效。

②共識(shí)信息表現(xiàn)層方案

在信息層基于腦暴共創(chuàng)結(jié)論對(duì)內(nèi)容信息進(jìn)行了重構(gòu)，完成官網(wǎng)認(rèn)知的搭建，主要有以下3個(gè)優(yōu)化點(diǎn)：

1.內(nèi)容更豐滿：根據(jù)腦暴結(jié)論C用戶(hù)首頁(yè)增加9個(gè)內(nèi)容模塊，B商家頁(yè)增加4個(gè)內(nèi)容模塊，建立保障立體認(rèn)知。

2.內(nèi)容更聚焦：將C用戶(hù)頁(yè)作為首頁(yè)，去掉原首頁(yè)，B商家頁(yè)作為二級(jí)頁(yè)面，強(qiáng)化C視角更好的滿足核心用戶(hù)訴求。

3.信息更真實(shí)：C首屏信息通過(guò)展示申保&認(rèn)保的規(guī)模數(shù)據(jù)突出保障的安全感，B商家頁(yè)通過(guò)輪播申保動(dòng)態(tài)&增加真實(shí)案例方式營(yíng)造真實(shí)感。

完成方案后拉關(guān)鍵角色對(duì)齊共識(shí)，調(diào)整優(yōu)化細(xì)節(jié)，明確最終效果。

第四步：指標(biāo)拆解

在指標(biāo)拆解方面，根據(jù)HEART+GSM體驗(yàn)度量模型，完成定性+定量驗(yàn)證指標(biāo)的分析。

簡(jiǎn)單來(lái)說(shuō)，就是將HEART模型中的體驗(yàn)標(biāo)準(zhǔn)依次縱向排列，將GSM體驗(yàn)度量模型作為分析工具，依次對(duì)HEART模型中各個(gè)維度從目標(biāo)（goal）、信號(hào)（signal）、度量指標(biāo)（metric）進(jìn)行分析。

以留存率（retention）為例，我們的目標(biāo)是希望用戶(hù)愿意多來(lái)官網(wǎng)了解信息，不斷強(qiáng)化保障認(rèn)知，那么用戶(hù)所表現(xiàn)出來(lái)的行為信號(hào)是多次訪問(wèn)保障官網(wǎng)，對(duì)應(yīng)的度量指標(biāo)可以拆解為活躍用戶(hù)量、次日/三日/七日留存等等。

完成設(shè)計(jì)側(cè)指標(biāo)拆解后，與產(chǎn)品進(jìn)行討論，從產(chǎn)品視角給予補(bǔ)充完善，雙方達(dá)成共識(shí)后，一起完成定性評(píng)估問(wèn)卷和打點(diǎn)規(guī)則細(xì)化。

第五步：落地驗(yàn)證

上線后持續(xù)觀察用戶(hù)數(shù)據(jù)，對(duì)比上線前后的定性+定量指標(biāo)，定性評(píng)估及定量數(shù)據(jù)指標(biāo)均得到明顯提升。

其他思考

設(shè)計(jì)共創(chuàng)循環(huán)流程

官網(wǎng)優(yōu)化只是保障體驗(yàn)的一個(gè)環(huán)節(jié)，我們以點(diǎn)入局，拉開(kāi)了保障體驗(yàn)全流程整優(yōu)化的帷幕。

在完成申保前-保障官網(wǎng)的整體優(yōu)化改版后并獲得極大成功后，我們趁熱打鐵，通過(guò)用戶(hù)體驗(yàn)地圖的方式完成保障中、后全流程的設(shè)計(jì)機(jī)會(huì)點(diǎn)分析，明確申保中、后設(shè)計(jì)目標(biāo)并完成具體設(shè)計(jì)提案，與產(chǎn)品共識(shí)后分期推動(dòng)落地，與官網(wǎng)優(yōu)化一樣，通過(guò)設(shè)計(jì)共創(chuàng)和嚴(yán)謹(jǐn)論證最終上線后的數(shù)據(jù)效果均表現(xiàn)正向，符合預(yù)期。

從保障全流程優(yōu)化的案例我們不難發(fā)現(xiàn)，設(shè)計(jì)共創(chuàng)是一個(gè)循環(huán)過(guò)程，它始于我們對(duì)業(yè)務(wù)的初步理解，終于一個(gè)循環(huán)后對(duì)業(yè)務(wù)的理解加深而進(jìn)行進(jìn)一步的循環(huán)，從而形成一個(gè)良性循環(huán)，幫助我們不斷深入業(yè)務(wù)，助力業(yè)務(wù)體驗(yàn)不斷優(yōu)化提升。

及時(shí)進(jìn)行項(xiàng)目復(fù)盤(pán)總結(jié)

在項(xiàng)目關(guān)鍵節(jié)點(diǎn)及時(shí)進(jìn)行項(xiàng)目復(fù)盤(pán)，不僅可以讓所有參與項(xiàng)目的同學(xué)有獲得感和價(jià)值感，更加認(rèn)可設(shè)計(jì)共創(chuàng)的成果，形成正向循環(huán)。同時(shí)也能擴(kuò)大設(shè)計(jì)的影響力，獲得合作團(tuán)隊(duì)老板的高度認(rèn)可和贊許，達(dá)成雙贏目標(biāo)。

圖標(biāo)是任何設(shè)計(jì)系統(tǒng)不可或缺的一部分。使用圖標(biāo)的主要原因是幫助用戶(hù)快速理解想法，實(shí)現(xiàn)快速導(dǎo)航，解決語(yǔ)言障礙，最終提升用戶(hù)體驗(yàn)。

圖標(biāo)作為一種設(shè)計(jì)工具，在UI/UX和平面設(shè)計(jì)師中最受歡迎。這些微小的設(shè)計(jì)元素對(duì)每個(gè)人來(lái)說(shuō)都是簡(jiǎn)單易懂的，這些特征賦予了它們通用數(shù)字語(yǔ)言的地位。

在這篇文章中，我整理了10個(gè)簡(jiǎn)單又重要的技巧幫你設(shè)計(jì)出更專(zhuān)業(yè)的圖標(biāo)。

1.尺寸規(guī)范 

最小的圖標(biāo)大小通常是12 x 12px。以這個(gè)尺寸為基礎(chǔ)，行業(yè)標(biāo)準(zhǔn)中大多數(shù)其他尺寸只是通過(guò)將之前的尺寸翻倍而產(chǎn)生的。

• 小尺寸圖標(biāo)，px: 12 x 12, 16 x 16, 24 x 24, 32 x 32, 48 x 48.
• 中尺寸圖標(biāo)，px: 64 x 64, 96 x 96, 128 x 128, 256 x 256.
• 大尺寸圖標(biāo)，px: 512 x 512, 1024 x 1024.
  

重要提示：當(dāng)你設(shè)計(jì)圖標(biāo)時(shí)，重要的是要按100%顯示的比例去設(shè)計(jì)，使圖標(biāo)完美像素并放大像素塊查看準(zhǔn)確性。 

2.保持像素完美 

完美像素圖標(biāo)在屏幕上能呈現(xiàn)尖銳和清晰的線條和形狀。如今，高分辨率顯示器和視網(wǎng)膜顯示器正變得越來(lái)越好，所以在不久的將來(lái)，對(duì)像素完美圖標(biāo)的需求可能會(huì)減少。但就目前而言，讓你的圖標(biāo)具有可伸縮性、響應(yīng)性和適配更多設(shè)備是非常重要的。

1) 像素網(wǎng)格對(duì)齊.

使直線部分完全清晰，并增加曲線和邊角的清晰度。（彩云注：盡可能的使線條實(shí)心） 

2)完美角度

有角度的線更模糊。創(chuàng)建圖標(biāo)的最佳角度是45°，因?yàn)樾纬梢粋€(gè)角的像素彼此對(duì)稱(chēng)。

3)邊緣清晰

直線必須占據(jù)其邊緣上最暗的4個(gè)像素。這樣線的邊緣看起來(lái)更清晰。

3.注意粗細(xì)和間隙 

為了讓圖標(biāo)看起來(lái)整潔一致，重要的是要記住線條寬度和間隙大小。這條規(guī)則我認(rèn)為是必須遵循的:所有線條的寬度都是相同的。

理想情況下，線寬和間隙大小也應(yīng)該相等。 

然而，有時(shí)候你必須打破這個(gè)規(guī)則。當(dāng)你需要解釋我們?cè)谌粘Ｉ钪忻鎸?duì)的一個(gè)具有非對(duì)稱(chēng)模式的物體時(shí)，它就會(huì)發(fā)生。比如條形碼這個(gè)例子來(lái)說(shuō)，我故意使圖標(biāo)內(nèi)的線寬和間隙大小不均勻，以表示條碼的特征。 

4.統(tǒng)一圓角 

在UI設(shè)計(jì)中，對(duì)象(包括圖標(biāo))的角半徑定義了項(xiàng)目的外觀和感覺(jué)。當(dāng)我們說(shuō)到一個(gè)集合中的多個(gè)對(duì)象時(shí)，規(guī)則很簡(jiǎn)單：在正方形和圓角之間進(jìn)行選擇，并對(duì)所有的圖標(biāo)應(yīng)用相同的屬性。

為什么它如此重要?一致性是UI/UX設(shè)計(jì)的關(guān)鍵原則。一個(gè)可用和用戶(hù)友好的設(shè)計(jì)總是提供一致的體驗(yàn)。在下面的例子中，你可以看到打破這個(gè)原則是如何影響視覺(jué)感知的。 

5.視覺(jué)平衡 

在電腦上看起來(lái)完美對(duì)齊和平衡的東西，在你的眼睛看來(lái)可能并不一樣。

當(dāng)我們把大小相等的正方形和圓放在一起時(shí)，我們會(huì)有一種不對(duì)勁的感覺(jué)，圓似乎比正方形小。為了使我們的形狀在尺寸上看起來(lái)相同，我們應(yīng)該使圓更大(或減少正方形的尺寸)。 

這個(gè)原則也適用于圖標(biāo)的設(shè)計(jì)和使用。有些圖標(biāo)的一側(cè)可能較重。試著調(diào)整它們一兩個(gè)點(diǎn)，直到整體對(duì)齊看起來(lái)正確。在下面的例子中，你可以看到突出顯示的圖標(biāo)看起來(lái)很大，盡管它與其他部分的大小相同。為了平衡這個(gè)集合，我們需要通過(guò)縮小圖標(biāo)的大小來(lái)調(diào)整突出顯示的圖標(biāo)。

（彩云注：這個(gè)原則很多人應(yīng)該都知道，但我發(fā)現(xiàn)也是在整套圖標(biāo)的設(shè)計(jì)中最容易出現(xiàn)的問(wèn)題，當(dāng)把圖標(biāo)匯總在一起的時(shí)候，這個(gè)問(wèn)題尤其需要重視。）

6.視覺(jué)對(duì)齊 

我們經(jīng)常在設(shè)計(jì)軟件中使用中心對(duì)齊，這種方法沒(méi)有錯(cuò)。但當(dāng)涉及到細(xì)節(jié)時(shí)，比如圖標(biāo)設(shè)計(jì)，我們需要相信自己的眼睛，打破數(shù)學(xué)法則，以增強(qiáng)元素的平衡。

讓我們以播放按鈕作為展示。這個(gè)例子很簡(jiǎn)單，但非常能說(shuō)明問(wèn)題，因?yàn)樾螤钤讲粚?duì)稱(chēng)，需要改進(jìn)的缺陷就越明顯。 

7.保持簡(jiǎn)單和直接 

我打賭你已經(jīng)猜到我們指的是KISS原則。這一原則背后的思想是，大多數(shù)系統(tǒng)在保持簡(jiǎn)單的情況下工作得最好。用戶(hù)越容易理解某樣?xùn)|西并與之互動(dòng)，它就越具有通用性。

（彩云注：KISS原則是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的縮寫(xiě)。篇幅有限，彩云幫大家找了一篇參考文獻(xiàn)https://www.jianshu.com/p/7d58b96d0185#comments ，感興趣的可以去學(xué)習(xí)下。）

它如何適用于圖標(biāo)設(shè)計(jì)?

1）別使用文字

文本和圖標(biāo)的綁定減少了圖標(biāo)的通用性。此外，小尺寸的文本是可讀性很差。如果一定要文本作為支持元素，使用工具提示和圖標(biāo)旁邊的標(biāo)簽。

2）不要過(guò)度設(shè)計(jì)

不必要的復(fù)雜性阻礙了合理的表達(dá)，應(yīng)該避免。過(guò)載的設(shè)計(jì)會(huì)將用戶(hù)體驗(yàn)變成一場(chǎng)噩夢(mèng)。

3）避免不必要的元素 

只要確保每個(gè)圖標(biāo)在整體環(huán)境中是可理解和清晰的就行。（彩云注：比如已經(jīng)是在郵件客戶(hù)端中，就不需要再額外增加表示郵件的圖標(biāo)部分）

重要提示：在圖標(biāo)設(shè)計(jì)中合理地使用KISS原則，也不要把事情做得太簡(jiǎn)單，否則會(huì)影響功能。一個(gè)優(yōu)秀的圖標(biāo)應(yīng)清晰易懂。

8.圖標(biāo)規(guī)范框架 

圖標(biāo)規(guī)范框架通常是指組合在一起的圓形、正方形、縱向和橫向矩形。它們創(chuàng)建了一個(gè)框架來(lái)設(shè)計(jì)圖標(biāo)。但是，這個(gè)規(guī)則非常靈活，只是作為參考，方便圖標(biāo)的設(shè)計(jì)在視覺(jué)上平衡。所以，如果你覺(jué)得你的圖標(biāo)不完全匹配這個(gè)框框，但看起來(lái)完全正確——相信你的眼睛！ 

框架是設(shè)計(jì)的“容器”?？蚣芤?guī)范了一個(gè)統(tǒng)一的范圍來(lái)設(shè)計(jì)圖標(biāo)，這背后有一些原因：

1) 大小

由于其幾何形狀，所有圖標(biāo)都具有不同的高度和寬度。為了在我們的設(shè)計(jì)中統(tǒng)一圖標(biāo)尺寸，我們應(yīng)該將它們放置在大小始終相同的框架中。

2)輸出

框架內(nèi)的圖標(biāo)與視覺(jué)中心對(duì)齊，這經(jīng)常被開(kāi)發(fā)人員忽略，因?yàn)樗麄兘?jīng)常根據(jù)實(shí)際的中心來(lái)調(diào)整圖標(biāo)，而沒(méi)有注意到差異。這就是為什么用框架輸出圖標(biāo)是至關(guān)重要的，當(dāng)你按這個(gè)框架輸出圖標(biāo)時(shí)，能保證視覺(jué)設(shè)計(jì)時(shí)想要的視覺(jué)中心。

3)效率

如果使用Figma，可以通過(guò)創(chuàng)建組件來(lái)節(jié)省時(shí)間?？梢允褂脤?shí)例快速地將一個(gè)圖標(biāo)替換為另一個(gè)圖標(biāo)。

9.設(shè)置好圖標(biāo)的關(guān)鍵詞 

如果你要打算做圖標(biāo)資源庫(kù)的話。要想到當(dāng)設(shè)計(jì)師在庫(kù)中搜索圖標(biāo)時(shí)，會(huì)遇到哪些挑戰(zhàn)?他們的痛點(diǎn)是什么?他們的需求是什么?要回答這些問(wèn)題，請(qǐng)?jiān)O(shè)身處地為用戶(hù)著想。 

1）不要讓用戶(hù)思考

例如，如果他們不知道自己想要找到哪種花卉圖標(biāo)，那么就讓他們看到一系列選擇:鮮花項(xiàng)鏈，室內(nèi)花卉，植物商店等。

2）展示關(guān)聯(lián)圖標(biāo)

例如，如果用戶(hù)想在相同的主題或類(lèi)別中找到圖標(biāo)，他們可以快速地檢查包含這個(gè)特定圖標(biāo)的完整集合。

3）使用標(biāo)簽

用戶(hù)可能很難找到合適的詞進(jìn)行搜索，或者可能希望看到所有類(lèi)似的補(bǔ)充選項(xiàng)，從中選擇最合適的。例如，當(dāng)一個(gè)圖標(biāo)的實(shí)際名稱(chēng)是“蘭花花瓣”，你仍然可以找到它與以下關(guān)鍵詞: #蘭花#花瓣#花瓣#花#裝飾#花#植物#花園#開(kāi)花#植物#自然#熱帶#樹(shù)枝#美麗#植物#美麗#自然#葉子#優(yōu)雅#浪漫

10.SVG和PNG圖標(biāo)的區(qū)別 

最終應(yīng)該導(dǎo)出SVG或PNG格式？這是一個(gè)關(guān)鍵問(wèn)題。讓我們來(lái)比較一下格式:

• SVG的文件大小非常小，這意味著最終設(shè)計(jì)的加載速度非?？?，而PNG則相當(dāng)大。
• SVG格式是無(wú)限可伸縮的，而PNG的分辨率則受創(chuàng)建的文件大小的限制。然而，將一個(gè)復(fù)雜的SVG圖標(biāo)縮小到隨機(jī)大小可能會(huì)產(chǎn)生半像素的邊緣，這可能會(huì)使圖標(biāo)看起來(lái)有虛邊。這是因?yàn)楫?dāng)屏幕上的圖標(biāo)變得更小時(shí)，代表其來(lái)源的像素就會(huì)減少，從而導(dǎo)致清晰度下降。這并不意味著需要避免使用SVG文件。只需根據(jù)預(yù)期用途調(diào)整 SVG 圖標(biāo)即可。
• SVG文件可以編輯和動(dòng)畫(huà)，PNG文件只能是靜態(tài)的。
• 對(duì)于PNG格式，你必須提供各種大小和顏色的資源，而在使用SVG時(shí)就不需要這些了。
• Png與大多數(shù)瀏覽器兼容，而svg可能不被舊的瀏覽器支持。

我個(gè)人的選擇是使用SVG圖標(biāo)，因?yàn)樗梢怨?jié)省很多時(shí)間。但是，一定要小心縮小復(fù)雜的形狀，并記住舊的瀏覽器可能不支持SVG格式。

總結(jié) 

到這里你應(yīng)該已經(jīng)學(xué)會(huì)了這10個(gè)圖標(biāo)設(shè)計(jì)要點(diǎn)，在你的圖標(biāo)設(shè)計(jì)中使用這些規(guī)則，相信會(huì)讓你的圖標(biāo)變得更加專(zhuān)業(yè)！

彩云注：圖標(biāo)設(shè)計(jì)是一個(gè)設(shè)計(jì)師的基礎(chǔ)能力，在彩云看過(guò)的無(wú)數(shù)份作品集中最普遍的問(wèn)題也就是圖標(biāo)設(shè)計(jì)。今天這篇文章雖然非?；A(chǔ)，但千萬(wàn)別小看它，用這10條技巧重新審視自己的圖標(biāo)作品，相信會(huì)有新的收獲！ 

作者：彩云Sky   來(lái)源：站酷網(wǎng)

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

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

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

Hi，我是彩云。界面是用戶(hù)在與任何產(chǎn)品、APP或平臺(tái)交互時(shí)看到的內(nèi)容，用戶(hù)體驗(yàn)就是建立在堅(jiān)實(shí)的界面設(shè)計(jì)基礎(chǔ)之上的。所以，如果你想要在UI設(shè)計(jì)上提升能力，應(yīng)該多去思考界面設(shè)計(jì)背后的原因。 

今天會(huì)跟大家分享一些被廣泛運(yùn)用的界面設(shè)計(jì)規(guī)則，它們能快速使得你的界面設(shè)計(jì)更干凈、高效。

1. 文案要易于理解 

用更容易讓用戶(hù)理解（說(shuō)人話）的引導(dǎo)文案，提升使用體驗(yàn)。 

（彩云注：下面2個(gè)案例中，左側(cè)的“購(gòu)物車(chē)”和“庫(kù)存2”太過(guò)于術(shù)語(yǔ)化，右側(cè)的“僅剩2”和“加入購(gòu)物車(chē)”更加貼近用戶(hù)的日常理解。大家平時(shí)工作的時(shí)候，也一定要注意界面中的文案，尤其是說(shuō)明文字，控件文字等等，這個(gè)點(diǎn)經(jīng)常容易被忽略。）

2. 垂直對(duì)齊易于掃視

良好的對(duì)齊方式，可以增強(qiáng)內(nèi)容的可讀性，讓用戶(hù)的視線更容易掃描。 

（彩云注：左側(cè)的“之”字形視動(dòng)線比較難閱讀，且不夠?qū)I(yè)；右側(cè)的垂直對(duì)齊增強(qiáng)了可讀性，也讓設(shè)計(jì)看起來(lái)更加統(tǒng)一，能夠快速的提升設(shè)計(jì)細(xì)節(jié)。）

3.給選項(xiàng)加圖標(biāo) 

使用圖標(biāo)、動(dòng)畫(huà)作為標(biāo)簽，有助于更輕松地理解內(nèi)容，它使界面看起來(lái)更加理性和豐富，能瞬間抓住用戶(hù)的眼球。 

（彩云注：左側(cè)的導(dǎo)航相較于右邊，很難第一時(shí)間準(zhǔn)確識(shí)別它的意思，增加圖標(biāo)后不僅更快看清，視覺(jué)上也更加美觀。）

4. 大段內(nèi)容要拆分 

大段的長(zhǎng)句會(huì)讓內(nèi)容變得難以閱讀。

為了獲得好的體驗(yàn)和UI，應(yīng)該注意拆分內(nèi)容，并使用項(xiàng)目符號(hào)突出關(guān)鍵點(diǎn)，利用拆分好的內(nèi)容塊讓用戶(hù)更快抓住重點(diǎn)。特別是在“功能說(shuō)明和條款條件”或任何聲明時(shí)，提煉要點(diǎn)有助于提升用戶(hù)體驗(yàn)，這樣也不至于讓用戶(hù)直接忽略。 

（彩云注：左側(cè)的大段文字我想應(yīng)該沒(méi)多少人會(huì)去閱讀，右邊的至少還能在短時(shí)間內(nèi)快速看看幾個(gè)關(guān)鍵詞。） 

5. 流程增加進(jìn)度條 

進(jìn)度條幫助用戶(hù)追蹤流程，它也能使查看上下步驟更加容易。線上購(gòu)物，表單填寫(xiě)，申請(qǐng)流程等場(chǎng)景使用這種格式能很好的簡(jiǎn)化流程。 

（彩云注：左邊的表單UI不方便跟蹤進(jìn)度和流程，右邊的表單把進(jìn)度放在頂部能幫助用戶(hù)清楚的知道流程進(jìn)度。） 

6.錯(cuò)誤提示要明確 

錯(cuò)誤提示一定要明確，易于理解，方便用戶(hù)進(jìn)行下一步的操作。如果用戶(hù)不理解界面上出現(xiàn)的錯(cuò)誤，用戶(hù)就會(huì)感到很失望，可能會(huì)放棄接下來(lái)的流程。在UI設(shè)計(jì)時(shí)，在正確的地方用通俗的語(yǔ)言說(shuō)明問(wèn)題，以避免歧義，這一點(diǎn)非常重要。 

（彩云注：我常常遇到各種出錯(cuò)，但出現(xiàn)的提示太過(guò)于術(shù)語(yǔ)化，也沒(méi)有提示在正確的地方讓我非?？鄲?。） 

7.按鈕要正確合理 

從菲茨定律（Fitt's Law）中我們應(yīng)該知道，目標(biāo)區(qū)域的距離和外觀與所采取的行動(dòng)成正比。因此，為了將注意力集中在轉(zhuǎn)化按鈕上，按鈕應(yīng)該準(zhǔn)確放置在合理位置上。此外，按鈕的大小應(yīng)該易于點(diǎn)擊，避免用戶(hù)因嘗試點(diǎn)擊時(shí)不方便而流失。 

（彩云注：左側(cè)的按鈕不在正確的決策位置以及按鈕太小，右側(cè)的按鈕簡(jiǎn)潔明了并且符合用戶(hù)的心理預(yù)期，能夠讓用戶(hù)更快決策并點(diǎn)擊。） 

8. 用好色彩心理學(xué)

顏色是UI中不可缺少的部分，它能影響用戶(hù)使用應(yīng)用時(shí)的情緒。正確地使用顏色將使UI看起來(lái)更加豐富合理。 

（彩云注：左側(cè)的藍(lán)色按鈕顏色并不符合用戶(hù)對(duì)于刪除的心理預(yù)期，右側(cè)的紅色按鈕對(duì)用戶(hù)的心理預(yù)期有危險(xiǎn)和警告，用紅色代表刪除能夠讓用戶(hù)集中注意力關(guān)注這一特殊的操作。） 

9. 單列更易保持關(guān)注度 

用單列展示內(nèi)容，能更好地幫助用戶(hù)掃描。當(dāng)你的應(yīng)用和網(wǎng)站上要展示大量信息時(shí)，將所有信息垂直對(duì)齊時(shí)，能更好的保持用戶(hù)關(guān)注度。 

10. 優(yōu)先社交媒體賬號(hào)登錄

用戶(hù)準(zhǔn)備登錄或注冊(cè)你平臺(tái)的時(shí)候，把所有可用的社交媒體登錄盡量放在首位。這將避免用戶(hù)填寫(xiě)表格時(shí)付出額外的認(rèn)知負(fù)擔(dān)和時(shí)間消耗而流失。首先使用社交媒體賬號(hào)，能很好地增加點(diǎn)擊率。 

11. 選擇狀態(tài)要清晰 

在用戶(hù)做選擇的時(shí)候，需要清晰地告訴用戶(hù)選中的到底是哪一個(gè)選項(xiàng)。模棱兩可的顏色會(huì)增加用戶(hù)的認(rèn)知負(fù)擔(dān)。更少的顏色和清晰的選中狀態(tài)能讓用戶(hù)獲得更好的體驗(yàn)。 

（彩云注：左側(cè)的問(wèn)題在于選中狀態(tài)不清晰且選項(xiàng)的顏色過(guò)于豐富，右側(cè)的選中狀態(tài)清晰且選項(xiàng)顏色只有2種，選中和非選中，體驗(yàn)會(huì)更好。） 

12. 用留白分組 

如果想給信息分組，使用留白是最好的方式。加條線作為分組符號(hào)會(huì)在界面中增加了一個(gè)額外元素，空白能讓UI看起來(lái)更加干凈和優(yōu)雅。用線分組的情況適用于類(lèi)似Twitter、Medium之類(lèi)的重內(nèi)容平臺(tái)等場(chǎng)景。 

13. 控件樣式保持一致 

保持設(shè)計(jì)的一致性，能夠降低功能復(fù)雜度并讓用戶(hù)更快決策，一致性設(shè)計(jì)讓用戶(hù)更快熟悉操作而不需要太多思考。

（彩云注：左側(cè)的選項(xiàng)圓角不一致，會(huì)讓用戶(hù)思考為什么這里會(huì)有不同，而右側(cè)的一致性選項(xiàng)設(shè)計(jì)，能讓用戶(hù)忽略?xún)?nèi)容外的干擾。）

14. 搜索中的占位符要用好 

在搜索輸入欄添加適當(dāng)?shù)恼嘉环?，提示用?hù)可以在平臺(tái)上搜索和找到的內(nèi)容，這樣可以提供用戶(hù)參考并帶來(lái)更好的用戶(hù)體驗(yàn)。

15. 暗色模式下飽和度不宜過(guò)高 

高飽和度的顏色能形成強(qiáng)烈的對(duì)比。在暗黑模式下使用高飽和度會(huì)很刺眼，給用戶(hù)很不好的體驗(yàn)。暗黑模式一般在晚上使用，因此對(duì)設(shè)計(jì)師來(lái)說(shuō)，需要做的是讓整個(gè)配色相對(duì)柔和，讓用戶(hù)感到放松?；诖?，在設(shè)計(jì)的時(shí)候應(yīng)該將飽和度限制在200-500之間。 

(彩云注：這里的200-500彩云去查了不少資料，但沒(méi)有找到最好的答案，這里引用的是Material Design中的顏色規(guī)范，感興趣的同學(xué)可以自行查找) 

16. 按鈕要有優(yōu)先級(jí) 

在同一個(gè)界面，最理想的狀態(tài)是只有一個(gè)最主要的關(guān)鍵按鈕和緊跟著的次要按鈕。這是因?yàn)槿绻粋€(gè)界面上有太多這種行動(dòng)按鈕（CTA）按鈕，會(huì)讓關(guān)鍵操作淹沒(méi)在這些按鈕中，讓用戶(hù)不知所措。

17. 簡(jiǎn)化不必要的動(dòng)詞 

沒(méi)必要在菜單上增加動(dòng)詞和短語(yǔ)，用最少的信息寫(xiě)清楚功能就足夠讓用戶(hù)理解了。所以，在菜單設(shè)計(jì)上要盡量避免增加無(wú)關(guān)緊要的詞，這樣才不會(huì)影響用戶(hù)體驗(yàn)。

18. 字體尺寸類(lèi)別越少越好 

你可能注意到，很少有表單的字體大小不平衡，字體之間的類(lèi)別盡量少一些看起來(lái)會(huì)更加平衡。在決定字體大小時(shí)，盡量規(guī)范字號(hào)的標(biāo)準(zhǔn)。比如標(biāo)題（16px），副標(biāo)題（12px），正文（10px），說(shuō)明文字（8px），這些尺寸都是以2為倍數(shù)的。 

19. 不要混用圖標(biāo)風(fēng)格 

盡管我知道要做好圖標(biāo)一致性，但在實(shí)際工作中依然經(jīng)常犯錯(cuò)。很多設(shè)計(jì)師經(jīng)常用不同風(fēng)格的圖標(biāo)混在一起，這樣會(huì)讓整個(gè)UI界面的設(shè)計(jì)顯得很不成熟。圖標(biāo)是為了讓用戶(hù)更有效率地理解事物。在使用圖標(biāo)的時(shí)候一定要注意圖標(biāo)的一致性，尤其是一些是一些風(fēng)格細(xì)節(jié)。 

這里也跟大家分享2個(gè)我自己常用的figma圖標(biāo)庫(kù)：

1)Unicorn (https://www.figma.com/community/file/931512007012650048)

2)Basil Icons (https://www.figma.com/community/file/931906394678748246) 

20. 不同背景下的顏色飽和度適當(dāng)微調(diào) 

通常情況下，我們會(huì)認(rèn)為一個(gè)顏色在深色模式和亮色模式下是用的同一個(gè)顏色值，但這其實(shí)是錯(cuò)誤的。一個(gè)顏色在亮色模式下看起來(lái)非常漂亮，但在深色模式看可能就太暗了，反之亦然。解決這個(gè)問(wèn)題最好辦法是使用2套不同飽和度的顏色。 

21. 新手引導(dǎo)多給用戶(hù)自主權(quán)

App的新手引導(dǎo)決定了用戶(hù)第一次體驗(yàn)產(chǎn)品時(shí)的感受。在設(shè)計(jì)的時(shí)候，試著公開(kāi)需要哪些具體步驟，增加”跳過(guò)“和前后移動(dòng)查看的能力對(duì)新用戶(hù)來(lái)說(shuō)非常重要。 

22. 在圖片上增加疊加層 

許多網(wǎng)站和App都是用圖片驅(qū)動(dòng)的，但在圖片上直接增加文字內(nèi)容有時(shí)候會(huì)被淹沒(méi)掉。在圖片上增加一個(gè)疊加層可以提升內(nèi)容的可讀性。 

23. 信息部分露出 

對(duì)于一些大屏設(shè)備來(lái)說(shuō)，像筆記本電腦，平板電腦和智能電視，它們都有非常多閑置的空間。對(duì)于這些閑置的空間來(lái)說(shuō)，盡量通過(guò)設(shè)計(jì)告訴它底部還有更多內(nèi)容。這對(duì)UI和UX方面都有好處，因?yàn)榭臻g的使用方式能夠讓用戶(hù)清晰的知道所有內(nèi)容。 

24. 拆分大段文字 

為了讓用戶(hù)聚焦閱讀，應(yīng)盡量避免使用大段的長(zhǎng)/寬行。保持短句和簡(jiǎn)潔能夠增加內(nèi)容的可讀性。

（彩云注：這點(diǎn)用在你的作品集里也是很合適的，有些人經(jīng)常使用大段的文字內(nèi)容來(lái)描述，很可能直接勸退面試官） 

25.Z字形原理 

Z字形原理，也就是大眾所熟知的”古騰堡原理“，它描述了當(dāng)人們看到一個(gè)均勻分布元素的設(shè)計(jì)時(shí)，眼睛的總體運(yùn)動(dòng)情況。通過(guò)這個(gè)原理我們知道，用戶(hù)在內(nèi)容上的視線是沿著Z字形來(lái)閱讀的，所以遵循這一原理設(shè)計(jì)你想要核心表達(dá)的內(nèi)容。 

26. 擴(kuò)大可點(diǎn)擊范圍 

擴(kuò)大點(diǎn)擊區(qū)域，維護(hù)像按鈕、單選、多選等控件的響應(yīng)尺寸，如果你設(shè)計(jì)的點(diǎn)擊區(qū)域太小會(huì)讓用戶(hù)點(diǎn)擊困難，造成流失。

27. 盡量使用簡(jiǎn)潔的圖標(biāo) 

避免使用花俏和俗氣的圖標(biāo)，它們會(huì)讓整個(gè)設(shè)計(jì)顯得非常不成熟，同時(shí)也是很難理解的。用上更簡(jiǎn)單的圖標(biāo)形式，會(huì)讓界面更高級(jí)。

（彩云注：當(dāng)然越簡(jiǎn)單的圖標(biāo)其實(shí)想畫(huà)出彩會(huì)更難，另外也需要區(qū)分不同的場(chǎng)景，像一些運(yùn)營(yíng)類(lèi)的圖標(biāo)可能會(huì)為了活動(dòng)氛圍做的相對(duì)風(fēng)格化一些。）

28. 正確的文案表達(dá) 

選錯(cuò)文案，會(huì)讓人們對(duì)于任務(wù)缺乏興趣，根據(jù)上下文使用更合適的詞組。

29. 考慮手勢(shì)操作 

輕敲和點(diǎn)擊有時(shí)候很累人，可能不如使用滑動(dòng)、拖拽等手勢(shì)操作，這些操作會(huì)讓界面更簡(jiǎn)潔并且也能順利地完成既定任務(wù)。 

30. 展示部分文案 

在探索酒店、目的地甚至是閱讀任何文章時(shí)，用戶(hù)經(jīng)常都需要點(diǎn)擊卡片。為了使得探索更加吸引人注目和干脆，避免使用長(zhǎng)文本導(dǎo)致的滾動(dòng)。相反，可以加一個(gè)閱讀更多的按鈕方便想看全所有內(nèi)容的用戶(hù)。 

31. 接近法則 

”鄰近的物體往往被視為是同一組內(nèi)容“。有時(shí)候?yàn)榱税褍?nèi)容區(qū)分開(kāi)的更清晰，嘗試用線對(duì)相關(guān)內(nèi)容進(jìn)行分組。

（彩云注：其實(shí)有留白和不同顏色做區(qū)分也是可以的，建議根據(jù)自己的設(shè)計(jì)風(fēng)格和具體內(nèi)容來(lái)定）

32. 文字控件可視化 

在設(shè)計(jì)控件時(shí)，如果可以用圖形可視化的地方就優(yōu)先嘗試把控件圖形化，除了非常需要很精確的設(shè)置參數(shù)。對(duì)于價(jià)格范圍這種，很容易將它可視化為滑塊控件。 

33. 占位符要接近要填寫(xiě)內(nèi)容 

對(duì)一些人來(lái)說(shuō)容易理解的東西，對(duì)某些人來(lái)說(shuō)可能不是。因此，最好使用示例占位符來(lái)解釋輸入字段，這可以防止用戶(hù)在填寫(xiě)內(nèi)容時(shí)出錯(cuò)。

34. 系列位置效應(yīng) 

根據(jù)”系列位置效應(yīng)“，心理傾向于記住列表的第一項(xiàng)和最后一項(xiàng)，而不是中間項(xiàng)。因此，在任何App中設(shè)計(jì)導(dǎo)航時(shí)，根據(jù)應(yīng)用的上下文保持最左和最右的選項(xiàng)。例如instagram，最左邊是”首頁(yè)“，而最右邊是”用戶(hù)“。

（彩云注：這是一個(gè)心理學(xué)上的理論，人們對(duì)于一系列的材料更容易記住開(kāi)頭的內(nèi)容，也叫做首因效應(yīng)或者首位效應(yīng)；更容易記住末尾的內(nèi)容，就叫近因效應(yīng)。） 

35. 減少點(diǎn)擊次數(shù) 

在設(shè)計(jì)任何體驗(yàn)時(shí)，點(diǎn)擊次數(shù)都是非常重要的指標(biāo)。統(tǒng)計(jì)用戶(hù)需要點(diǎn)擊多少次才能完成他的目標(biāo)，額外的點(diǎn)擊會(huì)減慢整個(gè)操作過(guò)程。簡(jiǎn)化過(guò)程，自然體驗(yàn)就會(huì)更好，所以盡可能的減少點(diǎn)擊次數(shù)。

（彩云注：下面的案例，增加可點(diǎn)擊符號(hào)也可以減少用戶(hù)思考的時(shí)間。） 

36. 少即是多 

為了使內(nèi)容突出，沒(méi)有必要使用多種字體類(lèi)型，包括加粗、改色等等。只在最需要的位置使用增強(qiáng)的的文字層次結(jié)構(gòu)、字體重量，同時(shí)只使用一種字體足以吸引用戶(hù)對(duì)內(nèi)容的注意力。 

37. 留白定義重點(diǎn) 

留白在設(shè)計(jì)中非常重要，太少或者沒(méi)有留白會(huì)使得設(shè)計(jì)非常混亂。明智地使用留白可以明確地強(qiáng)調(diào)內(nèi)容。 

38. 別讓用戶(hù)閑著 

根據(jù)多爾蒂閾值(Doherty Threshold)這個(gè)理論：”系統(tǒng)需要在 400ms 內(nèi)對(duì)使用者的操作做出響應(yīng)，這樣才能夠讓使用者保持專(zhuān)注，并提高生產(chǎn)效率。“。因此，我們可以使用動(dòng)畫(huà)、圖像甚至文本來(lái)保持用戶(hù)的注意力。（彩云注：給用戶(hù)的提示可以先快速加載信息框架，讓用戶(hù)有事可做，而不是什么都看不到） 

Hi，我是彩云。設(shè)計(jì)趨勢(shì)年年在變，設(shè)計(jì)技能也在不斷更新，但回到本源，底層的理論知識(shí)是不會(huì)變的。我自己幾乎每年還會(huì)翻看一些講設(shè)計(jì)基礎(chǔ)的書(shū)，比如《寫(xiě)給大家看的設(shè)計(jì)書(shū)》之類(lèi)的，會(huì)發(fā)現(xiàn)這些原理每次看都會(huì)有新的收獲。隨著工作年數(shù)增加，對(duì)底層知識(shí)的價(jià)值認(rèn)識(shí)也越來(lái)越深刻，不知道你會(huì)不會(huì)有這種感覺(jué)？

在Medium上看到一位工作超過(guò)17年的國(guó)外設(shè)計(jì)leader寫(xiě)的一篇關(guān)于設(shè)計(jì)原理的文章，講設(shè)計(jì)如何變得有效？總結(jié)得很好。

當(dāng)沒(méi)有認(rèn)知緊張時(shí)，用戶(hù)心流才會(huì)發(fā)生。當(dāng)一個(gè)設(shè)計(jì)有效時(shí)，你才能體驗(yàn)到認(rèn)知上的輕松。如果沒(méi)有，你的“心流狀態(tài)”就會(huì)中斷(稍后會(huì)詳細(xì)討論)，讓我們陷入認(rèn)知緊張，于是“設(shè)計(jì)失敗了”。

當(dāng)基本設(shè)計(jì)原則被忽略時(shí)，這種情況很容易發(fā)生，導(dǎo)致設(shè)計(jì)無(wú)法“整合”。這些基本原則包括：平衡性、一致性和視覺(jué)層次、負(fù)空間、接近性、對(duì)比、統(tǒng)一、一致性、配色方案和排版層次等方面。（彩云注：很多人看到這些以為自己都懂，但實(shí)際設(shè)計(jì)時(shí)犯錯(cuò)最多的也是這些問(wèn)題）

從神經(jīng)科學(xué)的角度來(lái)說(shuō)，當(dāng)一個(gè)設(shè)計(jì)起作用時(shí)，我們會(huì)“感受到它”。其影響立竿見(jiàn)影。它發(fā)生在潛意識(shí)里，在一瞬間完成，是人的本能反應(yīng)。我們不需要把它放在顯微鏡下分析它。

優(yōu)秀設(shè)計(jì)以簡(jiǎn)潔和優(yōu)雅而引人注目。喬納森·伊夫(Jonathan Ive)和迪特爾·拉姆斯(Dieter Rams)都可以算作這種設(shè)計(jì)思想的擁躉。

人們常說(shuō)，優(yōu)秀設(shè)計(jì)背后的工藝是無(wú)形的。然而，這不是隨機(jī)發(fā)生的。不管人們是否注意到，設(shè)計(jì)的背后是遵循著大量而嚴(yán)格的原理去執(zhí)行的。偉大的設(shè)計(jì)師不會(huì)在畫(huà)板上隨意地將各種元素組合在一起，這是有方法的。

為什么有些設(shè)計(jì)具有美的感受，而有些卻沒(méi)有

相反地，當(dāng)一項(xiàng)設(shè)計(jì)被認(rèn)為“有些地方不對(duì)勁”時(shí)，人們就會(huì)下意識(shí)地覺(jué)得這個(gè)設(shè)計(jì)是有問(wèn)題的。這樣的結(jié)果會(huì)給品牌或產(chǎn)品帶來(lái)不好的影響。當(dāng)一個(gè)高端或奢侈品品牌受到高度關(guān)注時(shí)，這種影響尤其有害。這就是為什么你永遠(yuǎn)不會(huì)遇到設(shè)計(jì)不完美的香奈兒(Chanel)商店的原因。

“你對(duì)一件事的第一印象會(huì)建立起你隨后的觀念，如果一家公司在你看來(lái)不專(zhuān)業(yè)，你可能會(huì)認(rèn)為他們做的其他事情都不專(zhuān)業(yè)?！狣aniel Kahneman，普林斯頓大學(xué)心理學(xué)教授。

這不是一個(gè)精心制作的設(shè)計(jì)，會(huì)導(dǎo)致認(rèn)知緊張。你會(huì)在這個(gè)網(wǎng)站上預(yù)訂你的行程嗎?

我們都同意上面是糟糕的設(shè)計(jì)，就像建在沙子上的房子，一個(gè)忽視基本設(shè)計(jì)原則的設(shè)計(jì)將會(huì)崩潰。潛意識(shí)里，它會(huì)立即被認(rèn)為是破碎的，無(wú)論是視覺(jué)上、精神上和情感上。

人類(lèi)的大腦是懶惰的、有偏見(jiàn)的，喜歡走捷徑。Daniel Kahneman稱(chēng)之為“低維思維”。當(dāng)人們看到某種設(shè)計(jì)時(shí)，它的“美學(xué)完整性”、視覺(jué)感知和神經(jīng)科學(xué)之間存在著相互關(guān)聯(lián)。

當(dāng)一個(gè)設(shè)計(jì)是合理的，換句話說(shuō)，它是令人愉快的、有效的，我們會(huì)迅速、直觀的判斷它是合理的。我們的心率降低，多巴胺水平增加，會(huì)有一種幸福和平靜的感覺(jué)。這就像我們聽(tīng)到舒緩的音樂(lè)，會(huì)沉浸在一種每時(shí)每刻的“心流狀態(tài)” 中?！霸谶@種狀態(tài)下，人們會(huì)專(zhuān)注于一項(xiàng)活動(dòng)，其他一切似乎都不重要”——來(lái)自于一個(gè)心理學(xué)概念，由 Mihaly Csikszentmihalyi在他的暢銷(xiāo)書(shū)《心流:最佳體驗(yàn)的心理學(xué)》中寫(xiě)道。

你更愿意住進(jìn)哪個(gè)房間？

設(shè)計(jì)原則在審美完整性中的作用

蘋(píng)果的人機(jī)界面指南（Apple’s Human Interface Guidelines）幾十年來(lái)一直在談?wù)摗懊缹W(xué)完整性”。它也可以被稱(chēng)為“設(shè)計(jì)完整性”或“審美凝聚力”。

蘋(píng)果對(duì)美學(xué)完整性的定義是“當(dāng)一個(gè)設(shè)計(jì)的外觀和行為與其功能完美匹配時(shí)”（彩云注：我的理解就是所見(jiàn)即所得，符合用戶(hù)的心理預(yù)期）。換句話說(shuō)，設(shè)計(jì)的構(gòu)成是產(chǎn)品的一個(gè)組成部分。我們將研究決定設(shè)計(jì)組合成敗的設(shè)計(jì)原則——更多的是關(guān)于 UI，而不是關(guān)于 UX。

美學(xué)完整性不僅僅是關(guān)于設(shè)計(jì)有多好看。它指的是具有明顯連貫性的設(shè)計(jì)：有效的結(jié)構(gòu)和布局，是什么讓它產(chǎn)生效果。換句話說(shuō)，它的元素在視覺(jué)層次、對(duì)齊、間距、平衡、對(duì)稱(chēng)、重復(fù)、比例、強(qiáng)調(diào)、接近、對(duì)比、統(tǒng)一、一致性、配色、排版、負(fù)空間等方面都有出色的運(yùn)用，這里僅舉幾個(gè)例子。

這與“黃金比例”無(wú)關(guān)，黃金分割不能解決問(wèn)題。斐波那契數(shù)列螺旋沒(méi)那么玄乎，給設(shè)計(jì)師帶不來(lái)驚人的設(shè)計(jì)。

設(shè)計(jì)師們?cè)诎布惸取ぶ炖蚧蛎赡塞惿哪樕袭?huà)出金色螺旋形時(shí)驚呼道：”果然是”黃金比例“（彩云注：但事實(shí)上有點(diǎn)故弄玄虛了）。當(dāng)然，自然界中確實(shí)有神圣幾何學(xué)(黃金比例，又稱(chēng)斐波那契螺旋，是基于此)，但依賴(lài)“黃金螺旋”作為設(shè)計(jì)原則是一種謬論，它已被多次暴露在其赤裸裸的荒謬中。

這是我的洗衣機(jī)，上面疊加了斐波那契螺旋。

“審美的完整性”不是沒(méi)道理的。這個(gè)概念是基于基本的設(shè)計(jì)原則，是有成就的設(shè)計(jì)師實(shí)踐他們的藝術(shù)作品的經(jīng)驗(yàn)總結(jié)。

讓我們來(lái)看看一些設(shè)計(jì)原則，以及它們?yōu)槭裁磿?huì)使得你的設(shè)計(jì)更能更加有效。通常情況下，真正優(yōu)秀的設(shè)計(jì)會(huì)結(jié)合這些設(shè)計(jì)原則。

我們將探討以下這些最底層的設(shè)計(jì)原理：

1. 視覺(jué)層次感
2. 間距、對(duì)齊和網(wǎng)格
3. 平衡
4. 對(duì)比
5. 對(duì)稱(chēng)
6. 重復(fù)
7. 幾率原則和三分原則
8. 引導(dǎo)線
9. 比例
10. 強(qiáng)調(diào)
11. 整體性
12. 親密性
13. 一致性
14. 顏色
15. 排版
16. 負(fù)空間

視覺(jué)層次感

視覺(jué)感知的基本規(guī)則對(duì)任何視覺(jué)設(shè)計(jì)都是至關(guān)重要的，因?yàn)樗鼈冎笇?dǎo)著如何盡可能快地傳達(dá)信息。視覺(jué)層次是設(shè)計(jì)中信息的結(jié)構(gòu)和優(yōu)先級(jí)。它決定了人們接受和處理信息的順序，因?yàn)樗砸环N視覺(jué)方式引導(dǎo)他們。

視覺(jué)層次感重在打造視覺(jué)優(yōu)先級(jí)。通過(guò)巧妙地使用顏色、形狀、大小、間距、比例和方向，創(chuàng)造性地使用決定層次的視覺(jué)元素來(lái)傳達(dá)構(gòu)圖的意義、概念和情緒。

核心關(guān)注點(diǎn)是什么，你希望用戶(hù)首先注意到或開(kāi)始閱讀的設(shè)計(jì)中最重要的元素是什么？我們想讓它成為焦點(diǎn)，然后其他部分的設(shè)計(jì)從這里展開(kāi)。

一個(gè)具有良好視覺(jué)層次的網(wǎng)站會(huì)引導(dǎo)用戶(hù)關(guān)注重要的部分

視覺(jué)層次對(duì)于每一種視覺(jué)設(shè)計(jì)都是至關(guān)重要的，無(wú)論是需要引導(dǎo)訪客眼球的首頁(yè)還是移動(dòng)端UI的導(dǎo)航入口。用戶(hù)對(duì)每個(gè)元素的理解取決于組合中的其他元素及其上下文。

建立視覺(jué)層次的一些技術(shù)是:位置、大小和比例、顏色和對(duì)比、間距和親密性、負(fù)空間、紋理、引導(dǎo)線和高度。在一個(gè)元素周?chē)褂秘S富的負(fù)空間可以使它看起來(lái)更有意義。使用引導(dǎo)線可以創(chuàng)造移動(dòng)，就像一個(gè)人的眼睛在設(shè)計(jì)上移動(dòng)一樣。排版的層次結(jié)構(gòu)也扮演著重要的角色，通過(guò)不同的大小和權(quán)重，我們可以讓更重要的文本元素脫穎而出并建立秩序。

加分技巧

• 使用一個(gè)隱形三角形連接設(shè)計(jì)中的三個(gè)重點(diǎn)區(qū)域（構(gòu)圖）。
• 注意古騰堡圖模式（Gutenberg Diagram）、F 模式（F-Pattern）、Z 模式（Z-Pattern）和層蛋糕模式（Layer Cake Pattern）的視覺(jué)掃描，并順應(yīng)趨勢(shì)而不是反對(duì)趨勢(shì)。（彩云注：這里的這些模式彩云就不過(guò)多介紹了，感興趣的可以自行了解下）

沒(méi)有視覺(jué)層次的網(wǎng)站沒(méi)有明顯的興趣點(diǎn)。

留白、對(duì)齊和網(wǎng)格

設(shè)計(jì)中的對(duì)齊和間距通過(guò)空間上的連接傳達(dá)出一種秩序和組織感，這兩個(gè)原則都在設(shè)計(jì)背后發(fā)揮重要價(jià)值。設(shè)計(jì)師早期學(xué)到的基本知識(shí)之一是在網(wǎng)格上編排設(shè)計(jì)，然后對(duì)齊和分隔這些元素。

左對(duì)齊、居中對(duì)齊、右對(duì)齊都沒(méi)錯(cuò)，但你必須對(duì)齊，否則當(dāng)元素沒(méi)有對(duì)齊時(shí)，設(shè)計(jì)就會(huì)給人崩潰的感覺(jué)。它給人一種不安的感覺(jué)。

沒(méi)對(duì)齊的話，眼睛看著很難受

網(wǎng)格有很多不同的類(lèi)型:列網(wǎng)格、基線網(wǎng)格、模塊網(wǎng)格、層次網(wǎng)格、像素網(wǎng)格等。不同設(shè)計(jì)使用不同網(wǎng)格，但最基本的是設(shè)計(jì)元素的對(duì)齊和間距。（彩云注：關(guān)于網(wǎng)格方面的知識(shí)，彩云以前也寫(xiě)過(guò)不少，感興趣的也可以在公眾號(hào)的歷史發(fā)文中翻翻看）比如：

《想要用好網(wǎng)格系統(tǒng)，這8個(gè)小技巧你必須知道》

《網(wǎng)格系統(tǒng)真是太好用了，后悔沒(méi)有早點(diǎn)學(xué)會(huì)！》

《4px網(wǎng)格設(shè)計(jì)方法，讓設(shè)計(jì)還原更精準(zhǔn)》

(Illustration courtesy UX Engineer)

網(wǎng)格可以被打破。一個(gè)死板的構(gòu)圖可能會(huì)在視覺(jué)上無(wú)趣，除非一個(gè)元素從網(wǎng)格中脫穎而出。錯(cuò)位或“打破網(wǎng)格”是賦予元素更多視覺(jué)權(quán)重的一個(gè)機(jī)會(huì)。當(dāng)在設(shè)計(jì)中設(shè)置視覺(jué)層次結(jié)構(gòu)時(shí)，它可以用來(lái)強(qiáng)調(diào)某些東西。

有時(shí)打破網(wǎng)格可以創(chuàng)造強(qiáng)調(diào)和移動(dòng)

平衡

設(shè)計(jì)上有兩種平衡:對(duì)稱(chēng)和不對(duì)稱(chēng)。所有的構(gòu)成元素：排版、顏色、圖像、形狀、圖案、留白等，都具有一定的視覺(jué)重量。有些元素很重，很吸引眼球，而有些元素很輕，感覺(jué)不那么重要。

這些元素的放置方式能夠在對(duì)稱(chēng)設(shè)計(jì)中創(chuàng)造出一種平等的順序感，或者一種稍微偏離平衡能夠創(chuàng)造出一種不對(duì)稱(chēng)的設(shè)計(jì)。無(wú)論對(duì)稱(chēng)還是不對(duì)稱(chēng)，我們的大腦都被某種平衡感所吸引，因?yàn)樗鼊?chuàng)造了和諧、秩序和美學(xué)上令人愉悅的結(jié)果。

多重原則:平衡、對(duì)齊和對(duì)稱(chēng)在網(wǎng)站上發(fā)揮作用

對(duì)比

“對(duì)比”指的是使設(shè)計(jì)中不同的元素更容易區(qū)別開(kāi)。強(qiáng)烈的對(duì)比可以在設(shè)計(jì)中強(qiáng)調(diào)一個(gè)區(qū)域，而微弱的對(duì)比可以弱化它，創(chuàng)造一個(gè)視覺(jué)層次。對(duì)比在設(shè)計(jì)中也扮演著重要的角色。對(duì)比不足會(huì)使文字特別難以閱讀，尤其是對(duì)視力有障礙的人來(lái)說(shuō)。

在左邊的設(shè)計(jì)中，一些文字和背景之間的對(duì)比不夠。

Web內(nèi)容可訪問(wèn)性指南 (WCAG)呼吁“文本的視覺(jué)呈現(xiàn)應(yīng)該有至少4.5:1的對(duì)比度”，除了大規(guī)模文本，它應(yīng)該有至少3:1的對(duì)比度。因此，設(shè)計(jì)師需要確保內(nèi)容保持舒適易讀。（彩云注：具體可用性配色工具，彩云之前的文章中有分享過(guò)，現(xiàn)在這種可用性顏色已經(jīng)越來(lái)越被重視了，你也要用起來(lái)?。?之前寫(xiě)的文章，推薦大家可以看看：

《以前我經(jīng)常為配色發(fā)愁，自從知道這3個(gè)配色神器后，配色變得容易多了！》

其他UI元素(如各種顯示器和設(shè)備上的卡片、按鈕、文字和圖標(biāo))之間的適當(dāng)對(duì)比也是必須的。如果UI元素之間沒(méi)有明顯的區(qū)分度，設(shè)計(jì)就容易產(chǎn)生混亂。

對(duì)稱(chēng)

在格式塔原理中，對(duì)稱(chēng)和秩序的法則也被稱(chēng)為pr?gnanz，德語(yǔ)單詞“好身材”的意思。這個(gè)原理說(shuō)的是，大腦會(huì)以盡可能簡(jiǎn)單的方式感知模糊的形狀，這都是為了節(jié)省大腦能量。

我們傾向于尋找一切事物的對(duì)稱(chēng)性。幾項(xiàng)研究發(fā)現(xiàn)，面部對(duì)稱(chēng)能提高人們對(duì)人臉吸引力的評(píng)價(jià)(盡管完全對(duì)稱(chēng)的臉其實(shí)并不一定那么有吸引力)。該理論認(rèn)為，這種偏好與選擇DNA最好的伴侶的進(jìn)化優(yōu)勢(shì)。

對(duì)稱(chēng)在自然界中也無(wú)處不在?？纯匆恢缓欢浠?，或者一只海星。

對(duì)稱(chēng)

同樣的原理也適用于數(shù)字領(lǐng)域，平衡對(duì)稱(chēng)的設(shè)計(jì)更令人愉悅。

對(duì)稱(chēng)性在應(yīng)用中發(fā)揮作用。Uber Eats、Booking.com和Behance。

重復(fù)

重復(fù)是一致性的近親，是優(yōu)秀可用性的標(biāo)志。在設(shè)計(jì)中利用重復(fù)是件好事，因?yàn)槲覀兊拇竽X總是在尋找模式、相似性和一致性。為什么?因?yàn)橹貜?fù)相同性質(zhì)的元素需要更少的認(rèn)知努力。

我們更容易識(shí)別重復(fù)的模式，而不是每次看到新模式都要重新校準(zhǔn)大腦。正如前面提到的，大腦作為一種生存機(jī)制是懶惰的，模式識(shí)別和認(rèn)知捷徑意味著有意識(shí)地處理視覺(jué)信息所需的能量更少。

例如，重復(fù)元素的形狀和大小、填充、留白、類(lèi)型和顏色，也有助于更對(duì)稱(chēng)、更好地平衡，做出美觀的設(shè)計(jì)。

The Athletic這個(gè)軟件就是用重復(fù)元素做設(shè)計(jì)的好例子

奇數(shù)原則和三分法構(gòu)圖

奇數(shù)法則意思是說(shuō)，在設(shè)計(jì)作品中奇數(shù)元素比偶數(shù)元素更有趣。偶數(shù)元素在圖像中產(chǎn)生了對(duì)稱(chēng)，這可能會(huì)顯得過(guò)于正式和不自然。比如，在一行中排列三個(gè)或五個(gè)卡片會(huì)比2個(gè)或4個(gè)效果更好，作品會(huì)更加讓用戶(hù)感到舒服和自然。

Iskos Design 就是用的奇數(shù)原則做的網(wǎng)頁(yè)設(shè)計(jì)

三分法構(gòu)圖（也被稱(chēng)之為黃金網(wǎng)格規(guī)則），在畫(huà)面中以水平和豎直方向分成3x3的網(wǎng)格和4個(gè)交叉點(diǎn)。這個(gè)規(guī)則能很好的協(xié)助設(shè)計(jì)師將最重要的元素放在網(wǎng)格的交叉點(diǎn)上，這樣可以很容易的設(shè)計(jì)出滿意的構(gòu)圖。

為什么會(huì)這樣？因?yàn)?strong>三分法構(gòu)圖創(chuàng)造了類(lèi)似斐波那契數(shù)列(黃金比例)那種不對(duì)稱(chēng)的美，產(chǎn)生了更有吸引力的構(gòu)圖。

視覺(jué)引導(dǎo)線

你希望用戶(hù)關(guān)注哪些地方？高級(jí)設(shè)計(jì)師非常擅長(zhǎng)引導(dǎo)用戶(hù)的視覺(jué)焦點(diǎn)，這種引導(dǎo)可以通過(guò)可見(jiàn)和不可見(jiàn)的引導(dǎo)線來(lái)完成。這些線條在構(gòu)圖中也可以打造一種動(dòng)感，也能為畫(huà)面增添視覺(jué)沖擊力。

達(dá)到這種效果通常用特定的形狀和線條，或者是它們的組合形成難以察覺(jué)的引導(dǎo)線來(lái)實(shí)現(xiàn)。利用透視、顏色、對(duì)比度和正負(fù)空間同樣可以幫助達(dá)到這種想要的效果。

從左到右的不易察覺(jué)的曲線將用戶(hù)的視線引導(dǎo)到頁(yè)面文字上

大小和比例

大?。╯cale）是設(shè)計(jì)中一個(gè)元素與另一個(gè)元素的相對(duì)大小。元素通過(guò)大小不同創(chuàng)建視覺(jué)層次，其中最大的元素首先會(huì)吸引用戶(hù)的注意力，因此看起來(lái)是最重要的。常規(guī)的設(shè)計(jì)策略就是將最重要的元素做成最大的，然后逐級(jí)遞減。

比例(Proportion)不同于大小，類(lèi)似但有區(qū)別。比例原則是指一個(gè)整體設(shè)計(jì)中各部分的尺寸關(guān)系。設(shè)計(jì)中的元素可以有各種大小，但它們之間的大小差異，整體來(lái)看就是比例。

熟練地使用大小和比例是實(shí)現(xiàn)設(shè)計(jì)統(tǒng)一的關(guān)鍵。當(dāng)一些元素的大小過(guò)大或過(guò)小，或者比例失調(diào)時(shí)，設(shè)計(jì)組合就會(huì)失去統(tǒng)一性。這種錯(cuò)誤可能發(fā)生在排版和其他元素上。例如，標(biāo)題與子標(biāo)題和正文相比顯得過(guò)大。當(dāng)設(shè)計(jì)元素失衡時(shí)，設(shè)計(jì)就會(huì)“感覺(jué)不平衡”。

大小和比例都沒(méi)做好時(shí)(左圖)，看起來(lái)處理的比較細(xì)致了，但依然沒(méi)有做到很好，在大小上正文和標(biāo)題分不清(右圖)

強(qiáng)調(diào)

強(qiáng)調(diào)原則用于使設(shè)計(jì)的某些元素突出(使用對(duì)比、接近、比例、留白等)或不突出，即弱化強(qiáng)調(diào)(例如在頁(yè)面底部有一個(gè)幾乎看不見(jiàn)的“小字”)。強(qiáng)調(diào)是層級(jí)之母，因?yàn)闆](méi)有強(qiáng)調(diào)就沒(méi)有層級(jí)。

與其他一些設(shè)計(jì)原則一樣，“強(qiáng)調(diào)”是用來(lái)引導(dǎo)人們關(guān)注設(shè)計(jì)，并強(qiáng)調(diào)需要重點(diǎn)關(guān)注的第一、第二和第三點(diǎn)。首頁(yè)面和電商轉(zhuǎn)化頁(yè)面在99%的情況下都使用這種原則。

使用這個(gè)原則，在購(gòu)物網(wǎng)站上強(qiáng)調(diào)了標(biāo)語(yǔ)和產(chǎn)品，轉(zhuǎn)化效果非常好

統(tǒng)一性

統(tǒng)一是指設(shè)計(jì)元素如何很好地結(jié)合在一起，形成“視覺(jué)凝聚力”。它指的是設(shè)計(jì)中的連貫性，讓人們覺(jué)得所有部分都是一起的。每個(gè)元素都應(yīng)該具有清晰的視覺(jué)關(guān)系，以幫助傳達(dá)清晰、簡(jiǎn)潔的信息。整體性好的設(shè)計(jì)比整體性差的設(shè)計(jì)更有條理，質(zhì)量也更高。

運(yùn)用統(tǒng)一的配色，重復(fù)、平衡和對(duì)稱(chēng)之類(lèi)的原則將有助于在設(shè)計(jì)中形成一種和諧感，也就是一致性。設(shè)計(jì)中良好的一致性就好比歌曲中一首歌被和諧地唱出來(lái)，形成一個(gè)完美的整體。

一致的顏色、重復(fù)的圖案、平衡和對(duì)稱(chēng)在蒂芙尼的網(wǎng)站上創(chuàng)造了一種統(tǒng)一的感覺(jué)。

接近原則

格式塔的接近原則讓設(shè)計(jì)師將同類(lèi)型的相關(guān)元素進(jìn)行分組。把它們分開(kāi)得更遠(yuǎn)，元素就顯得越不相關(guān)，它們之間的關(guān)系就會(huì)減弱。一般來(lái)說(shuō)，人們會(huì)認(rèn)為遠(yuǎn)離的元素是不相關(guān)的。

不應(yīng)該讓用戶(hù)在設(shè)計(jì)中分辨哪些元素是相互關(guān)聯(lián)的，正如美國(guó)郵政服務(wù)的例子所顯示的那樣，缺乏對(duì)鄰近性的關(guān)注會(huì)導(dǎo)致直接的認(rèn)知緊張，損害用戶(hù)體驗(yàn)。

接近原則沒(méi)做好的案例。由于字段標(biāo)簽離它們下面的字段更近，人們可能會(huì)搞混。

下面是一個(gè)鄰近性原則做的好的案例，我們可以看到相關(guān)元素是如何通過(guò)鄰近性關(guān)聯(lián)起來(lái)的(分組的元素用紫色表示)

一個(gè)把接近原則用好的網(wǎng)頁(yè)設(shè)計(jì)案例

一致性

一致性原則使數(shù)字產(chǎn)品的使用更加可預(yù)測(cè)，符合用戶(hù)的期望。設(shè)計(jì)中的一致性可以培養(yǎng)熟悉度，它可以提高用戶(hù)體驗(yàn)、可用性和用戶(hù)使用效率。另一方面，不一致的設(shè)計(jì)將產(chǎn)生更多的認(rèn)知負(fù)荷/腦力勞動(dòng)，并導(dǎo)致困惑和挫折。這就相當(dāng)于在用戶(hù)的路徑上設(shè)置障礙。讓用戶(hù)的心流嘎然而止!

做好一致性可以增強(qiáng)“審美凝聚力”。“我們都知道，當(dāng)我們使用應(yīng)用時(shí)，應(yīng)用的導(dǎo)航位置如果經(jīng)常變化，或者像“加入購(gòu)物車(chē)”這樣的主按鈕在不同屏幕上從紅色變成綠色，這是多么令人沮喪。

除了視覺(jué)一致性和易用性，品牌一致性在產(chǎn)品設(shè)計(jì)中也發(fā)揮著重要作用。如果沒(méi)有一致的元素呈現(xiàn)，如排版、配色和圖案，高質(zhì)量的品牌體驗(yàn)將無(wú)法傳遞。

在用戶(hù)體驗(yàn)方面，一致性意味著在設(shè)計(jì)中使用相似的UI元素來(lái)完成相似的任務(wù)，即在整個(gè)產(chǎn)品中擁有相似的功能和行為。因?yàn)榭捎眯允且环N評(píng)估用戶(hù)界面易用性的質(zhì)量屬性，所以一致性對(duì)用戶(hù)體驗(yàn)的可用性有很大的貢獻(xiàn)。

一致性是通過(guò)使用相同的配色、排版、間距、模式和交互來(lái)實(shí)現(xiàn)的。

色彩心理學(xué)也不容忽視。色彩承載著意義和情感，可以向人的潛意識(shí)傳遞信息。在品牌方面，人們對(duì)顏色做了大量的心理學(xué)研究，因?yàn)樵谌藗兣c品牌進(jìn)行任何互動(dòng)之前，顏色會(huì)讓他們產(chǎn)生一種本能的反應(yīng)。例如，藍(lán)色通常被認(rèn)為是可靠的、安全的和平靜的，想想銀行；而紅色是刺激的，被認(rèn)為是增加人們的心率，想想飲料包裝。

一個(gè)極簡(jiǎn)主義的暗色主題設(shè)計(jì)傳達(dá)了一個(gè)特定的品牌氣質(zhì)，并使用了少量的顏色。

排版

排版在設(shè)計(jì)中扮演著非常重要的角色，它的重要性再怎么強(qiáng)調(diào)都不為過(guò)。在構(gòu)圖中，字體樣式對(duì)人們感知設(shè)計(jì)的影響比任何其他元素都大，可能除了顏色。

因?yàn)槲覀兊拇竽X以閃電般的速度運(yùn)轉(zhuǎn)，一個(gè)字體會(huì)對(duì)一個(gè)設(shè)計(jì)產(chǎn)生影響，以至于它可能在不到一眨眼的時(shí)間內(nèi)改變用戶(hù)的印象。與顏色一樣，字體甚至?xí)绊懳覀兊那榫w，資深設(shè)計(jì)師可以通過(guò)字體傳達(dá)情緒和風(fēng)格。通過(guò)選擇合適的字體，我們可以傳達(dá)出穩(wěn)定、優(yōu)雅、舒適、可靠、有力等信息。

排版層次結(jié)構(gòu)可以快速建立視覺(jué)層次結(jié)構(gòu)，并且通常在其中扮演重要角色。因此，在設(shè)計(jì)中經(jīng)常使用不同的字體和字體大小來(lái)表示層次結(jié)構(gòu)，例如標(biāo)題、副標(biāo)題、正文和引用。

“除了確保文本清晰易讀，排版可以幫助你理清信息層次，傳達(dá)重要內(nèi)容，并表達(dá)你的品牌。” ——蘋(píng)果的人機(jī)界面指南

蘭博基尼的網(wǎng)站巧妙地使用了排版風(fēng)格和比例來(lái)賦予其設(shè)計(jì)力量

負(fù)空間(又名留白)

Claude Debussy 曾說(shuō)過(guò)，“音樂(lè)是音符之間的空間“。同樣的觀點(diǎn)也適用于設(shè)計(jì)，元素之間的負(fù)空間給予設(shè)計(jì)強(qiáng)調(diào)、平衡和統(tǒng)一。

元素周?chē)m當(dāng)?shù)呢?fù)空間將焦點(diǎn)集中在元素本身。它強(qiáng)調(diào)了內(nèi)容，并提供了必要的喘息空間，以確保布局不顯得雜亂。沒(méi)有了呼吸空間，人腦就不太可能掃描興趣點(diǎn)，更容易感到困惑。

蘋(píng)果官網(wǎng)提供了一個(gè)利用負(fù)空間創(chuàng)造強(qiáng)烈焦點(diǎn)的杰出例子。

最后

人們已經(jīng)開(kāi)始期待所有平臺(tái)和設(shè)備上的優(yōu)化、無(wú)阻礙的用戶(hù)體驗(yàn)。理解設(shè)計(jì)原則及其交互方式對(duì)所有設(shè)計(jì)師來(lái)說(shuō)都是至關(guān)重要的。使用專(zhuān)業(yè)技能設(shè)計(jì)它們是創(chuàng)造具有視覺(jué)吸引力的功能性設(shè)計(jì)的關(guān)鍵。我們不要忘記，美學(xué)的完整性會(huì)嚴(yán)重影響用戶(hù)體驗(yàn)。

基于原則的設(shè)計(jì)是設(shè)計(jì)師在感覺(jué)有點(diǎn)迷失或用盡創(chuàng)意時(shí)可以依賴(lài)的黃金標(biāo)準(zhǔn)方法。在沒(méi)有理解和實(shí)現(xiàn)設(shè)計(jì)原則的情況下，也可能實(shí)現(xiàn)可接受的設(shè)計(jì)。然而，這可能需要大量的嘗試和錯(cuò)誤才能創(chuàng)造出看起來(lái)不錯(cuò)的內(nèi)容，并創(chuàng)造出最佳的用戶(hù)體驗(yàn)。

產(chǎn)品的美學(xué)質(zhì)量與它的實(shí)用性密不可分，因?yàn)槲覀兠刻焓褂玫漠a(chǎn)品影響著我們和我們的幸福?！钡挥芯闹谱鞯奈锲凡艜?huì)美麗?！?Dieter Rams(迪特爾·拉姆斯)

當(dāng)我們不關(guān)注由設(shè)計(jì)原則驅(qū)動(dòng)的設(shè)計(jì)質(zhì)量時(shí)，我們可能會(huì)忽視品牌質(zhì)量及其所代表的一切。當(dāng)某些東西設(shè)計(jì)不好時(shí)，品牌就會(huì)受到傷害，產(chǎn)品也會(huì)受到影響。這就是為什么偉大的設(shè)計(jì)師在他們的工作中極其嚴(yán)謹(jǐn)， 他們知道“你永遠(yuǎn)不會(huì)有第二次機(jī)會(huì)給人留下良好的第一印象?！?/strong>

設(shè)計(jì)的細(xì)節(jié)成就了設(shè)計(jì)本身。—— 查爾斯 伊姆斯（Charles Eames）

作者：彩云Sky   來(lái)源：站酷網(wǎng)

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

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

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