信息架構(gòu)是產(chǎn)品的骨架。具體而言，就是一款產(chǎn)品有幾個(gè)一級(jí)頁面，以及支撐起整個(gè)產(chǎn)品的一級(jí)頁面、二級(jí)頁面各有幾種內(nèi)容樣式。所謂一級(jí)頁面，微信的“發(fā)現(xiàn)”頁就是一個(gè)一級(jí)頁面；在“發(fā)現(xiàn)”頁點(diǎn)“朋友圈”，進(jìn)去的就是一個(gè)二級(jí)頁面。所謂內(nèi)容樣式，Banner 是一種內(nèi)容樣式，九宮格是一種內(nèi)容樣式，設(shè)置頁面那種列表也是一種內(nèi)容樣式。
這樣的信息架構(gòu)，有什么價(jià)值？
01 信息架構(gòu)的價(jià)值：掌控感與健康迭代
對(duì)用戶而言，信息架構(gòu)的主要價(jià)值在于掌控感；對(duì)產(chǎn)品而言，信息架構(gòu)的主要價(jià)值在于健康迭代。
1. 掌控感
如果房間里很亂，到處都堆滿了東西，常穿的衣服也找不到了，我們就很容易變得煩躁不安。相反，如果混亂的房間被收拾得很整潔，我們的心情也會(huì)隨之變得愉悅起來。
這中間的原因是什么？
個(gè)人覺得，從原始社會(huì)到 21 世紀(jì)，我們?nèi)祟愐恢鄙钤诟?jìng)爭(zhēng)中，所以一直在追求一種對(duì)生活的掌控感。這種掌控感，會(huì)讓我們找到一種存在感和價(jià)值感，從而給身處競(jìng)爭(zhēng)中的我們一種安全感。一個(gè)收拾得井然有序的房間，會(huì)讓我們覺得一切盡在掌握中；一個(gè)胡亂塞滿東西的房間，則會(huì)讓我們覺得這個(gè)房間處于失控狀態(tài)，從而引發(fā)煩躁不安。
一款 App，如果主要的幾個(gè)一級(jí)頁面也都塞滿了各式各樣的內(nèi)容，那么用戶通常也會(huì)感到煩躁不安。這是因?yàn)橛脩舨荒荞R上理出頭緒，不能馬上獲得那種掌控感。另外，如果大的改版經(jīng)常讓用戶體會(huì)到這種煩躁不安，用戶就會(huì)對(duì)這款 App 感到不滿和失望，甚至失去信心和期待。
所以說，信息架構(gòu)的第一個(gè)價(jià)值，就是讓用戶始終有掌控感。
2. 健康迭代
產(chǎn)品的更新迭代，有時(shí)會(huì)出現(xiàn)“發(fā)?！焙汀拔⒄巍钡那闆r。這都屬于不健康的迭代。
所謂發(fā)福，就是變得臃腫了，比如一級(jí)頁面突然增加了很多內(nèi)容樣式。所謂微整形，就是和之前比有點(diǎn)亂套了，比如有的一級(jí)頁面突然消失了、有的一級(jí)頁面突然出現(xiàn)了、有些常用的功能突然找不到了，諸如此類。
一款產(chǎn)品，如果大的改版總是通過發(fā)福、甚至微整形的方式實(shí)現(xiàn)，用戶就很難獲得掌控感。
反過來，一個(gè)優(yōu)秀的信息架構(gòu)，是接近“凍齡”的。也就是說，不管產(chǎn)品怎么更新、怎么加新功能，都能簡(jiǎn)單如初，都能讓用戶馬上獲得掌控感。典型的例子是微信：微信已經(jīng)加了很多功能，但整體給人的感覺依然是簡(jiǎn)單的。
這樣的信息架構(gòu)，很少發(fā)福，也幾乎不做微整形，所以能讓用戶永遠(yuǎn)有掌控感，從而確保產(chǎn)品能夠健康迭代。
02 怎樣實(shí)現(xiàn)信息架構(gòu)的價(jià)值
什么樣的信息架構(gòu)，能夠?qū)崿F(xiàn)“掌控感”和“健康迭代”？
其實(shí)參考答案剛才已經(jīng)出現(xiàn)了，那就是接近凍齡的信息架構(gòu)?；蛘吒_切地說，是一種“以不變應(yīng)萬變”的信息架構(gòu)。
這里的不變，是指信息架構(gòu)看起來永遠(yuǎn)沒有明顯變化，永遠(yuǎn)都很簡(jiǎn)單。萬變，是指不斷新增的功能，不斷變化的功能。
如何做到以不變應(yīng)萬變？一級(jí)頁面和二級(jí)頁面都很關(guān)鍵，其中最核心的是一級(jí)頁面。這里也順便拋一個(gè)問題：一級(jí)頁面，用來干啥？
一級(jí)頁面主要用來干三件事，分別是：提供掌控感、提供常用功能、提供小入口。也就是說，一級(jí)頁面尤其要把掌控感給到用戶，要讓用戶快速找到常用功能，同時(shí)還要為不常用的功能提供一個(gè)小入口。需要說明的是，這個(gè)理念可能不太適合一些商店類產(chǎn)品，比如淘寶這樣的電商產(chǎn)品，所以僅供參考。
那如何完成這三件事？主要有以下四個(gè)要點(diǎn)。
1. 不要超過 4 個(gè)一級(jí)頁面
4 個(gè)和 5 個(gè)，它倆之間存在微妙的區(qū)別。比如我們給手機(jī)號(hào)或銀行卡號(hào)分段時(shí)，更喜歡每段最多分 4 個(gè)數(shù)字，而不是 5 個(gè)，直觀對(duì)比見下圖。
4 個(gè)還是 5 個(gè)
很多 App 的底部導(dǎo)航欄，也是只有 4 個(gè)Tab，即 4 個(gè)一級(jí)頁面。受生活經(jīng)驗(yàn)等因素影響，當(dāng)我們看到 App 有 4 個(gè)一級(jí)頁面時(shí)，內(nèi)心或潛意識(shí)里可能會(huì)覺得：哦，4 個(gè)，還算簡(jiǎn)單，基本能記??；而當(dāng)看到有 5 個(gè)一級(jí)頁面時(shí)，可能會(huì)感到一絲壓力：5 個(gè)啊，有點(diǎn)多了。
總的來說，我們更偏愛只有 4 個(gè)一級(jí)頁面的產(chǎn)品，因?yàn)?4 個(gè)仍在簡(jiǎn)潔的范疇內(nèi)，5 個(gè)就已經(jīng)開始走向復(fù)雜。在《微信背后的產(chǎn)品觀》這場(chǎng)分享中，張小龍也提到過：“微信保證只有 4 個(gè)底部 Tab?！?
2. 不要超過 3 種內(nèi)容樣式
Keep 6.0 系列的“探索”頁面有 5 種內(nèi)容樣式，顯得很復(fù)雜。微信的 4 個(gè)一級(jí)頁面中，“發(fā)現(xiàn)”和“我”頁面只有 1 種內(nèi)容樣式，“微信”和“通訊錄”頁面只有 2 種內(nèi)容樣式（加上頂部的搜索框），顯得非常簡(jiǎn)單，和 Keep 的對(duì)比如下圖所示。
Keep 6.0 系列與微信的內(nèi)容樣式數(shù)量
像微信這種內(nèi)容樣式數(shù)量上的極簡(jiǎn)，可能很多產(chǎn)品難以做到。那么，我們不妨退而求其次，早期先從 1 種、2 種內(nèi)容樣式開始。后期加功能了，可以考慮第 3 種，謹(jǐn)慎考慮第 4 種，盡量不要增加第 5 種，因?yàn)橐欢〞?huì)變得復(fù)雜。
大家可能會(huì)說，產(chǎn)品的功能很多，3 種內(nèi)容樣式不夠用。
針對(duì)這種情況，只要邏輯上不存在大的問題（比如把“支付”放到“通訊錄”頁面），就可以嘗試把不同內(nèi)容合并成一種樣式。微信在這方面就做得很好，大家可以參考它的設(shè)計(jì)。比如下圖的“通訊錄”頁面，聯(lián)系人上方那些內(nèi)容，和聯(lián)系人不是同一類內(nèi)容，但它們共用一種內(nèi)容樣式——一個(gè)簡(jiǎn)單的圖文列表。
微信“通訊錄”頁面：不同內(nèi)容合并成一種樣式
3. 不為二成需求，去打擾八成用戶
產(chǎn)品設(shè)計(jì)里存在一個(gè)比較常見的問題，就是往一級(jí)頁面塞很多內(nèi)容或功能，其中有相當(dāng)一部分是用戶日常用不到的，這種設(shè)計(jì)容易讓人覺得臃腫。比如 Keep 6.0 系列的“運(yùn)動(dòng)”頁面，就用了較大空間來推薦付費(fèi)計(jì)劃和運(yùn)營(yíng)活動(dòng)，如下圖所示。
用較大空間來推薦付費(fèi)計(jì)劃和運(yùn)營(yíng)活動(dòng)的 Keep 頁面
相信有相當(dāng)一部分用戶是不需要這些內(nèi)容的，所以這其實(shí)也是一種打擾。這種打擾會(huì)影響到這些用戶對(duì)這個(gè)界面的掌控感。
這種現(xiàn)象有兩個(gè)可能的原因。一是企業(yè)擔(dān)心用戶不用這些功能，所以就在一級(jí)頁面用很多空間來展示它們，Keep 的例子應(yīng)該屬于此類。二是有部分用戶提建議，所以企業(yè)就加了這些功能。
關(guān)于第一個(gè)原因，個(gè)人觀點(diǎn)，有些功能本身就屬于二成需求，在一級(jí)頁面占用太多空間不僅改變不了這個(gè)現(xiàn)實(shí)，還會(huì)對(duì)用戶形成打擾。
關(guān)于第二個(gè)原因，個(gè)人看法，用戶的建議通常只代表個(gè)人立場(chǎng)，而企業(yè)至少要代表大部分用戶的立場(chǎng)。比如，網(wǎng)上就有人建議微信在朋友圈加一個(gè)屏蔽別人的功能，實(shí)際上微信有這個(gè)功能，只是一直隱藏，沒有放出來——因?yàn)橛玫娜松?，它屬于二成需求，放出來的話?huì)對(duì)八成用戶形成打擾。
總的來說，理想情況是接受現(xiàn)實(shí)、尊重規(guī)律：是八成需求就提供八成空間，是二成需求就提供二成空間。具體參考如下圖所示。
是八成需求就提供八成空間，是二成需求就提供二成空間
4. 盡量不在標(biāo)題欄使用 Tab 或下拉框，增加維度
這其實(shí)是張小龍分享過的一個(gè)觀點(diǎn)，我個(gè)人很贊同，就直接引用一下。下面直接看兩個(gè)例子。Keep 6.0 系列的前三個(gè)一級(jí)頁面，標(biāo)題欄都使用了 Tab，就顯得內(nèi)容很多，有點(diǎn)復(fù)雜，如下圖所示（僅展示前兩個(gè)）。
使用了 Tab 的標(biāo)題欄
微信中擁有標(biāo)題欄的前三個(gè)一級(jí)頁面，其標(biāo)題欄都沒有使用 Tab 或下拉框，就顯得簡(jiǎn)單、內(nèi)容少，如下圖所示（僅展示前兩個(gè)）。這也是微信保持簡(jiǎn)單的一個(gè)重要原因。
沒有使用 Tab 的標(biāo)題欄
結(jié)語
一般情況下，產(chǎn)品都需要更新迭代：增加新功能，完善舊功能。
用戶則是一個(gè)矛盾體：一方面對(duì)新功能和新事物懷有好奇心；另一方面又希望每次打開常用的產(chǎn)品時(shí)，都有一種回到家一樣的熟悉感和一種家里井然有序的掌控感。
好的做法，就是類似微信那樣：盡管加了新功能，但是看起來沒有明顯變化。也就是說，以“不變”的信息架構(gòu)，來應(yīng)對(duì)萬變的功能。
原文地址：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
我們來探討下交互設(shè)計(jì)的善意。
善良常常被用來形容人，偶爾被用來形容產(chǎn)品，很少被用來形容交互設(shè)計(jì)。
就像人們會(huì)說，iPhone 有人文關(guān)懷，而很少會(huì)說，iPhone 的交互設(shè)計(jì)有人文關(guān)懷。在筆者看來，原因之一，是交互設(shè)計(jì)很難將人文關(guān)懷囊括完，而產(chǎn)品本身則基本可以。
類似的道理，本文探討的善意，始于交互設(shè)計(jì)，但不局限于交互設(shè)計(jì)，還包括產(chǎn)品和企業(yè)的善意。
一家之言，歡迎交流探討。
01 為什么選擇善意？
一個(gè) 3 歲小孩流落街頭，無家可歸，會(huì)讓無數(shù)人起惻隱之心。我們普通人的微小善意，有時(shí)可能是一種本能反應(yīng)，或者說是一種感性反應(yīng)。
“他內(nèi)心是有時(shí)邪惡，還是對(duì)人們始終良善”，這是李宇春《年輕氣盛》里的一句歌詞。
惡是否為本能，筆者不知道?？茖W(xué)家的解釋是，有些基因中會(huì)帶有惡。可以肯定的是，善惡皆為人性，共存于人類當(dāng)中。
感性和理性是會(huì)此消彼長(zhǎng)的，林黛玉和薛寶釵就是兩個(gè)極致的例子。同理，人類體內(nèi)的善惡，也會(huì)此消彼長(zhǎng)。
一款產(chǎn)品，在做決策時(shí)，很大程度上是基于理性。
這種理性決策，很多時(shí)候是無意為善，也無意為惡。但遺憾的是，那個(gè)非善非惡的中間地帶不會(huì)一直存在，有些無意為善和無意為惡，最終會(huì)成為非善即惡，比如開屏頁是否放廣告這件小事（下文有詳述）。
既然善惡會(huì)此消彼長(zhǎng)，而且產(chǎn)品的有些理性決策會(huì)導(dǎo)致非善即惡，那么不可避免的，有時(shí)候，善惡會(huì)變成一道二選一的選擇題。
接下來，我們就從理性的角度探討下，為什么選擇善意。
1 長(zhǎng)期主義
最近幾年，互聯(lián)網(wǎng)從業(yè)者有個(gè)共識(shí)：創(chuàng)業(yè)是件九死一生的事兒。因?yàn)閾?jù)數(shù)據(jù)統(tǒng)計(jì)，90% 的創(chuàng)業(yè)公司活不過三年。
這是一個(gè)值得深思的社會(huì)現(xiàn)象，背后的原因究竟是什么？直接原因，往往是資金斷裂。深層原因，會(huì)有很多，比如產(chǎn)品不夠好、方向不夠準(zhǔn)，等等。
那么，核心原因呢？筆者認(rèn)為，和創(chuàng)始人的執(zhí)念有關(guān)。
有兩類執(zhí)念可以避免此類悲劇。第一類是做出優(yōu)秀產(chǎn)品；第二類是長(zhǎng)期主義。
做出優(yōu)秀產(chǎn)品這塊，有很多例子，最典型之一是特斯拉。特斯拉曾面臨多次危機(jī)（資金、產(chǎn)能等），但都挺過來了，這肯定和產(chǎn)品深受車主喜愛有關(guān)。
筆者也見過兩個(gè)普通創(chuàng)業(yè)公司的例子。他們都有一顆做出好產(chǎn)品的心，都很重視 UI、交互、用戶體驗(yàn)這些基礎(chǔ)的東西，而且把 UI 做的比較優(yōu)秀，交互和用戶體驗(yàn)做的還不錯(cuò)。其中一家靠著用戶的付費(fèi)在平穩(wěn)發(fā)展，另一家連產(chǎn)品帶團(tuán)隊(duì)被大廠收購了。
長(zhǎng)期主義這塊，典型例子之一是巴菲特。巴菲特信仰并踐行價(jià)值投資，價(jià)值投資依賴長(zhǎng)期主義。最近幾年，長(zhǎng)期主義在國(guó)內(nèi)也被越來越多的提及。
個(gè)人的理解，長(zhǎng)期主義至少包含兩個(gè)要點(diǎn)，分別是：積累、多贏。因?yàn)?，沒有積累就不會(huì)有成就，沒有多贏成就就不會(huì)長(zhǎng)久。
中國(guó)女排，世界冠軍。排球界有個(gè)說法，叫三年成型，五年成才，八年成器?；ヂ?lián)網(wǎng)行業(yè)，也大致如此。這是積累。
用戶，員工，投資人，三方利益都兼顧好，才是多贏。
俗話說，顧客是上帝，大家都知道對(duì)用戶好；投資人作為強(qiáng)勢(shì)一方，利益也往往有保障；員工的利益是否有保障，往往取決于創(chuàng)始人，所以存在很大變數(shù)。
回到主題，長(zhǎng)期主義和善意，有什么關(guān)系？
通常而言，多贏能否實(shí)現(xiàn)，關(guān)鍵在于員工的利益能否得到保障。
筆者在網(wǎng)上看過一個(gè)有意思的評(píng)論，說當(dāng)下的年輕人，如果收入、成就感、高興這三點(diǎn)有兩點(diǎn)達(dá)不到，就會(huì)辭職。
所以，員工利益得到保障的標(biāo)準(zhǔn)，可以簡(jiǎn)單定義為“三中二“，即收入、成就感和愉悅這三點(diǎn)滿足兩點(diǎn)。
再來分析一下現(xiàn)狀：相比員工，公司是強(qiáng)勢(shì)一方；人們?nèi)允茏畲蟪潭葎兿魇Ｓ鄡r(jià)值、官僚思想等觀念影響；惡性加班等風(fēng)氣存在；僧多粥少的就業(yè)行情。
在這樣的大環(huán)境下，如果公司對(duì)員工沒有愛和善意，員工的利益是很難得到保障的。
最后，總結(jié)一下：公司有善意，員工利益就有保障，就能實(shí)現(xiàn)多贏，從而有望實(shí)現(xiàn)長(zhǎng)期主義。
2 美好生活
前段時(shí)間，因?yàn)榻o武漢捐款 5000 萬、并且疫情期間蔬菜按成本價(jià)銷售，一些網(wǎng)友被胖東來這個(gè)商超刷屏了。
胖東來來自河南許昌，一個(gè)三四線城市，也是筆者的家鄉(xiāng)。目前僅在許昌和新鄉(xiāng)有店。
在一些關(guān)于胖東來文章的評(píng)論區(qū)，很多網(wǎng)友在喊胖東來去自己的城市開店。
為什么有這么多呼聲？簡(jiǎn)單分享幾個(gè)例子。
顧客方面，胖東來有 6 類購物車，包含嬰兒手推車、兒童購物車和老年人購物車。老年人購物車自帶凳子，可供休息，同時(shí)還配有放大鏡。
員工方面，有高薪、高福利和利潤(rùn)分紅等。胖東來比較為業(yè)界稱道的高福利有：每周二閉店，春節(jié)閉店 5 天，工齡滿 1 年即有 30 天帶薪年假，一天最多工作 7 個(gè)小時(shí)。
從網(wǎng)上的報(bào)道、評(píng)論以及公布于網(wǎng)上的企業(yè)文化來看，胖東來一方面主張工作和生活（愛情、家庭、休假等）的平衡，一方面在踐行和傳播幸福、快樂、尊重等很多積極的文化價(jià)值觀。
看新聞的時(shí)候，筆者注意到，老板于東來經(jīng)常會(huì)提到“美好”這個(gè)詞兒。實(shí)際上，在筆者看來，胖東來本身就代表了一種美好生活，一種物質(zhì)和精神雙豐盛的美好生活。
對(duì)于這樣的美好生活，用戶和員工自然喜歡?？蛇@對(duì)企業(yè)有什么好處？
胖東來曾經(jīng)意欲退出新鄉(xiāng)市場(chǎng)，新鄉(xiāng)合作商家和市民紛紛請(qǐng)?jiān)?，政府也多次出面挽留，最終胖東來留下來了?？梢?，胖東來在新鄉(xiāng)已經(jīng)深入人心，顧客自然會(huì)大力支持它的發(fā)展。
胖東來有一句 slogon，能夠很好的解釋這一切，那就是：愛在胖東來。
同樣，既提供體面的收入，又關(guān)注員工和用戶的精神需求，給他們帶去美好生活，當(dāng)然需要更大更多的善意。
在當(dāng)下中國(guó)，能提供高薪的互聯(lián)網(wǎng)公司已經(jīng)很多了，但是能在精神層面讓員工感覺良好、感覺愉悅、感覺幸福和快樂的公司卻為數(shù)不多。
對(duì)于所有企業(yè)而言，這又何嘗不是一種機(jī)會(huì)？
02 交互設(shè)計(jì)里，有哪些善意？
現(xiàn)實(shí)中，像胖東來給顧客和員工提供的這種美好生活不常有。但是退一步講，還是有很多產(chǎn)品對(duì)用戶展現(xiàn)了很多微小善意，值得我們學(xué)習(xí)。
這種微小善意主要有三類，分別是：不打擾，護(hù)尊嚴(yán)，人為先。
1 不打擾
我們生活在一個(gè)信息爆炸的時(shí)代，不被手機(jī)上的信息過度打擾，是一個(gè)剛需。有三類信息，如果把握不好度，就會(huì)對(duì)用戶形成打擾。它們分別是：廣告、推送、推薦。
廣告這塊，主要有兩類會(huì)形成打擾，分別是：時(shí)機(jī)不佳的廣告，過長(zhǎng)的廣告。
這方面，微信是個(gè)榜樣，值得學(xué)習(xí)。比如開屏頁廣告，就是時(shí)機(jī)不佳的廣告，因?yàn)榇蠹也幌朐谶@里看到廣告，微信就沒有放。朋友圈里也有較長(zhǎng)的視頻廣告，微信的常見做法有兩類，要么先展示一張圖片，要么先是無聲播放。是否看完整的視頻廣告，選擇權(quán)在用戶手里。
推送這塊，常見的有手機(jī)系統(tǒng)的通知和 App 內(nèi)的紅點(diǎn)消息。
系統(tǒng)通知，目前也有被濫用的趨勢(shì)。根據(jù)使用情況和感受，個(gè)人的建議是這類推送控制在 1-2 類。第 1 類是關(guān)于核心功能，比如微信推送新消息，搜狐新聞推送新聞；第 2 類可保留一定的彈性，核心原則是對(duì)用戶有價(jià)值，比如偶爾的活動(dòng)通知。
目前有兩種情況會(huì)對(duì)用戶形成打擾和困擾，第一種是過于頻繁的活動(dòng)通知；第二種是推送和核心功能相差甚遠(yuǎn)的信息，比如金融類產(chǎn)品推送新聞。
紅點(diǎn)消息，有一類會(huì)對(duì)用戶形成打擾，那就是來自官方的過于頻繁的各類活動(dòng)、促銷等信息。
推薦這塊，主要指 App 內(nèi)的 Banner 和專題。目前對(duì)用戶形成打擾的主要是一級(jí)頻道的一些專題。
一種是過多，比如網(wǎng)易云音樂的首頁，就有 9 個(gè)專題；一種是位置不佳，比如 Keep 的“探索”頻道就包含了課程的推薦，但是在“運(yùn)動(dòng)”頻道還有兩個(gè)專題來推薦課程。
2 護(hù)尊嚴(yán)
護(hù)尊嚴(yán)，就是盡最大可能，維護(hù)用戶的形象和尊嚴(yán)。
最近幾年，常有產(chǎn)品花巨資撒紅包給用戶搶。產(chǎn)品的初衷自然是好的，而且看起來也是一件皆大歡喜的事情。但是這件事很難提升產(chǎn)品的美譽(yù)度，也就無法增加用戶對(duì)它的喜愛和忠誠程度。
為什么會(huì)這樣？
讓用戶搶自己撒的紅包，這件事能維護(hù)用戶的形象和尊嚴(yán)嗎？非但不能，可能還會(huì)對(duì)此造成傷害。因?yàn)榭赡軙?huì)顯得用戶愛占小便宜，也可能會(huì)使用戶處于被施舍的一方?？傊@種事對(duì)用戶來說，并不酷。
一款產(chǎn)品，要想贏得用戶更多的喜歡、尊敬乃至忠誠，就最好不做哪怕僅是微弱傷害用戶形象和尊嚴(yán)的事情，同時(shí)多做一些相反的事情。
3 人為先
人為先，是當(dāng)用戶利益和企業(yè)利益發(fā)生尖銳矛盾時(shí)，去追求一種用戶利益在先的雙贏局面。
大家都知道，吸煙是有害健康的，但是煙草公司又是要賺錢的。泰國(guó)香煙那種既觸目驚心又惡心嚇人的包裝，就盡他們最大的可能詮釋了“吸煙有害健康”，是真正的用戶為本，讓人心生敬意。
泰國(guó)香煙的這種做法，值得一些極易讓人上癮的游戲廠商借鑒和學(xué)習(xí)。
03 交互設(shè)計(jì)：如何做到善意？
上一大段，是善意的三類表現(xiàn)。這一大段，再探討下做到善意的一個(gè)原則。
以社區(qū)型內(nèi)容型產(chǎn)品為例，這個(gè)原則就是：先服務(wù)后管理。
這里的服務(wù)，是指以服務(wù)者的心態(tài)做好用戶體驗(yàn)，并不局限于交互設(shè)計(jì)。這里的管理，指的是一些必要的管理，一般是用戶的行為規(guī)范和用戶違規(guī)時(shí)的處理，比如評(píng)論里罵臟話、發(fā)布侵權(quán)文章等。
所有用戶都是需要被服務(wù)的，只有少數(shù)行為不當(dāng)?shù)挠脩舨攀切枰还芾淼模晕覀円确?wù)后管理，以免誤傷了不需要被管理的用戶。
服務(wù)本身就是一種善意，筆者把它分成了兩個(gè)階段，分別是：體驗(yàn)的初始階段，體驗(yàn)的完整過程。
初始階段對(duì)應(yīng)的是：初始服務(wù)；完整過程對(duì)應(yīng)兩類服務(wù)，分別是：家常服務(wù)，極致服務(wù)。
1 初始服務(wù)
初始服務(wù)，是當(dāng)用戶剛開始用這款產(chǎn)品時(shí)，能給他們留下良好印象的服務(wù)。
如何做到？不出現(xiàn)任何輕微惡意和管理傾向即可，再提供一些便利和幫助則更好。
下面分享一個(gè)反面例子。
在個(gè)別城鎮(zhèn)的衛(wèi)生死角，有時(shí)會(huì)看到這樣的標(biāo)語，“此處禁止倒垃圾！違者罰款 200！“。結(jié)果那個(gè)地方往往有很多垃圾。
為什么會(huì)這樣？
這個(gè)標(biāo)語，有兩層意思：第一，你很可能會(huì)在這里倒垃圾；第二，禁止你這么做，做了要罰錢。
也就是說，某種程度上，這個(gè)標(biāo)語在用惡意揣度別人，同時(shí)也在很嚴(yán)的管理別人。
看到這個(gè)標(biāo)語的人很可能會(huì)這樣想：既然認(rèn)為我會(huì)在這倒垃圾，那我索性就倒了；禁止我？憑什么？還罰我錢，嚇唬誰呢，況且你有證據(jù)嗎？
下面再分享一個(gè)很好的正面例子。
筆者有一個(gè)宜家的退貨經(jīng)歷。把一個(gè)已經(jīng)拆過的桌子打包送到了宜家，宜家沒有檢查里面的零配件（很多螺絲之類的），直接退了。這樣寬松的退貨條件，宜家可能會(huì)蒙受一定損失，比如小概率的零件丟失，但宜家還是把這種服務(wù)提供給了顧客。筆者當(dāng)時(shí)的感受是宜家挺信任我們的，對(duì)宜家就多了幾分好感。
2 家常服務(wù)
家常服務(wù)，是指一種稀松平常，但又讓用戶感到舒服自在的服務(wù)。
舉個(gè)例子，你去好朋友家里玩，朋友給你倒了一杯水，并端出一盤削好切好的蘋果，你們一邊吃一邊聊。你和朋友是平等的關(guān)系，他這種簡(jiǎn)單的招待并不會(huì)使你感動(dòng)，但卻使你有一種接近在自己家的那種舒服自在。
筆者在用微信公眾號(hào)（后臺(tái)）時(shí)會(huì)有這種感受。在星巴克和肯德基時(shí)也會(huì)有類似感受。
家常服務(wù)，如何實(shí)現(xiàn)？第一，要有良好的初始服務(wù)，這是基礎(chǔ)；第二，要有周到且較高品質(zhì)的交互設(shè)計(jì)，這是關(guān)鍵。
以微信公眾號(hào)為例，和微信一樣，它的交互設(shè)計(jì)也做到了周到和較高品質(zhì)。下面看看微信公眾號(hào)的初始服務(wù)。
面向大眾的資訊平臺(tái)大多都有一個(gè)發(fā)文規(guī)范，多是關(guān)于禁止的行為，通常都會(huì)用一個(gè)單獨(dú)網(wǎng)頁來展示，有 1-2 頁紙那么多。
通常情況下，多數(shù)作者是不會(huì)違反發(fā)文規(guī)范的。對(duì)于這部分作者，當(dāng)他們首次看到 1-2 頁密密麻麻的發(fā)文規(guī)范時(shí)，可能會(huì)產(chǎn)生抵觸心理，即便自己不會(huì)違規(guī)。就好像高中開學(xué)第一天，班主任二話沒說，直接就立了 20 條班規(guī)，同學(xué)們會(huì)是什么心情。
微信公眾號(hào)的做法就很巧妙，它把這些規(guī)范分割成了三部分。
第一部分是嚴(yán)禁的紅線行為，以高度概括的一行文字呈現(xiàn)，所有人都能看到，但是得仔細(xì)留意才能注意到。這是規(guī)范性質(zhì)。
第二部分和競(jìng)品一樣，也是鏈接出來的一個(gè)單獨(dú)網(wǎng)頁。鏈接入口也和競(jìng)品一樣，在關(guān)聯(lián)性最強(qiáng)的發(fā)文頁面右上角。不同的是，這一頁展示的是規(guī)則，主要以問答的形式呈現(xiàn)，給人感覺是有幫助的信息。這是服務(wù)性質(zhì)。
而競(jìng)品的這個(gè)頁面，通常都是禁三禁四的規(guī)范，給人的感覺可能是緊張、壓抑甚至抵觸。
第三部分是次于紅線的禁止行為，比如侵權(quán)、低俗內(nèi)容等。這部分內(nèi)容的管理辦法被以公告的形式分散在公告列表里。而且公告列表里內(nèi)容多樣，還有很多一般的通知，所以這個(gè)公告列表也不會(huì)像競(jìng)品的那一頁規(guī)范一樣，給人緊張、壓抑的感覺。性質(zhì)上是中性。
另外，這部分的入口在后臺(tái)首頁右上角，和發(fā)文模塊是分開的。所以不會(huì)違法規(guī)范的作者一般不會(huì)去公告列表里翻這些內(nèi)容，也就看不到。
微信公眾號(hào)就是這么巧妙的讓多數(shù)作者看不到“班主任”的“20 條班規(guī)”，同時(shí)還讓他們看到了“班主任”的“常見問題回答”。
這就是微信公眾號(hào)在發(fā)文規(guī)范方面的初始服務(wù)。另外還有一個(gè)加分的細(xì)節(jié)，就是檢測(cè)疑似錯(cuò)別字的功能，很貼心，雖然目前還不是很準(zhǔn)。
3 極致服務(wù)
極致服務(wù)，是指讓用戶感動(dòng)的服務(wù)，比如海底撈和胖東來的服務(wù)。
這種服務(wù)，一般是由許多細(xì)節(jié)積累而來，是一種做加法的服務(wù)，而且背后往往依賴人力。
好的交互設(shè)計(jì)，一般都是在做減法，而且純粹是界面、機(jī)器在和用戶打交道。所以極致服務(wù)難以復(fù)制到交互設(shè)計(jì)上。
不過，一款互聯(lián)網(wǎng)產(chǎn)品，除了交互設(shè)計(jì)，還有其它方面的內(nèi)容。
B 站就是一個(gè)例子，它以不走尋常路的方式，在兩個(gè)方面做到了較為極致的服務(wù)。那就是：視頻無廣告，比較積極、歡樂的彈幕氛圍。
結(jié)語
以用戶利益為先，不打擾用戶，維護(hù)用戶的尊嚴(yán)，這是交互設(shè)計(jì)里的三種善意，值得我們學(xué)習(xí)。
先服務(wù)后管理。服務(wù)作為一種善意，也能夠引來用戶的善意，最終形成良性循環(huán)。
杜絕任何輕微惡意和管理傾向，再提供一些便利和幫助，便能做到良好的初始服務(wù)；
在初始服務(wù)的基礎(chǔ)上，提供周到、高品質(zhì)的交互設(shè)計(jì)，就能做到良好的家常服務(wù)；
交互設(shè)計(jì)難以做到極致服務(wù)，但是其它方面有機(jī)會(huì)。
最后，用劉備的一句話來結(jié)束本文。
勿以善小而不為。
原文地址：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
B類領(lǐng)域設(shè)計(jì)師必然會(huì)面對(duì)譬如CRM、ERP等諸多類型的中后臺(tái)類產(chǎn)品。大多就是做做表單設(shè)計(jì)，年底考核時(shí)想爭(zhēng)取漲薪證明自己，但老板要問的“設(shè)計(jì)價(jià)值”是個(gè)啥？在這些業(yè)務(wù)主導(dǎo)下的中后臺(tái)產(chǎn)品又該如何定位設(shè)計(jì)機(jī)會(huì)及價(jià)值？
本文就以比較典型且系統(tǒng)化的中后臺(tái)企采SaaS服務(wù)產(chǎn)品為例，來聊聊在這個(gè)領(lǐng)域中，是如何進(jìn)行機(jī)會(huì)的挖掘，探索并付諸實(shí)踐的。
-
在過往數(shù)年里，阿里Ant Design，Alibaba Fusion為代表的中臺(tái)團(tuán)隊(duì)進(jìn)行了大量基礎(chǔ)組件設(shè)計(jì)體系的積累，也沉淀了一些可直接復(fù)用的工程化解決方案。如果說有就行，的確產(chǎn)品經(jīng)理和技術(shù)人員自己拼拼湊湊，就可以極低成本的獲得一個(gè)較為套路化，但無需設(shè)計(jì)師介入費(fèi)腦的中后臺(tái)產(chǎn)品。
但作為用戶工作環(huán)境中和風(fēng)險(xiǎn)、錢打交道為主，被強(qiáng)制使用的工具載體，在全球數(shù)字化經(jīng)濟(jì)轉(zhuǎn)型推進(jìn)趨勢(shì)下，越來越多的中后臺(tái)B端產(chǎn)品需要具備更高效，更細(xì)膩的體驗(yàn)，以改善千千萬萬使用者的數(shù)字化工作方式.
初步接觸業(yè)務(wù)，我們即發(fā)現(xiàn)沿用基礎(chǔ)通用設(shè)計(jì)組件庫，“拼組件”的方式?jīng)]辦法滿足垂直業(yè)務(wù)模塊比如供應(yīng)鏈詢價(jià)、采購、財(cái)務(wù)核賬履約領(lǐng)域高強(qiáng)度信息承載密度下精細(xì)化的用戶體驗(yàn)訴求。
因此，為了增強(qiáng)SaaS產(chǎn)品及服務(wù)的不可替代性，提升售賣價(jià)值亮點(diǎn)以及產(chǎn)品續(xù)約率，我重點(diǎn)對(duì)業(yè)務(wù)場(chǎng)景下特有的行為組件、模板及方案鏈路進(jìn)行抽象歸納改良設(shè)計(jì)。
這樣做最直觀的好處就是不浪費(fèi)時(shí)間重復(fù)造輪子，站在巨人的肩膀上來完善組件庫，提升設(shè)計(jì)效能，1位設(shè)計(jì)師就能通過業(yè)務(wù)場(chǎng)景組件，高效承接密集的產(chǎn)品需求。
另一方面，收攏特定場(chǎng)景下核心差異點(diǎn)，只聚焦最小范圍來打磨組件及流程，可敏捷實(shí)現(xiàn)差異化設(shè)計(jì)的最佳實(shí)踐。
精細(xì)化的場(chǎng)景多欠缺合適的線上化解法，作為你深度挖掘，充分思考下的設(shè)計(jì)方案，相對(duì)更容易獲取某些領(lǐng)域的設(shè)計(jì)獎(jiǎng)項(xiàng)甚至專利，證明你有在設(shè)計(jì)上做出了壁壘，創(chuàng)造了價(jià)值。
除此之外，由于該敏捷的體驗(yàn)設(shè)計(jì)過程是以抽象核心差異為契機(jī)，對(duì)應(yīng)領(lǐng)域的設(shè)計(jì)師亦能更高效的構(gòu)建出業(yè)務(wù)特定場(chǎng)景下的獨(dú)有的“Design System"，在后續(xù)過程中放大設(shè)計(jì)價(jià)值。
-
多數(shù)中后臺(tái)產(chǎn)品（尤其是企業(yè)級(jí)應(yīng)用系統(tǒng)）會(huì)出現(xiàn) "功能、頁面多"、“流程長(zhǎng)”的臃腫現(xiàn)象。
受打工人身份禁錮下的實(shí)操用戶大多也是迫于工作合規(guī)要求，不得不從原本習(xí)慣的線下作業(yè)流程，轉(zhuǎn)變?yōu)樵谥泻笈_(tái)線上了解信息，以及多角色協(xié)同決策處理事務(wù)。甚至可以說有了中后臺(tái)的存在，反而增加了他們?nèi)粘９ぷ鞑僮鞒杀?，故無論是新用戶還是老用戶，都難有意愿于中后臺(tái)完成事務(wù)處理的體驗(yàn)閉環(huán)。
為提高采購流程的效率，讓中后臺(tái)線上作業(yè)更輕松，更提升企業(yè)收益/價(jià)值。
我們基于用戶行為能力動(dòng)機(jī)，從“替ta完成”，“催ta處理”，“助ta做快”這三個(gè)維度，通過協(xié)同引導(dǎo)提效的方式來促進(jìn)線上事務(wù)處理完成并流轉(zhuǎn)。簡(jiǎn)單說，機(jī)器能做的就自動(dòng)處理推進(jìn)，不能的則及時(shí)觸達(dá)引導(dǎo)，力求做到中后臺(tái)事務(wù)處理過程去人工化，以及主動(dòng)精準(zhǔn)有效的引導(dǎo)。
設(shè)計(jì)師在這個(gè)環(huán)節(jié)內(nèi)除了結(jié)合新技術(shù)，和業(yè)務(wù)團(tuán)隊(duì)共同打造一些智能化服務(wù)替代原本高重復(fù)性操作以形成新體驗(yàn)外，還可以深刻研究并理解人性本質(zhì)，在相關(guān)待辦或服務(wù)內(nèi)容觸達(dá)上精細(xì)化設(shè)計(jì)。
與業(yè)務(wù)一起分層提醒內(nèi)容，及對(duì)應(yīng)內(nèi)容的可讀性、可視化設(shè)計(jì)；
不打擾用戶工作前提下，及時(shí)引導(dǎo)助其理解更促使用戶啟用自動(dòng)化提效服務(wù)，譬如處理受阻失敗、或用戶剛完成一項(xiàng)任務(wù)時(shí)，引導(dǎo)其配置自動(dòng)處理規(guī)則，提高整體效率；
定期進(jìn)行實(shí)操人員處理任務(wù)完成度/時(shí)長(zhǎng)的同團(tuán)隊(duì)數(shù)據(jù)分析比較及外顯方案，結(jié)合數(shù)據(jù)可視化呈現(xiàn)手段，在行業(yè)內(nèi)外部團(tuán)隊(duì)相互制約下，促使用戶自我驅(qū)動(dòng)警示，保障事務(wù)推進(jìn)流轉(zhuǎn)。
最終目標(biāo)即是推進(jìn)業(yè)務(wù)中后臺(tái)的用戶數(shù)字化體驗(yàn)從最早的幫助Q&A被動(dòng)喚起自助化服務(wù)，變?yōu)橹鲃?dòng)承接服務(wù)告知可處理，半自動(dòng)化分發(fā)，及自動(dòng)處理，甚至社會(huì)智能化數(shù)據(jù)自驅(qū)的演變進(jìn)階。
總體來說，在中后臺(tái)產(chǎn)品給用戶提供更簡(jiǎn)單、更集成的方案，大量消減操作步驟，突出真正重要的信息就是設(shè)計(jì)最大的價(jià)值。
-
除一線實(shí)操用戶外，我們還要關(guān)注管理者，有時(shí)更是一號(hào)位的老板這一類關(guān)鍵角色，他們?cè)诰€上各個(gè)子環(huán)節(jié)都有較為強(qiáng)烈的可控，可管理的訴求在，以證明其付錢購買的中后臺(tái)“在線數(shù)字化”工作方式真的能降本增效，或作為企業(yè)內(nèi)部管理優(yōu)化的量化指標(biāo)依據(jù)。
在企業(yè)按年續(xù)費(fèi)產(chǎn)品服務(wù)的商業(yè)化增長(zhǎng)目標(biāo)下，讓管理者能真切意識(shí)并實(shí)際體會(huì)到數(shù)字化工作方式的價(jià)值就變得尤為重要。因此，設(shè)計(jì)的關(guān)鍵是增強(qiáng)管理決策者對(duì)數(shù)字化平臺(tái)服務(wù)的感知度以及滿意度。
和一線操作員側(cè)的提效類似，只不過對(duì)于管理者，我們需更多著重于“替ta完成”和“助ta做快”這兩部分去打造智能化服務(wù)的管控新體驗(yàn)。
為確保機(jī)器智能化處理邏輯更接近人的自然思維，設(shè)計(jì)師在這個(gè)環(huán)節(jié)中可主動(dòng)補(bǔ)位，制定相應(yīng)類型下數(shù)據(jù)的機(jī)器思維處理分析規(guī)則以及內(nèi)容維度。
在過往采購SaaS中后臺(tái)業(yè)務(wù)設(shè)計(jì)中，設(shè)計(jì)亦抽象了事務(wù)型進(jìn)展以及綜合決策分析決策兩類數(shù)據(jù)模塊新場(chǎng)景，通過直觀結(jié)果呈現(xiàn)以及判斷要點(diǎn)佐證，在管理行為及流程上促進(jìn)管控手段的數(shù)字化升級(jí)，幫助管理者高效獲取/查看/分析數(shù)據(jù)要點(diǎn)。
有了對(duì)應(yīng)的分析數(shù)據(jù)結(jié)果和要點(diǎn)，我們還要將數(shù)字時(shí)代下的管理數(shù)據(jù)，團(tuán)隊(duì)事務(wù)整體進(jìn)度、風(fēng)險(xiǎn)預(yù)判結(jié)論有效觸達(dá)管理角色，更放大其體感。
給老板用的數(shù)據(jù)大屏/中后臺(tái)數(shù)據(jù)看板，及數(shù)字孿生可視化即是一種可以充分發(fā)揮設(shè)計(jì)表現(xiàn)力并擅長(zhǎng)的領(lǐng)域，即便你所在的中后臺(tái)團(tuán)隊(duì)沒有相應(yīng)技術(shù)資源，設(shè)計(jì)依舊可以通過“電子郵件” “長(zhǎng)圖”等通用載體，以輕量化的方式來完成價(jià)值傳遞。
在這個(gè)環(huán)節(jié)，設(shè)計(jì)的價(jià)值就是讓管理者讀懂?dāng)?shù)據(jù)，受惠數(shù)據(jù)驅(qū)動(dòng)的決策方式。
以設(shè)計(jì)體驗(yàn)度量量化為起點(diǎn)，深度關(guān)聯(lián)管理決策者關(guān)心的企業(yè)運(yùn)營(yíng)數(shù)據(jù)“健康度”，及商業(yè)化營(yíng)收續(xù)簽強(qiáng)相關(guān)的“續(xù)簽意向”，來評(píng)定并監(jiān)測(cè)用戶對(duì)SaaS產(chǎn)品服務(wù)的整體接受度及體驗(yàn)滿意度。
我們基于HEART、PULSE、UES、五度模型等已有模型，選擇業(yè)務(wù)目標(biāo)和場(chǎng)景核心指標(biāo)來調(diào)整衡量維度并推導(dǎo)演變，從業(yè)務(wù)、產(chǎn)品、技術(shù)、服務(wù)等多維視角構(gòu)成適合企業(yè)采購SaaS產(chǎn)品的體驗(yàn)度量模型，推動(dòng)運(yùn)營(yíng)/算法/后端共建機(jī)制及產(chǎn)品將體驗(yàn)監(jiān)測(cè)工具化，以形成業(yè)務(wù)中多角色都能有效應(yīng)用起來的體驗(yàn)質(zhì)量評(píng)估體系。
最終，管理決策者較過往能更實(shí)時(shí)的掌握一線人員工作使用中后臺(tái)的健康度情況，有效數(shù)字化管理。
對(duì)我們的合作伙伴業(yè)務(wù)運(yùn)營(yíng)團(tuán)隊(duì)而言，全新的客戶續(xù)簽意向管理預(yù)測(cè)方式，可提早發(fā)現(xiàn)風(fēng)險(xiǎn)，更能聯(lián)合內(nèi)部預(yù)警及平臺(tái)觸達(dá)運(yùn)營(yíng)服務(wù)有效規(guī)避客戶流失。
而對(duì)于我們自身設(shè)計(jì)職能，通過這種度量維度方法和工具，不但能定期便攜的獲取核心指標(biāo)變化作為設(shè)計(jì)價(jià)值量化憑證，體驗(yàn)監(jiān)測(cè)所獲得的相關(guān)結(jié)論還可以指出中后臺(tái)產(chǎn)品當(dāng)前業(yè)務(wù)階段問題方向，結(jié)合設(shè)計(jì)目標(biāo)鎖定問題范圍，定位后續(xù)設(shè)計(jì)著力點(diǎn)。
-
上述即是企采SaaS中后臺(tái)產(chǎn)品中的設(shè)計(jì)實(shí)踐。我們也總結(jié)了幾個(gè)定位設(shè)計(jì)機(jī)會(huì)及價(jià)值的心得或方法。
具有出眾同理心的設(shè)計(jì)洞察以及解法是體驗(yàn)價(jià)值的基礎(chǔ)。（常說要站在用戶視角做設(shè)計(jì)，但不像消費(fèi)端，設(shè)計(jì)師多不是中后臺(tái)實(shí)際用戶，也很難換位思考理解用戶工作行為特征和痛點(diǎn)。)
因此，中后臺(tái)領(lǐng)域的設(shè)計(jì)角色迫切的需要與更多的實(shí)際用戶去交談、調(diào)研。
為提升該過程的質(zhì)量及效率，我們嘗試在用戶定性調(diào)研訪談之前，多通過學(xué)徒式調(diào)研的方法，來熟悉其工作行為特征，定性的挖掘用戶痛點(diǎn)。
即是以單任務(wù)為維度，先請(qǐng)教我們的實(shí)際用戶他們是如何做的，并依此自己上手完整實(shí)操，直到確保能按時(shí)保質(zhì)完成目標(biāo)任務(wù)。
設(shè)身處地還原目標(biāo)用戶情景，理解各方案的優(yōu)劣勢(shì)，及如何在他人身上起作用的目的，在該環(huán)節(jié)之后再去和用戶交談，即可更高效的獲得真實(shí)的用戶洞察以及理想方案假設(shè)。
天馬行空的設(shè)計(jì)創(chuàng)新方案總是在決策時(shí)受各種技術(shù)、資源為由被Pass，推進(jìn)創(chuàng)新智能的體驗(yàn)方案在中后臺(tái)領(lǐng)域是個(gè)尤為費(fèi)事的過程。
面對(duì)這一難題，我們可以通過體現(xiàn)設(shè)計(jì)思維的一些工具模型調(diào)整應(yīng)用，來增強(qiáng)表現(xiàn)說服力，進(jìn)而建立信任以及方案推進(jìn)的成功率。
譬如設(shè)計(jì)側(cè)常用的決策工具用戶體驗(yàn)地圖，在B類中后臺(tái)領(lǐng)域中可以將原本情緒體驗(yàn)波浪線替換為效率數(shù)據(jù)來調(diào)整應(yīng)用，梳理并呈現(xiàn)產(chǎn)品的全流程效率數(shù)據(jù)曲線，同理“峰終定律”來快速界定并洞察全鏈路中短板模塊，以及低效待設(shè)計(jì)優(yōu)化關(guān)鍵點(diǎn)。
借此數(shù)據(jù)可視化手段，呈現(xiàn)出來體驗(yàn)關(guān)鍵問題嚴(yán)重性，亦可讓項(xiàng)目組各職能伙伴共情，獲得設(shè)計(jì)策略及方案的認(rèn)同。
設(shè)計(jì)創(chuàng)新提案難免會(huì)出現(xiàn)兩類問題：
首先是創(chuàng)新提案推不下去，甚至被說是設(shè)計(jì)自high。
這多是因?yàn)闆]有想著結(jié)合業(yè)務(wù)方向，光想著創(chuàng)新或新穎的方式去設(shè)計(jì)方案。
我們擅長(zhǎng)也希望通過酷炫的動(dòng)效，創(chuàng)新的交互，智能化體驗(yàn)的暢想及解法來表現(xiàn)設(shè)計(jì)手段的精深。固然，這些事情的探索嘗試或練習(xí)都有其意義價(jià)值，但作為商業(yè)設(shè)計(jì)師不能光紙上談兵，只有結(jié)合業(yè)務(wù)順勢(shì)而為，我們耗時(shí)做的方案才有可能提案成功，更推進(jìn)技術(shù)還原落地，從而帶給用戶更好的用戶體驗(yàn)。
再者就是方案有結(jié)合業(yè)務(wù)，也被認(rèn)可有價(jià)值了，但優(yōu)先級(jí)往后走？
這說明設(shè)計(jì)結(jié)合的點(diǎn)不大對(duì)，并非業(yè)務(wù)最關(guān)心的。
中后臺(tái)產(chǎn)品，多和前臺(tái)核心戰(zhàn)略有著強(qiáng)邏輯關(guān)系，或有廣泛的、潛在的商業(yè)化潛力。而了解業(yè)務(wù)核心關(guān)注點(diǎn)，最簡(jiǎn)單快速的方法就是找到對(duì)的人——業(yè)務(wù)一號(hào)位，并快速抄作業(yè)。
勇敢點(diǎn)的可直接約業(yè)務(wù)一號(hào)位聊聊，含蓄的設(shè)計(jì)師亦可嘗試借美化一號(hào)位匯報(bào)PPT等手段，巧妙的獲取并理解業(yè)務(wù)核心目標(biāo)，布局以及關(guān)鍵利益，在此基礎(chǔ)上再從上至下梳理了解各子業(yè)務(wù)線規(guī)劃，設(shè)計(jì)就能更好的取舍。
原文地址：站酷 作者：阿里巴巴CBU設(shè)計(jì)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
一、什么是大標(biāo)題設(shè)計(jì)風(fēng)格？
大標(biāo)題導(dǎo)航欄是從iOS11發(fā)布后，開始在中國(guó)的UI設(shè)計(jì)師中急速流行的一種設(shè)計(jì)風(fēng)格。其實(shí)這種風(fēng)格最早在2016年就在硅谷盛行了起來，源自一位叫Michael Horton的設(shè)計(jì)師發(fā)表的一篇《Complexion Reduction: A New Trend In Mobile Design 》的文章，這篇文章提到的Complexion Reduction這種設(shè)計(jì)風(fēng)格(下文簡(jiǎn)稱CR)就是大標(biāo)題導(dǎo)航欄的起源，即大、黑、粗的標(biāo)題。
CR這種風(fēng)格有四個(gè)明顯的特征：
1.刪除多余的顏色；
2.又大、又黑、又粗的標(biāo)題；
3.簡(jiǎn)單、可識(shí)別的圖標(biāo)，也不要使用顏色(常用黑灰色)；
4.留白留白留白，更多的留白。
下圖是比較典型的使用CR風(fēng)格的APP（分別是愛彼迎、ENJOY、火球買手、MOO音樂），大家可以結(jié)合CR風(fēng)格的4大特征感受一下：
不知道小伙伴們有沒有發(fā)現(xiàn)，這幾個(gè)APP的功能會(huì)比較單一或是某一垂直領(lǐng)域，且視覺上都給人一種高品質(zhì)，超極簡(jiǎn)的感覺，人們會(huì)更多的關(guān)注界面中內(nèi)容本身，對(duì)內(nèi)容的要求也會(huì)更高。
二、中西方的差異
那么問題來了，為什么這種CR風(fēng)格鮮少出現(xiàn)在中國(guó)特有的淘寶類電商APP中呢？
國(guó)外的APP大都是小而精致的，一般一個(gè)APP只能做一件事，功能比較單一，而國(guó)內(nèi)的淘寶類電商APP，攜程類的綜合旅游APP所包含的業(yè)務(wù)與功能都非常廣泛，在狹小的手機(jī)屏幕上展示更多的商品就顯得尤其重要，CR風(fēng)格提倡的大標(biāo)題大留白無疑不是在挑戰(zhàn)老板的底線。
實(shí)際上即便使用大標(biāo)題風(fēng)格也不要盲目采用iOS11官方的大標(biāo)題導(dǎo)航，其原因在于中英文的差異。
英文大標(biāo)題一個(gè)單詞有大小寫的變化，富有一定的層級(jí)變化，而中文如果使用iOS11給定的68px（二倍圖下）的字號(hào)，那真是大到閃瞎我的眼。中文一個(gè)詞語每一個(gè)字都是差不多的大小，沒有層級(jí)上的變化，太大的字體在整個(gè)界面中看起來會(huì)很奇怪，如下圖：
三、合理使用大標(biāo)題
雖說iOS11那么大的標(biāo)題不適合大部分的APP，但并不是說大標(biāo)題風(fēng)格就不適合大部分APP了，實(shí)際上目前大多數(shù)的APP依然使用了大標(biāo)題的風(fēng)格，不過進(jìn)行了一定的改良。
以下參考尺寸均是二倍圖下的尺寸
1.大標(biāo)題導(dǎo)航欄
大標(biāo)題導(dǎo)航欄大致有兩種樣式，一種是延用iOS11的大標(biāo)題導(dǎo)航欄，一種是稍微改良使用的大標(biāo)題導(dǎo)航欄。
1）iOS11大大大標(biāo)題導(dǎo)航欄
iOS11的大標(biāo)題導(dǎo)航欄標(biāo)題字號(hào)約為68px、欄高192px(二倍圖)，大標(biāo)題對(duì)齊導(dǎo)航欄左邊，頁面滑動(dòng)時(shí)轉(zhuǎn)換為常規(guī)的導(dǎo)航欄。
國(guó)內(nèi)使用這種大大大標(biāo)題的APP比較少，標(biāo)題文字實(shí)在太大，若只作為導(dǎo)航標(biāo)題占位，會(huì)極其浪費(fèi)屏幕空間。
使用這種大大大標(biāo)題時(shí)，導(dǎo)航標(biāo)題一般都有一定的意義，如下圖:
餓了么的訂單頁詳情頁使用了這種大大大標(biāo)題，但是標(biāo)題賦予了訂單狀態(tài)的意義，比起單純的“訂單詳情”，這樣有一定意義的標(biāo)題文字則可考慮使用iOS11的大大大標(biāo)題。
2）改良大標(biāo)題導(dǎo)航欄
某些APP在使用大標(biāo)題導(dǎo)航欄時(shí)，在iOS11的大標(biāo)題導(dǎo)航欄上進(jìn)行了一定的改良，最常見的就是一定程度縮小了標(biāo)題的字號(hào)，如下圖:
這三個(gè)APP的標(biāo)題字號(hào)都沒有到68px，常用40px~48px的字號(hào)，陌陌與天貓是固定在頂部導(dǎo)航欄的，而Kepp會(huì)隨頁面上滑變?yōu)槌Ｒ?guī)標(biāo)題導(dǎo)航。
一般這種固定的較大標(biāo)題都會(huì)隱去導(dǎo)航欄的分割線，顯得導(dǎo)航欄更高，更有呼吸感。像是天貓的大標(biāo)題導(dǎo)航欄使用的色塊，與下方模塊又比較近，就顯得很擁擠。
2.Tab欄大標(biāo)題
Tab欄的文字標(biāo)題切換樣式最常見的就是顏色變化，加小短線等，隨著大標(biāo)題風(fēng)格的流行，Tab欄的切換樣式也出現(xiàn)了大標(biāo)題的選中樣式，選中字號(hào)通常采用40~48px（甚至更大，如蝦米音樂的72px），而非選中標(biāo)題通常則是采用的28~32px，如下圖：
使用這樣的Tab欄，能夠迅速幫助用戶辨識(shí)自己所在的位置，就差指著自己說“這兒”了。需要注意的是一個(gè)屏幕內(nèi)盡量只在一級(jí)Tab使用大標(biāo)題切換，與二級(jí)Tab做出區(qū)分。
3.模塊化大標(biāo)題
大標(biāo)題的風(fēng)格除了應(yīng)用在界面頂部導(dǎo)航，在模塊化標(biāo)題上應(yīng)用的也非常多，有些APP即便頂部導(dǎo)航不使用大標(biāo)題，卻會(huì)在模塊化標(biāo)題上使用較大的字號(hào)，如下圖：
這種模塊化大標(biāo)題常配合留白分割的界面使用(這也符合了CR風(fēng)格的特征)，模塊化大標(biāo)題在留白分割的界面上能夠更好地幫助上下模塊做到層級(jí)區(qū)分的作用。
4.文字變大變粗變黑
拋開大標(biāo)題不談，不知大家有沒有發(fā)現(xiàn)，現(xiàn)在越來越多的APP的內(nèi)容標(biāo)題、正文內(nèi)容的字體也在逐漸變得更黑更粗，甚至更大，畢竟我們的手機(jī)變得越來越大了。如下圖：
即便是擁有復(fù)雜業(yè)務(wù)的淘寶與飛豬，在某些內(nèi)容標(biāo)題上也變得更粗更黑，一眼看過去用戶能更容易找到自己想看的內(nèi)容。
四、劃重點(diǎn)
· 大標(biāo)題設(shè)計(jì)風(fēng)格源自Complexion Reduction這種設(shè)計(jì)風(fēng)格，CR這種風(fēng)格的特征就在于顏色少、標(biāo)題大黑粗、圖標(biāo)通用簡(jiǎn)單、大留白；
· 由于中英文字體的差異，中文使用超大字號(hào)沒有英文富有變化；
· 合理使用大標(biāo)題，做一些適當(dāng)?shù)母牧?。常見用于?dǎo)航欄、一級(jí)Tab選中標(biāo)題、模塊化大標(biāo)題以及內(nèi)容標(biāo)題。
原文地址：站酷 作者：人類君
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
將普遍存在的人性用戶心理規(guī)律運(yùn)用于設(shè)計(jì)，增加設(shè)計(jì)的溫度。
近來對(duì)用戶心理比較感興趣，去看相關(guān)設(shè)計(jì)資料的時(shí)候發(fā)現(xiàn)相關(guān)內(nèi)容重復(fù)性較高，多方搜集資料結(jié)合自己的一些分析總結(jié)出一篇補(bǔ)充。
定律是鑰匙，在遇到讓我們上癮，持續(xù)付出或獲得情感的APP，多去想一想它背后洞察了哪些人性及心理，能不能為我們的后續(xù)的設(shè)計(jì)吸收。
原文地址：站酷 作者：唐小蔥
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
一類支持有C端前臺(tái)，支持前臺(tái)產(chǎn)品管理各種資源。第二類服務(wù)企業(yè)，提高企業(yè)工作效率和營(yíng)收。
1.監(jiān)控運(yùn)營(yíng)：時(shí)效性強(qiáng)，旨在實(shí)時(shí)反饋異常情況，快速判斷下達(dá)命令，回復(fù)信息、多用于數(shù)據(jù)控制中心。
2.數(shù)據(jù)分析：數(shù)據(jù)結(jié)果的對(duì)比和分析趨勢(shì)，時(shí)效性要求并不高，了解整體和各部分?jǐn)?shù)據(jù)水平，助力決策。
3.記錄管理類：主要用于人員、設(shè)備、資產(chǎn)等增刪改查，文本信息容量大，頻繁便捷的操作。
4.系統(tǒng)配置：權(quán)限配置、設(shè)備功能配置，操作為主。
淺色：
適合文本信息多密集的表單列表類后臺(tái)，淺色更符合人眼白底黑字的閱讀習(xí)慣，瀏覽速度更快，信息獲取效率更高。
深色：
圖像信息密集的后臺(tái)適合圖片、數(shù)據(jù)可視化圖表等；深色對(duì)彩色的圖像信息襯托更強(qiáng)。信息獲取速度較慢，長(zhǎng)時(shí)間可能視疲勞。
較常見
優(yōu)點(diǎn)：市面最常見的風(fēng)格，普世性高，大多數(shù)用戶可快速接受，層次分明
缺點(diǎn)：視覺缺乏記憶點(diǎn)
優(yōu)點(diǎn)：視覺清新明快更年輕化更輕量，對(duì)其他文本及圖形展示包容性高，就像A4白紙一樣容器存在感弱
缺點(diǎn)：純白色導(dǎo)航+頁面層次略曖昧。
適合：適合科技屬性強(qiáng)的產(chǎn)品界面，圖像圖形展示
缺點(diǎn)：對(duì)其他色彩信息有干擾，持續(xù)性長(zhǎng)時(shí)間觀看易視覺疲勞
優(yōu)點(diǎn)：對(duì)色彩表現(xiàn)力強(qiáng)
缺點(diǎn)：密集文本信息獲取速度會(huì)下降，持續(xù)性長(zhǎng)時(shí)間觀看易視覺疲勞
比如美妝和科技行業(yè)的整體設(shè)計(jì)基調(diào)就不太相同。
理性可靠 or 簡(jiǎn)潔輕松輕量 or 關(guān)懷普世 or 酷炫吸睛….這個(gè)可以和相關(guān)產(chǎn)品經(jīng)理、銷售共同商討
根據(jù)目標(biāo)用戶的性別、年齡層、受教育水平，審美水平考量（可能包含多種角色，選取1.2個(gè)核心角色為參考）帶入目標(biāo)用戶工作場(chǎng)景及愛用物常用物品味，去判斷基調(diào)。
如主要用戶群：40+男性用戶，本科以上受教育水平，使用windows電腦進(jìn)行專業(yè)管理操作，審美傾向明確內(nèi)斂。
如主要用戶群：20-40歲，男女比例約6：4；大專；操作水平參差
例如：最常使用數(shù)據(jù)分析管理，需要快速閱覽多條數(shù)據(jù)，對(duì)數(shù)據(jù)進(jìn)行比對(duì)，更適合淺色風(fēng)格展示表單數(shù)據(jù)。
獨(dú)立開發(fā)的，可以采取更獨(dú)特設(shè)計(jì)。若平臺(tái)很大需要不同外包公司的合作屬于整合類平臺(tái)則更注重設(shè)計(jì)的包容性。
“731配色比例”70%的面板色，30%的導(dǎo)航面板色，10%的強(qiáng)調(diào)色。（這里的用色比例可以根據(jù)內(nèi)容具體再去調(diào)節(jié)只是大概比例）品牌色或重點(diǎn)色：強(qiáng)調(diào)行動(dòng)關(guān)鍵點(diǎn)、重要信息高亮、圖形化說明等。強(qiáng)調(diào)色用就要用的像蛋糕上的櫻桃。起到畫龍點(diǎn)睛作用即可。
后臺(tái)高頻出現(xiàn)的圖標(biāo)，值得我們花時(shí)間去統(tǒng)一設(shè)計(jì)打磨，調(diào)整圓角粗細(xì)疏密，符合整體界面氣質(zhì)。從圖標(biāo)庫里拖出的圖標(biāo)很多在線條粗細(xì)上是不統(tǒng)一的，好的設(shè)計(jì)在細(xì)節(jié)處也要?jiǎng)尤恕?
B端工具類圖標(biāo)識(shí)別性第一，美觀性第二。B端導(dǎo)航圖標(biāo)更多是在基礎(chǔ)造型上打磨，不需要加花里胡哨的漸變、投影，導(dǎo)航圖標(biāo)一般在24px-16px大小，太復(fù)雜反而看不清。在區(qū)分狀態(tài)的時(shí)候可以考慮加點(diǎn)品牌色
空狀態(tài)插畫是B端設(shè)計(jì)師少有能發(fā)揮自己繪畫天賦小巧思的地方。
圖形化狀態(tài)語言，輔助用戶理解內(nèi)容?？梢詫a(chǎn)品機(jī)械蒼白的文案設(shè)計(jì)表現(xiàn)的更加具有溫度，具有引導(dǎo)性。讓乏味的工作出現(xiàn)一些共情小彩蛋，有趣的插圖動(dòng)畫可以緩解等待的焦慮。
純色背景卡片式：簡(jiǎn)單大方更聚焦登錄操作
插畫背景：場(chǎng)景化展示產(chǎn)品的功能及亮點(diǎn)，讓用戶更有心理預(yù)期
幾何圖形背景：最后和品牌圖形相關(guān)，加深用戶對(duì)產(chǎn)品的品牌印象。
照片背景：相關(guān)場(chǎng)景或產(chǎn)品類型，具象圖片信息更直觀
不同大小的圓角傳達(dá)產(chǎn)品不同的氣質(zhì)，大圓角親和、小圓角精致、中等圓角大眾中庸。
優(yōu)化信息層級(jí)，區(qū)分信息主次可以使閱讀更快，操作更快，界面更有節(jié)奏感。
這時(shí)候你就是那個(gè)考前畫重點(diǎn)的老師
判斷一個(gè)頁面里最重要的是那些信息或操作，強(qiáng)化它！并弱化輔助信息；
判斷一個(gè)模塊里那些是重要信息，強(qiáng)化它！
1.追求炫酷的視覺效果舍棄操作效率。比如追波風(fēng)滿屏花里胡哨的卡片及面板，滿屏大投影及高飽和色彩。對(duì)于B端界面來說信息噪音太多，反而干擾信息獲取效率。
2.反常規(guī)用戶習(xí)慣的操作。尊重用戶習(xí)慣，不要為了個(gè)性化去嘗試改變，不要妄圖改變用戶的操作和認(rèn)知的慣性。慣性思維大于設(shè)計(jì)思維，曾經(jīng)遇到過產(chǎn)品因?yàn)橛沂植僮魉砸褜?dǎo)航放在右邊的離譜例子。
3.數(shù)量多，動(dòng)靜大的夸張的動(dòng)效。B端與C端不同的地方在于希望操作者沉浸式工作，遵循非必要不打擾。之前看過一個(gè)反面例子后臺(tái)，在每一步操作后都出現(xiàn)大的場(chǎng)景動(dòng)效鼓勵(lì)完成，如果作為一個(gè)長(zhǎng)期使用的工作者，我會(huì)覺得每次完成任務(wù)都需要等待動(dòng)畫完成可能只需要2-3s也很浪費(fèi)我的時(shí)間。
4.新人建議多看Antdesign和Element等成熟的組件，創(chuàng)新類組件樣式，最好和和開發(fā)商量是否能夠?qū)崿F(xiàn)。
5.在確定主要風(fēng)格及2-5張主要頁面后，就應(yīng)該著手基礎(chǔ)規(guī)范（色彩字體等，不然后面越做越亂）。
6.一段時(shí)間一個(gè)審美，同一界面中的元素風(fēng)格不統(tǒng)一。
7.避免大面積使用高飽和高明度的色彩，及曖昧含糊的臨近色彩。長(zhǎng)時(shí)間使用眼睛會(huì)累，產(chǎn)生不耐煩焦躁的負(fù)面情緒。
餓了么官方組件庫：https://element.eleme.cn/#/zh-CN/component/installation
layui 官方組件庫：https://www.layui.com/admin/std/dist/views/
iviewui官方組件庫：https://www.iviewui.com/components/menu
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
UI 設(shè)計(jì)師必備的一項(xiàng)基礎(chǔ)能力：規(guī)范能力。
為了避免重復(fù)造輪子，反復(fù)掉入同樣的陷阱，閱讀并熟知主流平臺(tái)的設(shè)計(jì)規(guī)范，是非常有幫助的。
本文內(nèi)容主要介紹了iOS 、Android、Ant Design的相關(guān)規(guī)范，為的是不重復(fù)累贅描述同一個(gè)知識(shí)點(diǎn)，涉及到移動(dòng)端和PC端，主要為了幫助基礎(chǔ)同學(xué)學(xué)習(xí)，適當(dāng)?shù)貏h減了一些有難度的規(guī)范。
設(shè)計(jì)師在設(shè)計(jì)時(shí)并不一定要嚴(yán)格遵守，但對(duì)這些規(guī)范應(yīng)有所了解，并融會(huì)貫通。
通過設(shè)計(jì)規(guī)范的約束，保證產(chǎn)品的色彩使用、圖標(biāo)圖形、空間、文字、頁面布局等內(nèi)容保證嚴(yán)格的一致性。
規(guī)范能延續(xù)產(chǎn)品風(fēng)格及特性，保證產(chǎn)品視覺及交互層面的統(tǒng)一，包括技術(shù)帶來的變革，增強(qiáng)用戶的認(rèn)知性，不同程度得提升用戶體驗(yàn)。
多人合作完成一個(gè)項(xiàng)目時(shí)，需要視覺規(guī)范。遵循設(shè)計(jì)規(guī)范，保證視覺統(tǒng)一、提高工作效率。
輔助技術(shù)層搭建框架及布局的規(guī)則更清晰明確，如按鈕、顏色、字體大小等，提高開發(fā)效率，確保應(yīng)用軟件最終實(shí)現(xiàn)效果與視覺設(shè)計(jì)相符合。
視覺設(shè)計(jì)規(guī)范是指對(duì)設(shè)計(jì)的具體技術(shù)要求，是設(shè)計(jì)工作的規(guī)則。包含了目標(biāo)、功能、技術(shù)指標(biāo)，以及限制條件等。
① 視覺設(shè)計(jì)規(guī)范，是量化的設(shè)計(jì)指標(biāo)，具有指導(dǎo)性、約束性。
視覺設(shè)計(jì)規(guī)范要確定?般可用性原則和審美常識(shí)下的避免犯錯(cuò)的方法，以及一旦出現(xiàn)錯(cuò)誤后的補(bǔ)救方案。規(guī)范的第一個(gè)目的是減少設(shè)計(jì)過程中出錯(cuò)的次數(shù)，針對(duì)新手設(shè)計(jì)師、第三方團(tuán)隊(duì)，可以很好地做到經(jīng)驗(yàn)傳遞，迅速了解上手。減少標(biāo)注時(shí)間，提高前端開發(fā)質(zhì)量。
② 視覺設(shè)計(jì)規(guī)范，是確定關(guān)鍵因素，要有有效性、復(fù)用性。
獲得該設(shè)計(jì)規(guī)范針對(duì)范圍內(nèi)的關(guān)鍵點(diǎn)，包括設(shè)計(jì)方向和設(shè)計(jì)元素，以通過項(xiàng)目設(shè)計(jì)的過程，達(dá)到團(tuán)隊(duì)成員的更加密切的配合效果。促進(jìn)多人協(xié)作，解決視覺不統(tǒng)?現(xiàn)象。
① 品牌規(guī)范：塑造形象以及應(yīng)用的規(guī)范。主要包含了標(biāo)識(shí)的標(biāo)準(zhǔn)制圖，配色字體等。以及常用的搭配方式。
?個(gè)企業(yè)或者?個(gè)產(chǎn)品，都有相應(yīng)的品牌視覺識(shí)別系統(tǒng)（VIS）。品牌視覺識(shí)別系統(tǒng)是視覺設(shè)計(jì)最好的參考基礎(chǔ)，既然是?種指導(dǎo)體系或者說是參考，那么也相應(yīng)地會(huì)有品牌的規(guī)范。
② 平臺(tái)設(shè)計(jì)語言規(guī)范：平臺(tái)理念、遵循規(guī)范的好處、某種應(yīng)用的生態(tài)。比如 Google 和 Apple 制定的規(guī)范。針對(duì)第三方的規(guī)范，主要旨在讓這些第三方的設(shè)計(jì)更兼容平臺(tái)應(yīng)用。通常制定了大的方向和規(guī)則。并且會(huì)提供很多基礎(chǔ)的設(shè)計(jì)元素和插件。
③ 產(chǎn)品業(yè)務(wù)規(guī)范：側(cè)重在產(chǎn)品設(shè)計(jì)和實(shí)現(xiàn)層，內(nèi)容清晰并且實(shí)用，標(biāo)注詳盡，方便設(shè)計(jì)師們使用。更注重個(gè)性化的部分。
https://material.io/
Material Design 規(guī)范在于統(tǒng)一 Google 多種平臺(tái)下的一致性，代表 Google 全新的體驗(yàn)。 包含豐富的色彩、空間的層次、流暢的動(dòng)效、多樣的組件。
谷歌的想法是讓谷歌平臺(tái)上的開發(fā)者掌握這個(gè)新框架，從而讓所有應(yīng)用就有統(tǒng)一的外觀，就像是蘋果向開發(fā)者提出的設(shè)計(jì)原則一樣。
從設(shè)計(jì)角度：建立共同的設(shè)計(jì)語言，將產(chǎn)品風(fēng)格、品牌及交互形式統(tǒng)一起來。
從使用角度：提高產(chǎn)品認(rèn)知度，提升品牌延續(xù)性及產(chǎn)品體驗(yàn)的一致性。
Material Design 是基于三維空間的設(shè)計(jì)語言。 包含光線、材質(zhì)、陰影。在 Material 環(huán)境中，虛擬燈光照射整個(gè)場(chǎng)景。
Material 有自身固定不變的外在特征和內(nèi)在行為邏輯 ，理解這些固有的屬性有助于實(shí)際的設(shè)計(jì)項(xiàng)目。
? 立體性
? 空間位置的唯一性
? 不可穿透
? 形狀可變化
? 沿水平方向做變化
? 不可彎曲
? 能與其他材質(zhì)對(duì)象合并
? 分裂，再合并
? 可沿任何軸上移動(dòng)
Material 借鑒了現(xiàn)實(shí)物理世界中的物質(zhì)特性，并將其運(yùn)用在虛擬三維空間中的 Material 元素上， 有利于幫助用戶理解信息層級(jí)，同時(shí)可以統(tǒng)一各應(yīng)用之間的體驗(yàn)。
投影提供了元素深度和運(yùn)動(dòng)方向的重要視覺線索；在運(yùn)動(dòng)中，投影提供了元素移動(dòng)方向及高度變化。
https://developer.apple.com/desig
iOS 設(shè)計(jì)規(guī)范逝之蘋果開發(fā)者官網(wǎng)上面的 iOS 人機(jī)交互指南（iOS Human Interface Guideline）。制作這個(gè)規(guī)范的目的是為了讓所有安裝到 iOS 系統(tǒng)的 App 都遵從某些特定的視覺特性、交互特性，以達(dá)到風(fēng)格一致的使用體驗(yàn)。另一層面，也是便于讓設(shè)計(jì)人員和開發(fā)人員能夠更好地理解 iOS 系統(tǒng)，更合理的運(yùn)用系統(tǒng)提供的功能和接口，更高效地制作出 App。
在整個(gè) iOS 系統(tǒng)中，每一種尺寸下的文本信息都應(yīng)該是易讀的，圖標(biāo)應(yīng)該是精確易懂的，每一個(gè)裝飾應(yīng)該是精巧適當(dāng)?shù)?，而且更加需要注重功能?qū)動(dòng)設(shè)計(jì)的原則。利用留白、色彩、字體、圖像和界面元素巧妙的突出重要內(nèi)容并傳達(dá)其不同的交互性。
在簡(jiǎn)潔美觀的界面中清晰流暢的動(dòng)畫效果可以幫助用戶更容易理解內(nèi)容并與之進(jìn)行交互，而不會(huì)對(duì)用戶的操作產(chǎn)生干擾。內(nèi)容全屏顯示時(shí)，半透明或者模糊處理的方式可以提示用戶更多的內(nèi)容。減少使用邊框，漸變及陰影可以使界面輕 量化，突出顯示內(nèi)容（內(nèi)容優(yōu)先）。
不同的視覺層次和逼真生動(dòng)的動(dòng)畫效果 可以表達(dá)界面更深層次的內(nèi)容，賦予了界面活力，使用戶對(duì)界面內(nèi)容更容易理解。易于發(fā)現(xiàn)并易于觸摸的元素可以提升用戶體驗(yàn)的愉悅感，用戶在操作功能時(shí)不至于迷失。當(dāng)用戶在瀏覽內(nèi)容時(shí)，流暢的轉(zhuǎn)場(chǎng)效果提供了一種縱深感。
為了最大限度地提高影響力和覆蓋面，在應(yīng)用設(shè)計(jì)規(guī)范時(shí)應(yīng)牢記以下原則：
（1）審美完整（Aesthetic Integrity）
審美完整性體現(xiàn)了 App 的外觀和行為與其功能的整合程度。例如，一個(gè)幫助用戶執(zhí)行嚴(yán)肅任務(wù)的 App 可以通過微妙、不顯眼的圖形、標(biāo)準(zhǔn)控件和可預(yù)測(cè)的行為來保持他們的專注。
另一方面，沉浸式的 App，比如游戲 App等，就可以提供吸引人的外觀，傳遞樂趣和刺激感，同時(shí)鼓勵(lì)發(fā)現(xiàn)。
系統(tǒng)提供的界面元素、眾所周知的圖標(biāo)、標(biāo)準(zhǔn)的文本樣式和統(tǒng)一的術(shù)語來實(shí)現(xiàn)熟悉的標(biāo)準(zhǔn)和范例可以使得一個(gè) App 的設(shè)計(jì)符合一致性。
易用性指的是用戶可以理解屏幕的內(nèi)容，用手勢(shì)、觸動(dòng)屏幕等動(dòng)作直接操作，并且，用戶通過直接操縱，可以看到他們的行動(dòng)的直接的、可見的結(jié)果。
反饋指對(duì)用戶的行動(dòng)進(jìn)行了確認(rèn)，并且通過顯示行動(dòng)結(jié)果以使用戶了解情況。iOS 系統(tǒng)的 App 要為用戶的每一項(xiàng)操作提供可感知的反饋。如：輕觸時(shí)會(huì)突出顯示交互元素；進(jìn)度指示器會(huì)傳達(dá)長(zhǎng)時(shí)間運(yùn)行的項(xiàng)目的狀態(tài)；動(dòng)畫和音效有助于闡明操作的結(jié)果。
當(dāng)一個(gè) App 中的虛擬元素以及動(dòng)作都是用戶對(duì)熟悉事物的隱喻的時(shí)候（包括現(xiàn)實(shí)世界和數(shù)字世界），用戶會(huì)學(xué)習(xí)的更快。比如，用戶移動(dòng)視圖來查看更多內(nèi)容；拖拽內(nèi)容；切換開關(guān)、移動(dòng)滑塊并且直接滾動(dòng)來選取值；甚至可以像翻書或雜志一樣輕快的翻頁。
在整個(gè) iOS 中，用戶是掌控者，而不是 App，App可以建議一個(gè)行動(dòng)方案或者警示危險(xiǎn)后果，但 App 不能替用戶做決策。
好的 App 可以在用戶授權(quán)和避免不必要的結(jié)果之間找到正確的平衡。
App 可以通過交互元素，確認(rèn)、取消的提醒以使得用戶覺得自己在控制。
https://ant.design/index-cn
Ant Design服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系，常用于PC端設(shè)計(jì)規(guī)范，基于「自然」、「確定性」、「意義感」、「生長(zhǎng)性」四大設(shè)計(jì)價(jià)值觀，通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計(jì)者專注于更好的用戶體驗(yàn)。
1.Ant Design平臺(tái)的設(shè)計(jì)原則
如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個(gè)視覺單元；反之，則它們的距離就應(yīng)該越遠(yuǎn)，也越像多個(gè)視覺單元。親密性的根本目的是實(shí)現(xiàn)組織性，讓用戶對(duì)頁面結(jié)構(gòu)和信息層次一目了然。
正如「格式塔學(xué)派」中的連續(xù)律（Law of Continuity）所描述的，在知覺過程中人們往往傾向于使知覺對(duì)象的直線繼續(xù)成為直線，使曲線繼續(xù)成為曲線。在界面設(shè)計(jì)中，將元素進(jìn)行對(duì)齊，既符合用戶的認(rèn)知特性，也能引導(dǎo)視覺流向，讓用戶更流暢地接收信息。
對(duì)比是增加視覺效果最有效方法之一，同時(shí)也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識(shí)別關(guān)鍵信息。
相同的元素在整個(gè)界面中不斷重復(fù)，不僅可以有效降低用戶的學(xué)習(xí)成本，也可以幫助用戶識(shí)別出這些元素之間的關(guān)聯(lián)性。重復(fù)元素可以是一條粗線、一種線框，某種相同的顏色、設(shè)計(jì)要素、設(shè)計(jì)風(fēng)格，某種格式、空間關(guān)系等。
正如 Alan Cooper 所言：「需要在哪里輸出，就要允許在哪里輸入」。這就是直接操作的原理。
eg：不要為了編輯內(nèi)容而打開另一個(gè)頁面，應(yīng)該直接在上下文中實(shí)現(xiàn)編輯。
能在這個(gè)頁面解決的問題，就不要去其它頁面解決，因?yàn)槿魏雾撁嫠⑿潞吞D(zhuǎn)都會(huì)引起變化盲視（Change Blindness），導(dǎo)致用戶心流（Flow）被打斷。頻繁的頁面刷新和跳轉(zhuǎn)，就像在看戲時(shí)，演員說完一行臺(tái)詞就安排一次謝幕一樣。
根據(jù)費(fèi)茨法則（Fitts's Law）所描述的，如果用戶鼠標(biāo)移動(dòng)距離越少、對(duì)象相對(duì)目標(biāo)越大，那么用戶越容易操作。通過運(yùn)用上下文工具（即：放在內(nèi)容中的操作工具），使內(nèi)容和操作融合，從而簡(jiǎn)化交互。
很多富交互模式（eg：「拖放」、「行內(nèi)編輯」、「上下文工具」）都有一個(gè)共同問題，就是缺少易發(fā)現(xiàn)性。所以「提供邀請(qǐng)」是成功完成人機(jī)交互的關(guān)鍵所在。
邀請(qǐng)就是引導(dǎo)用戶進(jìn)入下一個(gè)交互層次的提醒和暗示，通常包括意符（eg：實(shí)時(shí)的提示信息）和可供性，以表明在下一個(gè)界面可以做什么。當(dāng)可供性中可感知的部分（Perceived Affordance）表現(xiàn)為意符時(shí)，人機(jī)交互的過程往往更加自然、順暢。
人腦灰質(zhì)（Gray Matter）會(huì)對(duì)動(dòng)態(tài)的事物（eg：移動(dòng)、形變、色變等）保持敏感。在界面中，適當(dāng)?shù)募尤胍恍┻^渡效果，能讓界面保持生動(dòng)，同時(shí)也能增強(qiáng)用戶和界面的溝通。
「提供邀請(qǐng)」的強(qiáng)大體現(xiàn)在 交互之前 給出反饋，解決易發(fā)現(xiàn)性問題；「巧用過渡」的有用體現(xiàn)在它能夠在 交互期間 為用戶提供視覺反饋；「即時(shí)反應(yīng)」的重要性體現(xiàn)在 交互之后 立即給出反饋。
就像「牛頓第三定律」所描述作用力和反作用一樣，用戶進(jìn)行了操作或者內(nèi)部數(shù)據(jù)發(fā)生了變化，系統(tǒng)就應(yīng)該立即有一個(gè)對(duì)應(yīng)的反饋，同時(shí)輸入量級(jí)越大、重要性越高，那么反饋量級(jí)越大、重要性越高。
雖然反饋太多（準(zhǔn)確的說，錯(cuò)誤的反饋太多）是一個(gè)問題，但是反饋太少甚至沒有反饋的系統(tǒng)，則讓人感覺遲鈍和笨拙，用戶體驗(yàn)更差。
當(dāng)然，這并不代表了解這些就能做出優(yōu)秀的設(shè)計(jì)方案了，英文水平比較好的同學(xué)建議直接讀原文，直接從 Material Design 和 iOS 的官網(wǎng)進(jìn)行規(guī)范學(xué)習(xí)，效果更佳。當(dāng)然如果英文水平有限，網(wǎng)上也有很多譯版方便大家閱讀。
而關(guān)于Ant Design的設(shè)計(jì)規(guī)范，可以去官網(wǎng)查閱更多的詳細(xì)內(nèi)容，但PC端的設(shè)計(jì)規(guī)范平臺(tái)還有很多，字節(jié)、騰訊等設(shè)計(jì)官網(wǎng)都有。
記得對(duì)于規(guī)范不需要死記硬背，練多了自然能夠記住。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
好的配色不但能傳達(dá)出鮮明的產(chǎn)品主題調(diào)性，并且能為用戶的視覺行為產(chǎn)生引導(dǎo)作用，構(gòu)成良好的用戶體驗(yàn)。
對(duì)于UI設(shè)計(jì)師來說，不但要考慮顏色在給予用戶的感受上的作用，同樣應(yīng)當(dāng)考慮其實(shí)用性，避免重形式而輕內(nèi)容的問題發(fā)生。
所以本文的內(nèi)容是基于色彩的基礎(chǔ)知識(shí)，為大家介紹 UI 設(shè)計(jì)師常用的配色方案、配色流程，當(dāng)然也包括其他視覺設(shè)計(jì)工作者在工作中要用到的基礎(chǔ)色彩常識(shí)。
顏色或色彩是通過“眼、腦和我們的生活經(jīng)驗(yàn)”所產(chǎn)生的?種對(duì)“光”的視覺效應(yīng)。但是人對(duì)顏色的感覺不僅僅由“光”的物理性質(zhì)所決定，還包含著“心理”等許多因素，比如人類對(duì)顏色的感覺往往受到周圍顏色的影響。有時(shí)人們也將物質(zhì)產(chǎn)生不同顏色的物理特性直接稱為顏色。
顏色的應(yīng)用在 UI 設(shè)計(jì)師的工作中是非常關(guān)鍵的一環(huán)。
（1）色相
是指色彩的相貌，色相被用來區(qū)分顏色，根據(jù)光的不同波長(zhǎng)，色彩具有紅色、黃色或綠色等性質(zhì)，這被稱之為色相。
（2）明度
是色彩從亮到暗的明暗程度，黑色的絕對(duì)明度被定義為 0 （理想黑）,而白色的絕對(duì)明度被定義為 100 （理想白），其他系列灰色則介于兩者之間。
（3）純度
純度通常是指色彩的鮮艷度。從科學(xué)的角度看，一種顏色的鮮艷度取決于這一色相發(fā)射光的單一程度。色彩的純度強(qiáng)弱，是指色相感覺明確或含糊、鮮艷或混濁的程度。
（1）HSB ：在 HSB 模式中，H（Hues）表示色相，S（Saturation）表示飽和度，B（Brightness）表示亮度。
（2）RGB ：三原色紅、綠、藍(lán)疊加最終為白色（加色模式）。常用于光源光情況下，例如顯示屏幕。
（3）CMYK ：三基色洋紅、黃、青疊加最終為黑色（減色模式）。常用于反射光情況下，例如印刷。
（4）LAB ：LAB 色彩模型是由亮度（L）和有關(guān)色彩的 A，B 三個(gè)要素組成。L 表示亮度（Luminosity），A 表示從洋紅色至綠色的范圍，B表示從黃色至藍(lán)色的范圍。
色彩心理作用是指色彩作用與人的情感所產(chǎn)生的心理感受與綜合性生理感覺作用。它影響著人們的記憶、感知、聯(lián)想和情感，刺激著視覺，在設(shè)計(jì)中有著不可忽視的作用。色彩的直接心理作用對(duì)設(shè)計(jì)有著重大的影響，關(guān)系到對(duì)用戶心理的把握。
色彩心理作用包括色彩的直接心理效應(yīng)和間接心理效應(yīng)。
（1）直接心理
色彩的直接心理效應(yīng)是色彩本身的屬性即色相、明度、純度等感官印象造成的心理感受。它包括很多不同的心理效應(yīng)，一般可分為 9 類，即色彩的興奮感和沉靜感、色彩的冷暖感、色彩的輕重感、色彩的華麗感和樸素感、色彩的明快和陰郁感、色彩的軟硬感、色彩的明暗感和色彩的空間感。
（2）間接心理
色彩的間接心理效應(yīng)是由色彩的直觀感受反映到大腦所產(chǎn)生的聯(lián)想效果。在設(shè)計(jì)中常常利用色彩間接心理效應(yīng)來傳達(dá)廣告信息。
1）灰?：正式、重?、成熟
2）棕?：保守、親切、穩(wěn)定
3）粉?：?性、天真、?春
4）??：注意、提醒、快樂
5）紫?：奢華、浪漫、創(chuàng)意
是一種充滿神秘的顏色，在自然界中較少見到，所以被引申為象征高貴的色彩。
在UI設(shè)計(jì)中的應(yīng)用場(chǎng)景為紫+粉常用于女性化的產(chǎn)品調(diào)性。
6）??：新鮮、清潔、健康
白色常常被認(rèn)為是無色”即不是色彩。
在UI設(shè)計(jì)中的應(yīng)用場(chǎng)景，常用于背景色，緩和各種顏色的沖突，以襯托其他色彩，提高畫面明度，提高文字可讀性。
圖源-dribbble
7）??：正式、權(quán)?、?練
是一種充滿質(zhì)感的顏色，它是所有色彩中最有力量的，能很快吸引用戶的注意力。
在UI中的應(yīng)用場(chǎng)景，常和其他色彩百搭，比如黑色+金色，黑色+紅色等等，以及現(xiàn)在UI設(shè)計(jì)中的暗黑模式。
圖源-dribbble
8）藍(lán)?：信任、舒適、放松
純凈的藍(lán)色通常讓人聯(lián)想到海洋和天空，讓人的內(nèi)心感到平和，有助于人的頭腦變得冷靜，減少工作中的煩躁和沖動(dòng)。
在UI設(shè)計(jì)中應(yīng)用場(chǎng)景，常用于工具、商務(wù)、科技類等產(chǎn)品，B端設(shè)計(jì)也經(jīng)常運(yùn)用。
圖源-dribbble
9）綠?：??、?然、成功
綠色是大自然中最常見的顏色，代表著健康、生命、青春、寧靜、自然、和平、安全、舒適，是一種充滿希望的顏色。
在設(shè)計(jì)中的應(yīng)用場(chǎng)景，健康、醫(yī)療、運(yùn)動(dòng)及少兒類產(chǎn)品使用較多，一般在軟件中表示安全、成功。
圖源-dribbble
10）橙?：信?、能量、樂觀
它烘托出的活躍氣氛沒有危險(xiǎn)的感覺，反而是一種友好。
在UI設(shè)計(jì)中應(yīng)用場(chǎng)景，電商、金融以及服務(wù)類的產(chǎn)品使用較多，比如淘寶。
圖源-dribbble
11）紅?：危險(xiǎn)、重要、激情
最醒目和強(qiáng)勢(shì)的顏色，甚至能引起一些生理反應(yīng)，例如心跳呼吸加快等。
在UI設(shè)計(jì)中應(yīng)用場(chǎng)景，紅色常用于電商、金融、服務(wù)等行業(yè)。紅色也最能烘托氣氛，在中國(guó)傳統(tǒng)節(jié)日里都使用熱鬧的紅色來裝飾，比如新年春節(jié)階段。同時(shí)紅色也代表了警示、告誡，所以在界面設(shè)計(jì)中常用紅色的文字和按鈕來警示用戶慎重操作。
圖源-dribbble
5.UI中的色彩
Ul配色一般包含主色和輔助色、強(qiáng)調(diào)色、中性色。
主色通常與品牌色一致，輔助色一般選擇與主色色調(diào)一致且能拉開層次的顏色，強(qiáng)調(diào)色選擇與主色相對(duì)立的互補(bǔ)色。
中性色主要用于界面中的線條和背景
圖源-dribbble
每?種色彩都有其自身的特質(zhì)，而這?特性的發(fā)揮，還需要依賴于色彩在整個(gè)配色時(shí)所處的位置、面積等，即色彩與其他色彩所形成的秩序。
顏色同樣有主體，和輔助。確定主體色系，有助于頁面整體基調(diào)的把控。在實(shí)際的操作過程中，顏色要適量，通常2-3種就可以了。多了往往較亂（并非絕對(duì)）。
單色系配色法：同?個(gè)色系內(nèi)根據(jù)顏色的明度和純度不同去做區(qū)分，形成層級(jí)關(guān)系、對(duì)比關(guān)
系的配色方法。例如：深藍(lán)、天藍(lán)、淺藍(lán)這樣的層級(jí)變化。
鄰近色配色法：相鄰的色系進(jìn)行搭配。例如：黃色、橙色、紅色。
對(duì)比色配色法：對(duì)比的色系進(jìn)行搭配。例如：黃色、紫色。
一套 App 配色基本由背景色、主題色、輔助色、點(diǎn)睛色 4 種色調(diào)組成。
flatuicolors （https://flatuicolors.com）
提供多款扁平?彩配??案，可以根據(jù) UI 設(shè)計(jì)的需要選擇使?。
Paletton （http://paletton.com）
是?個(gè)在線的?環(huán)配??具，我們可以根據(jù)需要選擇單?、相近?、對(duì)??等規(guī)則來查看配?，也可以實(shí)時(shí)查看其在??中的搭配效果。
uigradients（https://uigradients.com/）
UIgradients 以分享美麗漸變?彩為主的分享站，??接近上百種漸變配??案，設(shè)計(jì)師可根據(jù)???格來選擇搭配，此外我們還能直接獲得對(duì)應(yīng)漸變配?的CSS代碼。
webgradients（https://webgradients.com/）
富有超多好看漸變漸變配?的?站，只需要復(fù)制?彩編號(hào)填充漸變，或者直接下載PSD，Sketch，圖?，CSS代碼。
CoolHue（https://webkul.github.io/coolhue/）
富有超多好看漸變配?的?站，可安裝Sketch 插件，或者直接下載圖?和CSS代碼。
中國(guó)色網(wǎng)站（http://zhongguose.com/）
只有中國(guó)的顏色, 才能這般,美得不可方物
Adobe Color【工具】（https://color.adobe.com/zh/create/color-wheel）
Adobe色輪配色工具，可以選擇色彩模式與調(diào)和規(guī)則
ColorSpace（https://mycolor.space/）
功能強(qiáng)大的漸變色在線生成器，支持單色、雙色，甚至三色漸變。
色彩是設(shè)計(jì)中的重要組成部分，不同的色彩傳遞不同的情感和態(tài)度給用戶，這也是UI設(shè)計(jì)規(guī)范中需要注意的部分，即做到色彩統(tǒng)一、色彩平衡。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
前言
圖標(biāo)是用戶界面中重要的組成部分之一。它是一種表示命令、內(nèi)容并揭示功能背后含義的視覺語言。
你設(shè)計(jì)的圖標(biāo)應(yīng)該可以被用戶立即理解和識(shí)別。
如何在你的產(chǎn)品中設(shè)計(jì)和使用圖標(biāo)？怎樣給品牌帶來獨(dú)特的感覺？我的以下幾點(diǎn)建議建議可以來幫助你設(shè)計(jì)更棒的圖標(biāo)。
技巧1 -設(shè)置網(wǎng)格
你永遠(yuǎn)不會(huì)創(chuàng)建單獨(dú)一個(gè)的圖標(biāo)，因?yàn)閳D標(biāo)總是一套的。為了讓你的圖標(biāo)具備統(tǒng)一性，你需要一個(gè)網(wǎng)格。
定義安全區(qū)域并設(shè)置邊框。使用生成的網(wǎng)格作為模板，以固化所有圖標(biāo)的比例和大小。
技巧2 -保持一致
在設(shè)計(jì)一組圖標(biāo)時(shí)，使用相同的線寬、角半徑和填充樣式。這將確保你的圖標(biāo)看起來品牌統(tǒng)一和更容易識(shí)別。
例如：線寬 - 2px，角半徑 - 3px;
Icon set from Super Basic Icons.
技巧3：表達(dá)清楚
在圖標(biāo)設(shè)計(jì)中，少即是多。使用清晰的隱喻和點(diǎn)到為止的細(xì)節(jié)，使每個(gè)圖標(biāo)易于識(shí)別和理解。
技巧4 -使用相等的間距
在你的圖標(biāo)元素之間使用相等的間距，使你的一整套圖標(biāo)看起來和諧。
你可以通過按住 Figma、Sketch 或 XD 中的 ALT 鍵來計(jì)算向量線之間的距離。
技巧5 -視覺矯正
基于視覺中心對(duì)齊圖標(biāo)元素，平衡視覺重量。
技巧6 -填充空間
旋轉(zhuǎn)局促的圖標(biāo)，充分利用空間來獲得更好的可讀性。
技巧7 -組合樣式
使用填充和輪廓樣式來描述界面狀態(tài)，幫助用戶找到正確的圖標(biāo)或按鈕。
技巧8-便捷的工具
工具
Icons8.com
iconfinder.com
flaticon.com
thenouproject.com
資源
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
每個(gè)人都是從初學(xué)者開始他的設(shè)計(jì)之旅的，你的審美眼光也要像其他事物一樣經(jīng)過訓(xùn)練?？?Dribbble 的設(shè)計(jì)可能是非常有幫助的，但有時(shí)候你只是欣賞設(shè)計(jì)，卻不明白為什么。
沒有靈感、沒有優(yōu)質(zhì)的設(shè)計(jì)素材、不知道要設(shè)計(jì)什么，所有這些原因都可能會(huì)拖慢你的速度，讓你感到沮喪。所以現(xiàn)在我將和你分享 10 個(gè)極其簡(jiǎn)單的設(shè)計(jì)技巧，幫你改善你的設(shè)計(jì)作品，而且不需要額外學(xué)習(xí)新的技能哦。
請(qǐng)記住，我提供的不是必修遵守的規(guī)則，而是大多數(shù)時(shí)候都有效的技巧。
如果你沒有好的想法或優(yōu)質(zhì)的設(shè)計(jì)素材，那么你可以把你的作品去色。你可以通過正確的構(gòu)圖獲得野獸派的設(shè)計(jì)。這么做有助于你理解平衡、留白，以及如何使用文字和幾何圖形。
讓我們來看一個(gè)案例：
我自己發(fā)明了一套測(cè)試畫面的方法：用簡(jiǎn)單的幾何圖形代表畫面中內(nèi)容，然后通過比較頁面中色塊的面積來確定頁面是否平衡。當(dāng)你在自己的作品中使用這個(gè)方法時(shí)，會(huì)得到下圖這樣的效果。
通常你需要通過視覺進(jìn)行判斷，但這里我們可以做一些簡(jiǎn)單的計(jì)算幫助理解：
左邊區(qū)域的黑色矩形加起來約為：
(236 * 138 ) + (934 * 132 ) + ( 313 * 69 ) + (674 * 44) = 207109 PX
而右邊的大長(zhǎng)方形數(shù)約為：
446×446=198916PX
他們只是相差了一點(diǎn)點(diǎn) 3.9558%。
注意：圓形比長(zhǎng)方形小，但由于相當(dāng)銳利和細(xì)致，使它更吸引人的注意。
我在設(shè)計(jì)之前沒有計(jì)算過。經(jīng)過多年的練習(xí)，這只是成為自動(dòng)的，因?yàn)槟愕难劬?huì)感覺到錯(cuò)誤的平衡。
我之前帶來的例子是在灰色背景上呈現(xiàn)的，但你可以嘗試不同的東西。這有助于為你的設(shè)計(jì)創(chuàng)造一些景深。但要注意，在一個(gè)真正的網(wǎng)站中，你不會(huì)有那么多額外的空間，所以這只是一個(gè)展示技巧!
不要再整天浪費(fèi)時(shí)間去實(shí)驗(yàn)字體大小。一般情況下以下字體大小是合適的：段落使用 14-18 pt 左右，副標(biāo)題使用 24-36 pt，標(biāo)題使用 96-144 pt 左右。Figma 的默認(rèn)大小對(duì)于排版來說是相當(dāng)不錯(cuò)的。雖然它們看起來會(huì)很小，但這是正常的。
有些字體相對(duì)于其他字體會(huì)偏大或者偏小，所以你應(yīng)該以標(biāo)準(zhǔn)字體為基礎(chǔ)。比如 Roboto：如果字體大小接近 14-18 pt 的 Roboto，那就非常適合用于段落。
如果你有一些具有透明區(qū)域的圖片，你可以利用它們來創(chuàng)建一些分層。
在網(wǎng)頁開發(fā)中，CSS 代碼有一個(gè) Z-index 的參數(shù)，可以用來把圖像帶到其他項(xiàng)目的后面或前面，給人一種立體的錯(cuò)覺。
讓我們看看我的一個(gè)簡(jiǎn)單的設(shè)計(jì)，其中就利用了這種技巧。
鮮艷的色彩雖然美好，但往往會(huì)導(dǎo)致畫面過于刺激?，F(xiàn)在非常流行在設(shè)計(jì)中使用更加柔和的色彩，你可以在下圖拾色器中紅色標(biāo)記區(qū)域內(nèi)選取更柔和的顏色。
在我看來，多一些留白要比沒有留白更好。雜亂無章的設(shè)計(jì)就通常都很糟。你可以通過以下方式獲得呼吸感。
1、保持大量的背景可見。
2、用間距避免文字墻效果。
3、使用不會(huì)吸引太多注意力的圖片。
4、精煉你的文字。
通常當(dāng)我們想到設(shè)計(jì)的時(shí)候，我們會(huì)想到干凈、流暢、清晰等概念。但完美就存在于缺陷之中。
在你的設(shè)計(jì)中，當(dāng)你想給自己的網(wǎng)站一個(gè)優(yōu)雅或藝術(shù)的外觀，噪點(diǎn)是一個(gè)強(qiáng)有力的朋友。
此外，應(yīng)用微妙的噪點(diǎn)讓你的構(gòu)圖看起來像電影一樣，這對(duì)視頻和動(dòng)態(tài)網(wǎng)站來說效果非常好。
你可以通過使用 Photoshop，在白色背景上創(chuàng)建一個(gè) 2-4 K 的高斯模糊，然后將其應(yīng)用在你的畫板上，從而獲得一些噪點(diǎn)紋理。
我們電腦上預(yù)裝的字體通常都不是很好的選擇。要想找到更好的字體，可以開始上網(wǎng)沖浪或看 youtube 視頻，了解精彩的字體和字庫。
但要注意：很多字體都不是免費(fèi)的，在沒有授權(quán)的情況下使用它們可能會(huì)給你帶來麻煩。不過不用擔(dān)心，大多數(shù)的字體都有免費(fèi)版本!
雖然有大量不同的字體和風(fēng)格，但一般來說，我把它們分為三大類。
1、古典字體
2、現(xiàn)代字體
3、正文字體
通常情況下，前兩種也可以用在正文中，只是字體的設(shè)計(jì)者希望你把它們當(dāng)作標(biāo)題來使用。
古典字體包括Abril Fatface、Playfair Display、Volux、Chalga和許多其他字體。
現(xiàn)代字體包括Metropolis, ITC Avant Garde, Redwing, Takota, Gotham....
這可能是最難利用的技巧，但如果應(yīng)用得當(dāng)，畫面會(huì)非常有沖擊力。
利用幾何圖形有助于強(qiáng)化布局中的概念和秩序，甚至不需要使用額外的圖像。找到合適的幾何圖形是很難的。目前我還是不能很好地掌握它。
但是有一個(gè)訣竅是，把你的文案中的字母、數(shù)字和標(biāo)題當(dāng)作幾何圖形：把它們做成巨大但微妙的形狀，或者用一些特定的字母作為形狀（字母 A 就很好用）。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn