新擬物化設(shè)計只是一種風(fēng)格嗎？

最近正火的新擬物化風(fēng)格（Neumorphism）在 2019 年底，設(shè)計師 Alexander Plyuto 所提出的「Skeuomorph Mobile Banking」作品中亮相。之后不僅被選為 2020 年界面趨勢，又稱為 soft UI。但這種風(fēng)格在真實(shí)世界落地時，可視性上受到許多爭議。

確實(shí)，新擬物化風(fēng)格它算是一種風(fēng)格，但又不是只有視覺上的風(fēng)格這么簡單，它延伸出來的議題，其實(shí)是扁平化跟擬物化之間的戰(zhàn)爭。

擬物化與扁平化的瑜亮情結(jié)

擬物化是 Apple 在早期設(shè)計中大量使用在界面上呈現(xiàn)對象屬性、材質(zhì)的方式。然而在 2013 年 ios7 發(fā)布時，Apple 開始為了畫面簡潔大量將界面元素扁平化，緊接著 Google 在 2015 年發(fā)布了 Material Design，宣示扁平化在 UI 設(shè)計中扮演著主導(dǎo)趨勢的角色。2020 年真是百家爭鳴的一年，首先是 BMW 發(fā)表的扁平化新 logo，接著是這一波新擬物化的反擊。究竟代表新擬物化可能奪回界面風(fēng)格主導(dǎo)權(quán)？或僅是 2020 年曇花一現(xiàn)的視覺風(fēng)格呢？

扁平化VS 擬物化，我們可以思考的五件事

我認(rèn)為新擬物化的概念其實(shí)是融合扁平化與擬物化的集大成，它建立在扁平化風(fēng)格之上，又將組件帶入了擬物化的元素，提高用戶的判斷力。不過在糾結(jié)于扁平化與擬物化哪個比較好時，有五個議題是可以讓 UI、UX 設(shè)計師去思考的。

1. 多數(shù)年長者對于扁平化界面提供的視覺元素暗示無法理解。

大家身邊一定都有那種已經(jīng)把 Line 操作得滾瓜爛熟，但是每次要用 Line 加好友時，還是不知道怎么操作的長輩。最早期當(dāng)人類還沒進(jìn)入屏幕時代前，我們所使用的界面大多是實(shí)體產(chǎn)品上的控制界面，而這些界面上的每個開關(guān)、按鈕，都只有一個輸入源，對應(yīng)到一個功能（一對一），我們因此就這樣與產(chǎn)品進(jìn)行簡單的交互動作。然而在屏幕上這個簡單的交互模式被改變了，像是用鍵盤跟鼠標(biāo)可以輔助我們，在系統(tǒng)中進(jìn)行抽象與復(fù)雜的無限多任務(wù)（一對多）。

△ 你偏好用哪個微波爐加熱咖啡呢？Image credit:Bence Mózer

讓我們再來看看對長輩最重要的 Line 加好友功能，我們先不論這個功能在整個 APP 中被埋得多深，因?yàn)檎业郊雍糜训娜肟谡娴膶﹂L輩來說是看緣分～

在我引導(dǎo)長輩找出二維碼畫面的經(jīng)驗(yàn)中，發(fā)現(xiàn)他們都是用死記的方式，把下一步要按哪個鍵、在畫面的哪一個角落，記下來。但由于加好友功能并不是每天都會操作的，因此在學(xué)習(xí)上的效果，就像是高中時沒有把課文理解、吸收就硬死背下來一樣困難。

我們來看看「顯示行動條碼」在掃描二維碼畫面中，是否真的具有可以被點(diǎn)選的暗示。在掃描畫面背景單純的時候（如下圖情況 1），「顯示行動條碼」的 button 底色是有透明度的黑、扁平化后沒有陰影提供可以按的暗示，不過因?yàn)橛写髨A角的造型，勉強(qiáng)還是可以誘使人點(diǎn)點(diǎn)看；但一般情況下，掃面畫面背景不會那么理想的無其他干擾（如下圖情況2），button 原本的透明黑完全融入了后面的背景，這時候只剩下「顯示行動條碼」的文字，已經(jīng)不具備可以被點(diǎn)選的提示。

△ 情況 2 中，顯示行動條碼的 button 看起來可以按嗎？

掃描畫面中的外框有一定的透明度，在可操作暗示（affordance）上已經(jīng)不具有實(shí)體的特征，如果又放上有透明度的 button 在上面，讓人充滿不確定性，年長者無法將這樣的情況與現(xiàn)實(shí)生活中的經(jīng)驗(yàn)聯(lián)想在一起。

2.以顏色做區(qū)別真的是最好的方法嗎？

你知道同一個顏色，每個人看起來會不一樣嗎？而不同顏色在不同環(huán)境下，卻又能看起來像同一個顏色嗎？

不同意新擬物化設(shè)計的人中，有人主張運(yùn)用顏色的引導(dǎo)用戶操作界面的色彩元素不能從界面設(shè)計中抽離。但事實(shí)上，不同年齡、性別，視覺錐細(xì)胞中的活躍程度不一樣。同一個顏色，不同人看，明度跟彩度會有差異?；诜N種現(xiàn)實(shí)，由色彩的引導(dǎo)是好還是壞呢？

例子1：關(guān)于人類的視覺錐細(xì)胞

同一個顏色，不同人居然會看成不同顏色？

為什么阿嬤喜歡買大紅大紫的衣服？這個偏好除了受到個人喜好影響外，也關(guān)系到阿嬤視覺錐細(xì)胞的活躍度。老年人在上了年紀(jì)后，部分視覺錐細(xì)胞開始退化，因此對于藍(lán)色、綠色這類冷色系的顏色，老年人會開始接受不到這個區(qū)段的光帶來的刺激。因?yàn)橐曈X錐細(xì)胞對冷色系的刺激降低，導(dǎo)致阿嬤在菜市場逛街時會被偏暖色系的物品吸引。所以會買熱情系服飾不是阿嬤本人的意圖，而是老化的錐細(xì)胞在作祟。

例子2：關(guān)于學(xué)習(xí)觀察顏色這件事

不同顏色居然看成同一個顏色？

不同顏色卻看起來很像，有可能是光線造成，也有可能是使用者必須學(xué)習(xí)去觀察才知道的。日本的 JR 跟 Metro 系統(tǒng)，有著完整且細(xì)膩的視覺辨識系統(tǒng)。設(shè)計師理想中的情況是，我們將每條路線定義成不同顏色，可以讓使用者更容易學(xué)習(xí)辨識路線。

但實(shí)地走訪過東京的地下鐵跟 JR，常常會發(fā)現(xiàn)跟錯指示，才發(fā)現(xiàn)是潛意識辨認(rèn)錯文字或是顏色。我自己遇到過的經(jīng)驗(yàn)是，在新宿站想要找都營大江戶線時，因?yàn)樵诟脑诳吹搅送瑯臃奂t色的標(biāo)志，原本已經(jīng)要嗶卡進(jìn)去，才發(fā)現(xiàn)那是京王新線的 IC 入口標(biāo)志。

△ 新宿駛的改札口前，有兩個同為粉紅色的引導(dǎo)指標(biāo)

所以說，高齡者或是天生視覺錐細(xì)胞有缺陷的人對于顏色無法清楚辨認(rèn)外；大部分人可以借由學(xué)習(xí)來增強(qiáng)色彩辨識，除了可以對相似顏色進(jìn)行更細(xì)節(jié)的判別外，也可以學(xué)著辨認(rèn)不同光線（暖光、冷光）下造成的色彩差異。

但是，當(dāng)我們在設(shè)計中，迫使用戶學(xué)習(xí)、習(xí)慣我們制定顏色的意義。可能會在新手 onboarding 時造成適應(yīng)上的負(fù)擔(dān)，也有可能讓他們在使用別的系統(tǒng)造成錯亂。

3. 對于顏色被定義的意義各個文化、區(qū)域、種族都相同嗎？

在不同文化之下，對于色彩的觀察與運(yùn)用也不一樣，舉個大家可能都有發(fā)現(xiàn)的例子，當(dāng)你在不同城市旅游的時候，有沒有發(fā)現(xiàn)不同城市的優(yōu)先座顏色不一樣？你能猜得出來，哪一個是臺北捷運(yùn)上優(yōu)先座的顏色嗎？

△ Image credit:wikipedia.org

當(dāng)顏色在不同約定成俗下，有不一樣的意義，又剛好缺乏文字或圖像引導(dǎo)的時候，可能會讓使用者解讀成不同的意義。例如：紅色具有熱情、喜氣、帶來財運(yùn)的意涵，但同時又具有危險的警示意義。

當(dāng)設(shè)計師覺得紅色可以引起使用者的注意，而把 button 設(shè)計為紅色時，卻可能讓沒看清楚文字的用戶，認(rèn)為按下這個 button 是危險的舉動。

△ Image credit:photoAC

4. 光與影（明亮面跟陰暗面）給使用者的可操作暗示（affordance）一樣嗎？

新擬物化設(shè)計中假設(shè)了人在使用界面時，會運(yùn)用與生俱來能判斷光影效果的能力。這是真的嗎？讓我們來做個小實(shí)驗(yàn)：

為什么在臺北車大廳席地而坐的人，會選擇坐在黑色的棋盤格上呢？如果根據(jù)人類從大自然中所得到的可操作暗示來說，有陰影的地方可以提供人類休憩的功能，例如樹陰下的陰影處。

△ Image credit:中央社、wikipedia.org

如果這樣說得通的話，代表光亮的區(qū)域?qū)θ藖碚f是可以行走、活動的地方；而陰影處則是休息與暫停處。

根據(jù)以上的推測，我們做個小實(shí)驗(yàn)，把車站中的 2 個不同區(qū)域的地面上分別涂上白色與黑色，來讓受測者選出哪些區(qū)域可以暫停，哪些區(qū)域可以走動：

問題Ａ：假設(shè)你要在車站的大廳等朋友，你會選擇站在哪里等他呢？

假設(shè)：受測者會選 2，因黑色區(qū)域（影子）讓人覺得可以暫停、休憩。

結(jié)果：符合假設(shè)

1：白色柱子前的白地面 32.5％； 2：白色柱子前的黑地面 67.5％

問題Ｂ：哪一邊的樓梯是往上的方向呢？

假設(shè)：大家會選 1，因?yàn)楹谏珔^(qū)域（影子）讓人覺得可以踩上去。

結(jié)果：符合假設(shè)

1：白色立面＋黑色地面 61.3％；2：黑色立面＋白色地面 37.8％

由實(shí)驗(yàn)Ａ、Ｂ可得證，雖然實(shí)驗(yàn)結(jié)果符合先前假設(shè)，大多數(shù)的受測者可從陰影判斷要走哪條路，但還是有不少（30%以上）的受測者不認(rèn)同。所以在用使用光亮陰影的設(shè)計暗示時，還是會遇到使用者感知的不同的問題。

5. 深度認(rèn)知不同是導(dǎo)致判斷物體距離的能力受影響，也就是所謂的視差。

新擬物化設(shè)計中，將界面組件以類 3D 的方式呈現(xiàn)，使用戶在操作界面時必須去感知界面組件的遠(yuǎn)近以判斷重要性，而在深度認(rèn)知上有障礙的用戶此時就會受到挑戰(zhàn)。用戶可能會遇到，不知道哪個組件才是浮在最上面、最重要的；若界面中的組件有三種以上的陰影深淺，會讓用戶在判斷時要更花腦力判定物件在立體空間中的深淺。

總結(jié)

新擬物化風(fēng)格中的光影表現(xiàn)提供了使用者人類最原始的操作意圖：可操作暗示，是一個好的出發(fā)點(diǎn)，然而必須針對 APP 性質(zhì)的不同而有所改良。在設(shè)計較走生活風(fēng)格理念，而操作界面不復(fù)雜的 APP 時，非常適合用新擬物化風(fēng)格來詮釋：例如電子書服務(wù)、音樂軟件；但在設(shè)計功能導(dǎo)向，且有大量信息化圖表的界面，例如：移動網(wǎng)銀，還是需要以扁平化的界面為主要信息架構(gòu)，新擬物風(fēng)格可能會是極少量界面元素中，拿來呈現(xiàn)生活中真實(shí)物的質(zhì)感（例如：用戶的信用卡）、或是作為亮點(diǎn)（例如：優(yōu)惠卡片）的呈現(xiàn)方式，此類型 APP 中最重要的卡片與圖表對于此種風(fēng)格，一定要謹(jǐn)慎使用，必定三思三思再三思。

文章來源：優(yōu)設(shè)    作者：Muse Chang

今天和大家聊一個很多朋友常年卡在 P5/P6 需要關(guān)心的命題——如何從業(yè)務(wù)出發(fā)打造具有商業(yè)價值還能兼顧用戶體驗(yàn)的設(shè)計，此篇不談理論，就通過 4 個經(jīng)典的重量級產(chǎn)品案例就給大家安排明白啥是「一拳超人」式體驗(yàn)設(shè)計——就一個字「強(qiáng)」。

滴滴出行-xpanel

滴滴出行應(yīng)該屬于大家的高頻使用 app，但是使用的功能一般還是集中在叫車流程，所以大家可能不太會關(guān)注到 CDX 設(shè)計團(tuán)隊(duì)一個非常核心的設(shè)計成果——xpanel。

簡單來說 xpanel 就是一個附著于第一信息架構(gòu)層級上，垂直 Y 軸且支持 X 軸拓展滑動的 Feed 卡片位。內(nèi)容上分為「消息卡片」「主體卡片」「拓展卡片」三個維度，首屏保障除了「消息」與「主體」外三分之一「拓展卡片1」的露出。

但在簡單的交互背后蘊(yùn)藏的是基于業(yè)務(wù)的 UGD（用戶增長設(shè)計）設(shè)計思考，這里引用 2018IXDC 會上滴滴主講人的原話來說就是：

對特定場景垂直領(lǐng)域的深耕和挖掘，尋找「接觸點(diǎn)」，幫助獲取更多的功能、內(nèi)容、服務(wù)、特性、品牌、運(yùn)營甚至是喜好……進(jìn)而實(shí)現(xiàn)業(yè)務(wù)的「有效增長」（轉(zhuǎn)化、變現(xiàn)、留存）。

通俗一點(diǎn)解釋就是 xpanel 利用主卡與拓展卡之間的信息架構(gòu)關(guān)系，把拓展卡平衡的分為幾類，比如「與產(chǎn)品功能相關(guān)的卡片」「與運(yùn)營相關(guān)的卡片」等。

把本來被 LBS 地圖一屏內(nèi)搶占的空間通過簡易的交互模式補(bǔ)償回來了，這樣既不打破用戶的核心體驗(yàn) focus 在地圖與主卡上，同時又增強(qiáng)了運(yùn)營、功能的玩法與拓展，可謂雙贏。

根據(jù)這幾年滴滴 xpanel 的線上應(yīng)用，拓展卡片基本挖掘涵蓋了以下場景的露出：優(yōu)惠福利、出現(xiàn)卡券、會員體系、安全相關(guān)、出行提醒、拉新導(dǎo)流、運(yùn)營活動等，未來可拓展的價值內(nèi)容會更多?？粗髀烦鲂蓄?app 又紛紛長期沿用 xpanel 的設(shè)計，想必線上的數(shù)據(jù)反饋應(yīng)該也是很正向的。

抖音-TopView

在上篇文章《多維度解析 | 抖音vs快手的產(chǎn)品設(shè)計策略差異》中的商業(yè)化模塊里簡要提及過抖音的 Topiew 超級廣告位，這里單獨(dú)拿出來和大家解析一下它究竟有多6。

從功能角度看，它是一個從開屏延續(xù)到端內(nèi)視頻信息流的廣告位，占據(jù)了用戶從進(jìn)入抖音的第一視覺。

從交互角度看，topview 主要展現(xiàn)以開屏沉浸式視頻 3s 播放→淡出互動轉(zhuǎn)化組件 3s（完美融入原生視頻信息流），剩余操作手勢與功能等同原生視頻信息流。

在這樣一個有著 1 億+第一曝光的產(chǎn)品位置，單純只做常規(guī)靜態(tài)開屏穩(wěn)當(dāng)入賬不香嗎？事實(shí)是抖音確實(shí)讓它不香了，沒有創(chuàng)新就沒有新的收獲。基于業(yè)務(wù)和當(dāng)前產(chǎn)品形態(tài)下的交互模式使抖音有一個天時地利的優(yōu)勢——沉浸式體驗(yàn)，在這樣的交互模式下給視頻化的開屏提供了很好的承接入口。從開屏開啟到融入信息流，在交互形態(tài)的切換中又為廣告內(nèi)容的播放時長贏得了更多時間。

更可怕的一點(diǎn)是 3s 播放后融入原生視頻信息流中的 TopView 除了正常收割廣告轉(zhuǎn)化帶來的單量，還可以通過右側(cè)的主頁鏈接輕松引流進(jìn)行粉絲沉淀（今天就算你不買，先關(guān)注我，成為我的潛在用戶，來日我再推一個新商品視頻，你可以第一時間看見也許感興趣就買單了）。

說完這些大家仔細(xì)回憶一下平常我們接觸的有視頻廣告的視頻平臺，別說 60s、30s，15s 我們都嫌長，但為啥 TopView 顯得相對沒那么惹人煩呢（上次留的思考題）？個人認(rèn)為除了抖音在選擇合作品牌時會傾向符合平臺氣質(zhì)的品牌合作（細(xì)數(shù)它合作過的品牌：Mac、寶馬、林肯、vivo 等）保障廣告質(zhì)量和提供「跳過」外，直接融入信息淡出的互動組件會不僅會給用戶新奇感，還會激發(fā)用戶的互動欲望。

最后看一組數(shù)據(jù)（與寶馬合作數(shù)據(jù)），曝光數(shù)：1.1 億+；有效播放率：53.82%；點(diǎn)擊率：13.26%。所以你猜一個最長可以展示 60s 的品牌視頻內(nèi)容、同時進(jìn)行品牌粉絲沉淀、良好體驗(yàn)帶來更高有效播放的億級曝光廣告位能值多少錢？

淘寶-二樓

2016 年淘寶啟動了一個項(xiàng)目要做一款內(nèi)容化欄目——以視頻為主，每晚更新一期，類比「一千零一夜」的故事。

那么在滿滿當(dāng)當(dāng)?shù)奶詫氝\(yùn)營區(qū)里該選擇哪一個來試玩這個有趣的「新欄目」呢？是在頭部的 10 宮格里再擠進(jìn)去一個圖標(biāo)呢？還是在熱門推薦里擠出一個 tab 呢？還是做一個懸浮的右下角的運(yùn)營位？顯然都不太合適。

根據(jù)這款產(chǎn)品每晚 6 點(diǎn)鐘才可以使用，早上 7 點(diǎn)就會消失的游戲規(guī)則，最適配它的入口是一個不占界面原生空間，同時又有一定儀式感的位置。于是下拉 loading 的大空區(qū)成為了設(shè)計師們考慮的陣地。

△ 不知道這個banner為什么要排擠我

但地方選好了，又有了新顧慮。因?yàn)?iOS 的用戶基本被系統(tǒng)洗腦了下拉手勢，對于他們來說下拉=刷新，貿(mào)然在下拉刷新的手勢基礎(chǔ)上再疊加一個無關(guān)聯(lián)的結(jié)果顯然是有風(fēng)險的。因此從交互上需要界定 2 個維度的指標(biāo)來保障新欄目的體驗(yàn)。

• 下拉速度（速度臨界值：速度多快？→刷新，多慢？→新欄目）——以速度為優(yōu)先衡量指標(biāo)（只要速度快，拉的距離再大也是→刷新）
• 下拉距離（距離臨界值：拉到多少距離進(jìn)入新欄目？）——兼顧單手用戶操作難度

反復(fù)試錯 2 個指標(biāo)數(shù)據(jù)的實(shí)際體驗(yàn)之后，新欄目有了安身之所，賜名「二樓」。進(jìn)入「二樓」的整體交互和現(xiàn)在的短視頻產(chǎn)品玩法基本雷同，全屏豎滑切換，小圖標(biāo)帶貨。下拉加載位的開發(fā)，從普通 loading 動效到運(yùn)營位的植入基本被各類電商平臺輕松復(fù)刻了，因此這一切看上去更沒什么了得，但對于原創(chuàng)來說那畢竟是 4 年前。

豆瓣-疊加上滑板

談到豆瓣我算是半個老用戶了，豆瓣自身是個比較復(fù)雜的集合多條業(yè)務(wù)線分支（「小組」「同城」「閱讀」「音影」……）的多生態(tài)產(chǎn)品，這里我們主要拿它 18 年 6.0 大改版中影音模塊的詳情頁大改造來說事兒。

△ 可能有很多人已經(jīng)忘記6.0前的豆瓣電影詳情頁長啥樣了，帶你回顧一下。

看完對比圖，視力正常的朋友乍一看都能看出 6.0 版詳情頁整容得有多成功。但具體成功在哪里，可能不僅僅是好看這么簡單。

大背景從海報上智能取色雖然不算是什么稀奇的做法，但是加了適度的漸變應(yīng)用在這里也可以說是非常的恰到好處了。另外深底色和視覺比重加大的外鏈區(qū)都突顯了「第三方播放」與「購票選座」的視覺感知。讓用戶沉浸在電影詳情中并引導(dǎo)他們走向「豆瓣的主要收入來源之一——電影票分銷與第三方視頻播放產(chǎn)品引流」正好是 6.0 豆瓣改版一個「小小的目標(biāo)」——更務(wù)實(shí)（商業(yè)化）。

從交互層面看，且不說評論頭部吸底這個事情是不是也是因?yàn)?6.0 商業(yè)化的影響（評論區(qū)增加「話題」進(jìn)行重點(diǎn)運(yùn)營），這個交互本身我覺得還是很強(qiáng)大的。強(qiáng)大的體現(xiàn)在于良好的空間收納能力與信息拓展能力。我給它起了個好聽的名字叫-疊加上滑板（不好聽也認(rèn)了吧，畢竟也沒有內(nèi)部人員告訴我他們是不是起名字了）

這里可能又會有很多人質(zhì)疑它與用戶已洗腦的上滑手勢之間的沖突，這點(diǎn)解釋起來和上文淘寶「二樓」有些類似，區(qū)別是豆瓣并沒有做上滑速度 or 距離的臨界值，只是把滑動區(qū)域做了隔離。而對比它的效仿者 boss 直聘，人家倒是在交互上做了進(jìn)一步優(yōu)化，適配自己的產(chǎn)品情況做了上滑疊層卡隱藏和上滑距離臨界值。

這個故事告訴我們，要抄也要抄得比人家的交互更優(yōu)秀才不丟人昂。

文章來源：優(yōu)設(shè)    作者：Nana的設(shè)計錦囊

最近身邊的一些小伙伴，總會遇見B端設(shè)計工作，對于這種偏后臺設(shè)計的B端設(shè)計，總會有大量的表單設(shè)計需要做，結(jié)合以前自己也有過不少表單設(shè)計的工作，在這里給大家分享一下自己對于PC端表單設(shè)計的研究，聊一聊表單在PC端中的運(yùn)用。

表單的作用

商業(yè)離不開數(shù)據(jù)，而數(shù)據(jù)總會依賴不同的表現(xiàn)形式，不管是word文檔，還是數(shù)據(jù)可視化，都是瀏覽者通過表現(xiàn)形式來對數(shù)據(jù)進(jìn)行閱讀和分析，因此表單的設(shè)計就是一種表現(xiàn)形式，我們將捋一捋如何通過表單更好的讓用戶閱讀順暢、操作方便、總而言之就是更好用啦。

表單信息的分割方式

無線分割：顧名思義，列表的信息之間正常情況下沒有分割線等方法來分隔，僅僅是用間距來分隔開內(nèi)容。好處是元素更少，畫面更簡潔，但是視覺可能就沒那么清晰了，使用的出場率一般。

有線分割：同樣字面意思，就是通過簡單的分割線來分割列表中的信息，讓視線左右移動的時候更加穩(wěn)定、輕松，在表單設(shè)計中使用的出場率非常高。

斑馬線：通過深淺交替的色塊，以及色塊產(chǎn)生的對比來分隔列表中的信息，深淺深淺的循環(huán)就好像斑馬線，使用時是通過色塊產(chǎn)生對比，所以也可以使用帶有適量飽和度的色塊來區(qū)分，占頁面面積比例較大，適當(dāng)用色可以使得畫面更加活潑、豐滿，斑馬線也是出場率極高的一種展現(xiàn)形式。

斑馬線+分割線：很容易理解，就是斑馬線風(fēng)格+分割線的結(jié)合，用色塊區(qū)分的同時又加了分割線，信息之間的區(qū)分對比更加強(qiáng)烈，但是畫面層級就多了一些，沒有其他的看起來簡潔，使用出場率也一般。

卡片式：跟卡片式風(fēng)格其他設(shè)計一樣，分別用懸浮的色塊來區(qū)分，間隔的地方是背景色，分隔的力度比較強(qiáng)，內(nèi)容區(qū)分的很清晰，弊端是更加占畫面的位置，尤其在信息很多列的時候，會增加大量的高度，用戶需要更多時間進(jìn)行下翻的操作。使用出場率相對其他形式來說稍低。

可控制頁面顯示數(shù)量

場景：用戶需要閱讀大量的表單數(shù)據(jù)，且需要頻繁的翻頁、跳轉(zhuǎn)。

如圖，左下角可以設(shè)置界面中每頁顯示信息數(shù)量的多少，用戶可以根據(jù)自己的需要自由設(shè)置，當(dāng)瀏覽的數(shù)據(jù)較多的時候，不再需要頻繁點(diǎn)擊下一頁來瀏覽信息，只需把每頁顯示的數(shù)量調(diào)高，如此便減少了大量的操作次數(shù)。

像這樣允許用戶可以自由編輯來改進(jìn)體驗(yàn)的方式還有很多，比如可以設(shè)置顯示密度，就是以一樣的方式自由調(diào)整信息與分割線的間距。除了行間距，有的可以自由設(shè)置每一列的列間距，用戶可以根據(jù)自己的習(xí)慣來設(shè)置。

列表+可視化

場景：用戶需要瀏覽大量的數(shù)據(jù)，并需要對數(shù)據(jù)反復(fù)進(jìn)行計算、分析。

在使用大量的文字列表展示數(shù)據(jù)的同時，使用數(shù)據(jù)可視化加以配合，用戶可以更好的預(yù)覽到數(shù)據(jù)的大致情況，又可以在列表表單中閱讀到詳細(xì)的數(shù)據(jù)。

根據(jù)條件排序

場景：用戶想根據(jù)某種條件的大小排序，來先后閱讀數(shù)據(jù)。

通過點(diǎn)擊第一排小標(biāo)題行，可以選擇不同的方式調(diào)整信息的排序方式，就和電商商品排序一樣，可以選擇金額高到低或者低到高排序，也可以選擇別的方式進(jìn)行排序，從而更快找到自己所需要的內(nèi)容。

篩選過濾

場景：從一大堆混雜的數(shù)據(jù)當(dāng)中，尋找符合條件的自己所需要的數(shù)據(jù)。

添加篩選功能，過濾掉自己不想瀏覽的內(nèi)容，通過條件篩選，更快的更的找到自己想要的內(nèi)容、縮小查找范圍、減少達(dá)到目的所花的時間。一般通過下拉按鈕的形式選擇不同的條件來進(jìn)行篩選過濾。

關(guān)鍵字搜索

場景：已知列表中某信息的名稱關(guān)鍵字，想從大量混雜的列表中快速找到。

跟篩選過濾一樣，添加關(guān)鍵字搜索功能，用戶提供部分關(guān)鍵字，可通過關(guān)鍵字查詢，最快最的找到想要的那一條內(nèi)容。一般該目標(biāo)內(nèi)容是用戶已知的，有時候是針對性的。

懸停展現(xiàn)操作

場景：精簡設(shè)計風(fēng)格的界面，不想界面中內(nèi)容過于繁多。

如圖，鼠標(biāo)懸停在哪一行，哪一行才會顯示該列表后面的操作按鈕，好處是減少了視覺干擾，能更快的找到捕捉到操作位置，弊端是用戶不進(jìn)行交互的時候無法發(fā)現(xiàn)操作按鈕如何出現(xiàn)。

可展開列表

場景：想快速獲取列表中某信息的其他附屬內(nèi)容。

如圖，點(diǎn)擊某一行后，展現(xiàn)該行的一些附屬信息。可以不用跳轉(zhuǎn)頁面而進(jìn)一步了解該行信息的詳情。

可編輯列表

場景：在瀏覽列表的同時，需要頻繁的對列表中的信息進(jìn)行編輯。

用戶可以直接對列表信息進(jìn)行修改、編輯，省去了跳轉(zhuǎn)再編輯的麻煩步驟，更節(jié)約時間，用戶操作起來更加方便。

快速預(yù)覽

場景：需要充分了解列表中不同信息的詳細(xì)說明，頻繁跳轉(zhuǎn)又過于麻煩。

和可展開列表的作用類似，但是可展開列表顯示的內(nèi)容有限，快速預(yù)覽的功能可以用側(cè)彈框的方式、彈出對話窗口的方式、以及其他方式對選中的內(nèi)容直接展示詳細(xì)信息。用戶不需要跳轉(zhuǎn)至詳情頁就可以了解到大量信息，省去繁瑣的交互流程。不再需要頻繁的跳轉(zhuǎn)到詳情-返回-跳轉(zhuǎn)到另一個詳情-返回-跳轉(zhuǎn)-返回。使用快速預(yù)覽的功能就可以很好的解決這一問題。

（PS：彈出對話窗口的方式，可以同時彈出好幾項(xiàng)列表的詳情信息進(jìn)行對比，但是側(cè)彈框因?yàn)楦叨葍?yōu)勢，可以展現(xiàn)更多內(nèi)容）

自定義列

場景：列表中每條內(nèi)容顯示信息參數(shù)過多，且很多不想瀏覽。

自定義列表功能是用戶可以自由設(shè)置每行信息參數(shù)的內(nèi)容，比如我不想列表中顯示金額這一項(xiàng)，就可以刪除，想要的時候可以添加回來，這樣用戶可以保留自己想要的那幾項(xiàng)內(nèi)容，可以更快更方便的閱讀到自己關(guān)心的那幾項(xiàng)參數(shù)，節(jié)省了用戶的有效時間。

固定頭部

場景：列表橫向或者縱向過多，下翻或橫拉的時候標(biāo)題頭被隱藏，不知道自己當(dāng)前瀏覽到的參數(shù)屬于哪一項(xiàng)。

交互過程中，可以把第一排重要的東西固定，列表內(nèi)容翻動的同時，第一排仍然在原位不移動而且覆蓋列表中的其他信息，很多自帶的框架都是這樣的形式，使用的出場率也是非常高，這樣用戶可以隨時查看到自己看到的內(nèi)容是屬于哪一項(xiàng)屬性，或者是屬于哪一條信息，可以是橫向固定，也可以固定豎直的第一排標(biāo)題，也可以固定最后一塊操作點(diǎn)擊區(qū)域，具體如何固定、是否固定，根據(jù)整體的需求來選擇。

間距的規(guī)則

通常表單都是大量的文字，大多數(shù)的文字高度都在該行高度的三分之一左右。過于緊密用戶瀏覽不順暢，過于分開顯得畫面過于松散，不同的分割方式，間距也會有所不同。

總結(jié)

其實(shí)上面的每一條都是一個小總結(jié)，每一條在大部分的列表中都可以用到，主要還是根據(jù)實(shí)際需求來運(yùn)用這幾點(diǎn)，比如分割的方式根據(jù)主體風(fēng)格來搭配，不要為了設(shè)計而設(shè)計盲目運(yùn)用，畢竟設(shè)計都是以內(nèi)容為主，尤其是表單設(shè)計，本身就是更好的表達(dá)內(nèi)容。

本文發(fā)布于人人都是產(chǎn)品經(jīng)理。

有句話叫：「設(shè)計無小事」，很多看似不起眼的東西卻起著至關(guān)重要的作用，比如這期要說的線條，很多人對于線條的理解有局限性，比如：線條的形態(tài)可以是曲線、直線、折線、粗線、細(xì)線、實(shí)線、虛線等等。其實(shí)已經(jīng)牽扯到了點(diǎn)、線、面的知識，這也是很多科班生在學(xué)校必學(xué)的知識點(diǎn)，但是這期所說的線與點(diǎn)線面中的線還是有所不同的，點(diǎn)線面中的線可以是線條、可以是文字或者是看不到的視線，而是今天著重說的是設(shè)計中很直觀的線條。下面我們還是通過實(shí)際的案例逐一分析：

線條可以引導(dǎo)視覺

設(shè)計類的知識很多都和日常生活息息相關(guān)，嘗試著把設(shè)計類的知識點(diǎn)與日常生活想結(jié)合，對于記憶和理解來說會更加得心應(yīng)手，例如：

圖中的閃電可以視作為設(shè)計中的線條，給人的視覺感受是通過閃電把天與地連接為一個整體，而閃電在圖中的作用就是串聯(lián)整體，那么回到這里的正題：線條有引導(dǎo)視覺的作用該怎么理解呢？再舉一個現(xiàn)實(shí)生活中的案例：

我們選擇從北京到拉薩開車去，出發(fā)之前可能需要在地圖上看下路線，知道途徑哪些省市，規(guī)劃好行程路線，這里綠色的虛線就起到了引導(dǎo)視覺的作用?；貧w設(shè)計中道理是一樣的，線條可以引導(dǎo)用戶把原本雜亂無章的視覺點(diǎn)規(guī)整為有次序的視覺元素，例如：

當(dāng)看到左側(cè)這張海報時我們視覺次序會出現(xiàn)很多變化，比如：1>A>3>B>4>C>2 或者 A>2>C>4>B>3>1 等等 N 多種順序，這時給人的感覺就是雜亂無章的，毫無視覺次序而言；而看右側(cè)的海報給人的感覺卻是條例清晰的，相比而言只是多了兩條線，但是卻在整個海報中起到了引導(dǎo)視覺的作用，它可以給與用戶閱讀海報時視覺輔助的作用，讓用戶以右>左>右的視覺次序欣賞、閱讀，看似很不起眼，其作用卻至關(guān)重要。

前面也說了，線的形態(tài)可以有很多種，例如：

這里是以真實(shí)的可口可樂吸管作為設(shè)計中的線條，同樣起到了視覺引導(dǎo)的作用，但是我們不難發(fā)現(xiàn)，這里的線條不僅僅只有一個作用，也牽扯到另一個作用：線條有串聯(lián)整體的作用。

線條能夠串聯(lián)整體

在排版時我們有分組原則，即把互想關(guān)聯(lián)的元素彼此靠近，無關(guān)聯(lián)的相互疏遠(yuǎn)。在頁面中我們會把同一色塊上的元素視作為一個整體；下面我們說下線條所帶來的串聯(lián)整體的作用是如何體現(xiàn)的，比如：

△ 圖一

△ 圖二

圖一因?yàn)榇竺娣e的留白能使得用戶很容易分辨出自行車與文案是一個整體，但是相較于圖二而言，其整體性略顯不足，而且給人的感覺太過單薄、重心不穩(wěn)；圖二的整體性更強(qiáng)，這里的矩形線條就起到了串聯(lián)主題的作用，類似的還有：

不難看出，這些案例中的線條都有串聯(lián)主題的作用，線條使得主題元素整體感更強(qiáng)、畫面板式更加嚴(yán)謹(jǐn)；對于整體的視覺傳達(dá)也起到了串聯(lián)、引導(dǎo)的作用；在文字排版中，也有類似的線條，比如：

同樣是通過線條把文案更加整體化，也起到了串聯(lián)的作用。

線條可以突出主題

突出主題的方式有很多種，像我們之前所說到的留白、對比。接下來繼續(xù)說下另一個可以突出主題的方式—線條，下面看個案例：

通過對比觀察我們發(fā)現(xiàn)，右側(cè)海報整體感更強(qiáng)，主題文案信息更加清晰，主體更明確。其中的原理可以理解為：因?yàn)榫€條的存在，使得主題信息有了一定的范圍，在視覺上等于是在海報中劃定了視覺焦點(diǎn)，從而起到了突出主題的作用。當(dāng)然還有其他的表現(xiàn)形式，比如：

很好的詮釋了線條的作用——突出標(biāo)題序號。在進(jìn)行創(chuàng)作時，作品的每個元素都要做到有理有據(jù)，否則只是一味的抄襲，到再創(chuàng)作時腦袋里還是一片空白，只有明白了其中的設(shè)計原理，才能做到活學(xué)活用。再看幾個案例：

突出主題也許一個線條就可以表現(xiàn)的淋漓盡致，因設(shè)計目的的不同，線條所發(fā)揮的作用也不盡相同。下面繼續(xù)分析：

線條可以分割整體

前面說了線條有串聯(lián)整體的作用，而這里又說可以分割整體，是否存在矛盾呢？下面舉個簡單的例子：

在小文案的區(qū)域中間我加了兩個線條，看似很小的改變，其目的是把文案很準(zhǔn)確、嚴(yán)謹(jǐn)?shù)胤指顬槿齻€小整體，希望能給用戶帶來識別性更強(qiáng)的閱讀性，再舉個例子：

這里的線條把月份和日期分割、英文和中文分割開，使得用戶對于信息的捕捉能力以及可辨識性都提升了很多，而線條的作用就起到了分割的作用。

線條有修飾的作用

線條也能起到修飾、襯托的作用，很多小伙伴會忽視這一點(diǎn)，其實(shí)線條也可以成為海報中襯托畫面、修飾主題的元素，例如：

海報中的線條起到了襯托、修飾主題的作用，假如把這些線條都刪除，畫面整體會顯得相對單薄。

更多設(shè)計中線條的應(yīng)用：

總結(jié)

線條的作用我們分為四個逐一分析，其實(shí)它們之間也存在著相輔相成的作用，不能以一概全，線條所起到的作用可以是一種，也可以是多種，比如：我們前面「可口可樂」的案例，即有串聯(lián)整體的作用，又有引導(dǎo)視覺的作用。只要我們在使用的時候能明確目的，而不是機(jī)械式的抄襲，那么最終一定會得心應(yīng)手。

文章來源：優(yōu)設(shè)    作者：美工美邦

文章來源：站酷    作者：設(shè)獵派

這篇文章來自于 Invision 出品的書籍，圍繞規(guī)劃、設(shè)計、構(gòu)建和實(shí)現(xiàn)設(shè)計系統(tǒng)的實(shí)踐經(jīng)歷來指導(dǎo)讀者，其中包含了經(jīng)驗(yàn)豐富專家的真知灼見和一手經(jīng)驗(yàn)。我很喜歡，也分享給大家，推薦閱讀。這是一個系列，一共有 7 章，感興趣的話，持續(xù)關(guān)注吧。

20 世紀(jì) 60 年代，計算機(jī)硬件技術(shù)的升級開始超越軟件發(fā)展的速度。計算機(jī)的處理速度變得越來越快，價格也越來越便宜，但計算機(jī)軟件開發(fā)仍然處于緩慢、難以維護(hù)的境地，并且還很容易出錯。兩者之間的差距以及解決這個問題的困境被稱之為「軟件危機(jī)」。

在 1968 年的北約軟件工程會議上，道格拉斯·麥克羅伊（Douglas McIlroy）提出了基于組件開發(fā)有可能是解決「軟件危機(jī)」的方法之一。基于組件開發(fā)是一種通過復(fù)用代碼來提高編程潛力的方法，該方法能幫助編程工作更、更易于擴(kuò)展。這樣做既能減少編程工作量又能提升軟件開發(fā)的速度，讓軟件更好地運(yùn)用現(xiàn)代計算機(jī)的力量。

在 50 年后的今天，我們又面臨著類似的挑戰(zhàn)，只不過這一次是在設(shè)計領(lǐng)域。在 UI 設(shè)計中，設(shè)計的角色是在為特定需求量身定做解決方案，所以很難去基于整個應(yīng)用進(jìn)行擴(kuò)展。

你有沒有走查過你輸出的界面，發(fā)現(xiàn)自己使用了幾十種類似的藍(lán)色，或者同一個按鈕不同的用法，將這些樣式組合對應(yīng)到你設(shè)計的每一個 UI 界面，就會意識到一套不成體系的設(shè)計是多么的難以維護(hù)。

△ 一份 UI 樣式走查收集的成果，里面羅列的十幾種類似的按鈕樣式說明之前團(tuán)隊(duì)挖的坑有多深。

在這種狀態(tài)下，設(shè)計要跟上開發(fā)的速度，公司可以選擇做以下三件事：

• 雇更多的人
• 提高設(shè)計速度
• 找到一個適用于多個問題的解決方案

通過復(fù)用設(shè)計，設(shè)計系統(tǒng)能夠幫助團(tuán)隊(duì)更好、更快地構(gòu)建產(chǎn)品——復(fù)用性使規(guī)范成為可能。這是設(shè)計系統(tǒng)的核心和價值。一個設(shè)計系統(tǒng)是一個可復(fù)用組件的合集，由清晰的規(guī)范作為指導(dǎo)，組合在一起構(gòu)建成各種的應(yīng)用程序。

50 多年來，工程師們一直在遵循著這個理念執(zhí)行工作。現(xiàn)在是時候讓設(shè)計充分發(fā)揮其潛力加入他們了。

用系統(tǒng)思維擴(kuò)展設(shè)計

你可能已經(jīng)清楚地意識到，設(shè)計系統(tǒng)已經(jīng)成為當(dāng)今軟件行業(yè)的一個熱門話題，并且理由也很充分。很多企業(yè)投資設(shè)計系統(tǒng)，因?yàn)樗麄冋J(rèn)識到產(chǎn)品體驗(yàn)?zāi)軌驇砀偁巸?yōu)勢，不僅能吸引和留住客戶，更降低產(chǎn)品學(xué)習(xí)成本。

在重視設(shè)計系統(tǒng)的公司內(nèi)部，通常能看見這種情況：

• 設(shè)計團(tuán)隊(duì)不斷壯大。
• 設(shè)計師分布在整個公司的團(tuán)隊(duì)中，可能在多個部門。
• 設(shè)計在整個公司平臺上的各個產(chǎn)品中都起著關(guān)鍵作用。

如果你是設(shè)計師，那么前面所說對設(shè)計的投資聽起來可能會令你很興奮，但其實(shí)也帶來很多挑戰(zhàn)。當(dāng)一個應(yīng)用由不同的團(tuán)隊(duì)負(fù)責(zé)迭代各自模塊的時候，你將如何跨平臺設(shè)計一致的 UI？又如何使所有團(tuán)隊(duì)能夠進(jìn)行快速迭代？當(dāng)團(tuán)隊(duì)的設(shè)計師設(shè)計出新的獨(dú)立樣式時，你又將如何處理這種不可避免的設(shè)計需求？

要了解如何應(yīng)對上述的挑戰(zhàn)，我們要先了解什么是設(shè)計系統(tǒng)。設(shè)計系統(tǒng)將個體和整體兩個概念各自的優(yōu)點(diǎn)結(jié)合在一起。

1. 標(biāo)準(zhǔn)

擁有 MAC 用戶界面的技術(shù)知識是產(chǎn)品設(shè)計的關(guān)鍵因素，但了解用戶界面背后的理論，才能夠幫助你創(chuàng)造出色的產(chǎn)品?！O果人機(jī)交互指南

為了設(shè)計卓越的用戶體驗(yàn)，不僅要了解設(shè)計系統(tǒng)背后的內(nèi)容，還要了解其設(shè)計的原因。我們一般會通過建立和遵守標(biāo)準(zhǔn)來達(dá)成共識，這樣做能消除主觀性和歧義性，保證產(chǎn)品團(tuán)隊(duì)內(nèi)部不會出現(xiàn)摩擦和混亂。

這套標(biāo)準(zhǔn)的內(nèi)容涵蓋了設(shè)計和開發(fā)。例如對命名約定、無障礙標(biāo)準(zhǔn)和文件結(jié)構(gòu)等等，幫助團(tuán)隊(duì)達(dá)成共識，減少出錯。

視覺語言是設(shè)計標(biāo)準(zhǔn)的核心部分。定義顏色、形狀、類型、圖標(biāo)、布局和動效的樣式和用法對于創(chuàng)建品牌一致的用戶體驗(yàn)至關(guān)重要。系統(tǒng)中的每個組件都包含這些元素，它們在表達(dá)品牌特性中扮演著不可或缺的角色。

沒有標(biāo)準(zhǔn)，決策時就會無據(jù)可依。這不僅不能擴(kuò)展設(shè)計，還會造成復(fù)雜、差勁的用戶體驗(yàn)。

超越平臺

視覺語言可以不局限于單一平臺，可以在 Web，iOS，Android 和其他平臺上延續(xù)。將規(guī)范文檔展示在設(shè)計系統(tǒng)網(wǎng)站的醒目位置，能夠幫助系統(tǒng)開發(fā)者了解組件的樣式和交互模式。例如，Google 的 Material Design 就深入到其產(chǎn)品視覺語言的各個層面。

2. 組件

組件是系統(tǒng)中復(fù)用代碼的一部分，它們充當(dāng)應(yīng)用程序界面的基礎(chǔ)。組件的復(fù)雜性各不相同。將組件簡化為單個功能（如按鈕或下拉菜單）可以增加其靈活性，使其更易于復(fù)用。復(fù)雜的組件，如特定類型數(shù)據(jù)的圖表，可以很好地滿足其應(yīng)用場景，但是這種復(fù)雜性限制它的使用場景數(shù)量。組件的復(fù)用性越高，需要維護(hù)的次數(shù)就越少，規(guī)模也就越簡單。

基于組件的開發(fā)通過復(fù)用代碼來減少技術(shù)開銷。建立標(biāo)準(zhǔn)規(guī)范了這些組件的用途、樣式和用法。兩者結(jié)合在一起，就相當(dāng)于為你的產(chǎn)品團(tuán)隊(duì)配備了一個清晰的系統(tǒng)，讓他們了解到為什么和怎么做。

設(shè)計系統(tǒng)的價值

讓我們詳細(xì)看看設(shè)計系統(tǒng)如何幫助你解決一直以來的痛苦。

1. 擴(kuò)展式設(shè)計

隨著團(tuán)隊(duì)的成長，設(shè)計師通常會將注意力集中在應(yīng)用程序的獨(dú)立功能區(qū)域，如搜索和發(fā)現(xiàn)、帳戶管理等。這就會導(dǎo)致設(shè)計碎片化，就像是一座設(shè)計的巴別塔，每個設(shè)計師都將他們的設(shè)計語言往上添。當(dāng)設(shè)計師單獨(dú)而不是系統(tǒng)地去解決問題時，就會發(fā)生這種情況。

沒有通用設(shè)計語言統(tǒng)一產(chǎn)品和設(shè)計，用戶體驗(yàn)就會開始崩潰。當(dāng)缺乏設(shè)計規(guī)范時，設(shè)計討論就變得毫無用處。為了使團(tuán)隊(duì)內(nèi)部保持一致，必須要有一個共享的來源——可供參考的官方樣式庫。

大多數(shù)情況下的樣式庫都是靜態(tài)的內(nèi)容，例如設(shè)計模版。但是靜態(tài)的參考幾乎立刻就會過時。這就是為什么有的團(tuán)隊(duì)會建造像 Shopify’s Polaris 站點(diǎn)這樣的網(wǎng)站——一個設(shè)計系統(tǒng)站點(diǎn)，用該設(shè)計系統(tǒng)構(gòu)建而成，記錄系統(tǒng)的所有方面，包括組件、指南和交互最佳使用場景。因?yàn)樗桥c系統(tǒng)一起構(gòu)建的，所以它能夠保持其永遠(yuǎn)是的。

對于產(chǎn)品團(tuán)隊(duì)而言，內(nèi)部設(shè)計系統(tǒng)站點(diǎn)是最佳、最易訪問的共享來源。它提供了一個引力，使團(tuán)隊(duì)成員保持一致和同步。

2. 管理你的債務(wù)

隨著應(yīng)用程序和團(tuán)隊(duì)的時間積累，會慢慢形成債務(wù)。這種債務(wù)不是金融債務(wù)，而是技術(shù)和設(shè)計債務(wù)。這些債務(wù)是因?yàn)榻鉀Q獨(dú)立問題獲得的。設(shè)計債務(wù)由大量不可復(fù)用和不一致的樣式和慣例組成，而維護(hù)它們是不可能完成的任務(wù)。隨著時間的推移，這些債務(wù)的累積會成為減緩增長的巨大負(fù)擔(dān)。

創(chuàng)造行為本身并不會產(chǎn)生債務(wù)——就像花錢本身并不會產(chǎn)生金融債務(wù)一樣。但使用設(shè)計系統(tǒng)將使你的設(shè)計和代碼保持足夠簡潔，同時仍然允許你進(jìn)行升級和迭代。

3. 一致的設(shè)計

一致且重復(fù)使用的標(biāo)準(zhǔn)化組件，使你應(yīng)用程序的易用性大大提升。標(biāo)準(zhǔn)化的組件還能讓設(shè)計師花更少的時間關(guān)注樣式，花更多的時間專注于提升用戶體驗(yàn)。

4. 更快的原型

在設(shè)計系統(tǒng)下工作，你可以像玩樂高一樣快速拼湊流程和交互，構(gòu)建無數(shù)的原型和方案進(jìn)行快速驗(yàn)證，從而幫助團(tuán)隊(duì)快速獲得數(shù)據(jù)和結(jié)論。

5. 提高可用性

頁面樣式的不一致會影響產(chǎn)品的可用性，當(dāng) CSS 因?yàn)閿?shù)不清的不一致樣式元素和交互增加時，頁面加載時間也會加長，這會導(dǎo)致很糟糕的用戶體驗(yàn)。它還可能產(chǎn)生沖突的 CSS 和 JavaScript，從而可能破壞你的應(yīng)用程序。通過使用設(shè)計程序，通過構(gòu)建一個整體的組件庫（而不是每頁）來避免這些沖突，從而花費(fèi)更少的時間來保證產(chǎn)品質(zhì)量。

6. 建立可訪問性程序

可訪問性在組件級別就可以實(shí)現(xiàn)，針對殘疾人士、網(wǎng)速較慢和老舊的計算機(jī)上進(jìn)行優(yōu)化。這是一個建立易用性程序很好的方法， 在第 3 章「構(gòu)建設(shè)計系統(tǒng)」中，Katie Sylor-Miller 解釋了設(shè)計系統(tǒng)如何幫助你改善產(chǎn)品的可用性，并保證遵守你所在國家/地區(qū)的法律。

（譯者注：美國殘疾人法案于 1990 年 7 月通過并簽署，其中有規(guī)定網(wǎng)站的可用性必須遵守《美國殘疾人法》（ADA）的相關(guān)內(nèi)容。）

設(shè)計系統(tǒng)的誤區(qū)

即使有上述說的這些好處，在團(tuán)隊(duì)內(nèi)部推行一個設(shè)計系統(tǒng)的時候，仍然很難說服團(tuán)隊(duì)成員。設(shè)計師可能會感到局限或束縛，但通常這些被感知到的弱點(diǎn)正是設(shè)計系統(tǒng)的最大優(yōu)勢。

讓我們來揭穿那些你在推行設(shè)計系統(tǒng)時經(jīng)常會遇到的誤區(qū)吧。

誤區(qū)1：過于局限

誤區(qū)：負(fù)責(zé)深入獨(dú)立業(yè)務(wù)的設(shè)計師看到的設(shè)計標(biāo)準(zhǔn)可能會與其他需求的不一樣，因此，他們會認(rèn)為通用的設(shè)計系統(tǒng)過于局限，可能無法滿足某些特定業(yè)務(wù)的需求。

現(xiàn)實(shí)：設(shè)計師通常會設(shè)計出自定義的解決方案以滿足應(yīng)用中的獨(dú)立的業(yè)務(wù)，從而增加了設(shè)計和技術(shù)的負(fù)擔(dān)。而使用設(shè)計系統(tǒng)，這些被設(shè)計的新解決方案可以被反饋到設(shè)計系統(tǒng)里面，使每個人都可以使用這些改進(jìn)方案。

誤區(qū)2：缺乏創(chuàng)造力

誤區(qū)：如果設(shè)計師被限制在一個設(shè)計系統(tǒng)下做設(shè)計，那么他將不能去自由地探索設(shè)計風(fēng)格。前端的工作通常包含著各種樣式風(fēng)格的更新。對應(yīng)用程序的風(fēng)格進(jìn)行改版通常不是一個小任務(wù)。這也可能是一個很大的風(fēng)險，因?yàn)閺氖逻@項(xiàng)工作會移除一部分的舊資源，可能會對可用性產(chǎn)生負(fù)面影響。

現(xiàn)實(shí)：設(shè)計系統(tǒng)的組成部分是相互關(guān)聯(lián)的，這意味著當(dāng)一個位置進(jìn)行更改時，這項(xiàng)更改會在整個系統(tǒng)中同步，這使得系統(tǒng)內(nèi)的樣式更新工作變得輕而易舉，但影響卻大得多。以前是幾周甚至幾月的工作量，現(xiàn)在可以在一個下午就能完成。

誤區(qū)3：一勞永逸

誤區(qū)：設(shè)計和構(gòu)建完設(shè)計系統(tǒng)后，工作就完成了。

現(xiàn)實(shí)：設(shè)計系統(tǒng)是有生命的，這意味著需要不斷對其進(jìn)行維護(hù)和改進(jìn)。但是由于應(yīng)用是由設(shè)計系統(tǒng)的復(fù)用性組件提供支持的，因此該應(yīng)用會自動同步設(shè)計系統(tǒng)的改進(jìn)內(nèi)容，從而減少維護(hù)應(yīng)用程序的工作量。這就是設(shè)計系統(tǒng)提供的擴(kuò)展能力。

總結(jié)

設(shè)計系統(tǒng)不是一時流行的方法，也不是未經(jīng)檢驗(yàn)的假設(shè)。為了讓設(shè)計找到與技術(shù)的快速發(fā)展相匹配的同等方案，基于組件的設(shè)計和開發(fā)是一種行之有效的可靠解決方案。

現(xiàn)在你已經(jīng)了解了創(chuàng)建設(shè)計系統(tǒng)的真正價值，讓我們在下一章中深入探討實(shí)際的設(shè)計過程吧。

文章來源：優(yōu)設(shè)    作者：彩云譯設(shè)計

奔馳法（SCAMPER）是能夠幫助我們拓寬解決問題的思路檢查列表。在解決問題的過程中，如果感到束手無策，可以嘗試從列表中顯示的方向重新思考問題，從而打開解決問題的思路。你將通過本文熟練掌握其運(yùn)用方法。

SCAMPER的方向

SCAMPER 是七個英文短語的縮寫，同時也代表著七個解決問題的方向，這七個方向是：

• 替代
• 整合
• 調(diào)整
• 修改
• 另用
• 消除
• 逆反

SCAMPER 法的具體實(shí)踐步驟：

1. 首先列出現(xiàn)有產(chǎn)品或服務(wù)讓團(tuán)隊(duì)止步不前的問題、障礙、困惑等。
2. 就 7 個切入點(diǎn)找出合適的定義（請參閱我們下面的步驟指南）。
3. 根據(jù)需要創(chuàng)造的對象或需要解決的問題來設(shè)計問題。
4. 逐項(xiàng)加以討論、研究，從中獲得解決問題的方法和創(chuàng)造發(fā)明的設(shè)想。
5. 評估可行方案，落實(shí)流程改善或進(jìn)行產(chǎn)品改良。

示例：麥當(dāng)勞

麥當(dāng)勞家喻戶曉的知名度得益于極具傳奇色彩的麥當(dāng)勞創(chuàng)始人雷·克羅克先進(jìn)的經(jīng)營理念。畢竟麥當(dāng)勞的出現(xiàn)讓人們的生活模式發(fā)生了翻天覆地的變化。時至今日，我們?nèi)匀豢梢詮柠湲?dāng)勞的商業(yè)戰(zhàn)略中識別出 SCAMPER 法的蹤跡：

• 另用：出售餐廳和房地產(chǎn)，而不是簡單的漢堡包。
• 消除：讓客戶為自己服務(wù)，從而避免高昂的人工成本。
• 調(diào)整：讓顧客在用餐前付款。

SCAMPER的步驟

替代

這里需要考慮的總體問題是：何物可被「取代」？

尋找當(dāng)前選項(xiàng)的替代選項(xiàng)。這些替代選項(xiàng)可以是人，物或方案等一切等同于現(xiàn)有選項(xiàng)的東西。例如產(chǎn)品的替代材料，服務(wù)的替代方案以及后備人員等。

思考清單：

• 我可以對零件進(jìn)行替換嗎？
• 我可以更換哪部分工作人員？
• 我可以更改規(guī)則嗎？
• 我可以更改成分或材料嗎？
• 我可以使用別的方法嗎？
• 我可以改變形狀、顏色、粗糙度、聲音或氣味嗎？
• 我可以把這個想法用在其他項(xiàng)目上嗎？
• 我可以改變自己的感受或態(tài)度嗎？
• ……

整合

這里需要考慮的總體問題是：可與何物合并而成為一體？

將現(xiàn)有產(chǎn)品和別的產(chǎn)品或系統(tǒng)結(jié)合在一起使用，或者能否與其它產(chǎn)品合并而成為一個整體？

思考清單：

• 組合起來怎么樣？
• 能否裝配成一個系統(tǒng)？
• 我可以將各種想法進(jìn)行綜合嗎？
• 我可以把目的進(jìn)行組合嗎？
• 我可以把各種部件進(jìn)行組合嗎？
• 我可以合并哪些流程或步驟？
• 為了降低生產(chǎn)成本，我可以合并哪些方面？
• 我可以在哪里建立協(xié)同？
• ……

調(diào)整

這里需要考慮的總體問題是：原物是否有需要調(diào)整的地方？找出所有可以調(diào)整的選項(xiàng)。

思考清單：

• 可否改變一下形狀、顏色、音響、味道？
• 是否可改變一下意義、型號、模具、運(yùn)動形式？
• 能否更換一下先后順序？
• 可否調(diào)換元件、部件？
• 是否可用其他型號，可否改成另一種安排方式？
• 原因與結(jié)果能否對換位置？
• 能否變換一下日程？
• ……

修改

這里需要考慮的總體問題是：可否改變原物的某些特質(zhì)，如意義、顏色、聲音、形式等？修改現(xiàn)有的所有或部分選項(xiàng)，重新組合出新產(chǎn)品。

思考清單：

• 能否添加部件？拉長時間，增加長度，提高強(qiáng)度、延長使用壽命、提高價值？
• 現(xiàn)在的東西能否縮小體積，減輕重量，降低高度，壓縮、變??？
• 能否省略，能否進(jìn)—步細(xì)分？
• 能否添加額外的功能？
• 能否擴(kuò)大目標(biāo)群體？
• ……

另用

這里需要考慮的總體問題是：可有其它非傳統(tǒng)的用途？不斷尋找現(xiàn)有產(chǎn)品的新用途，將現(xiàn)有產(chǎn)品推廣到新地方。

思考清單：

• 它可以用在哪些地方呢？
• 是否有新的方式來使用它？
• 擴(kuò)展以后是否還有其他用途？
• 是否還有其他市場呢？
• 哪些目標(biāo)群體可以從該產(chǎn)品中受益？
• 還有誰可能會使用它？
• 它能讓原本不打算使用它的人使用嗎？
• ……

消除

這里需要考慮的總體問題是：可否將原物變小？濃縮？或省略某些部分？使其變得更完備、更精致？消除不必要的選項(xiàng)，減少不需要的功能。

思考清單：

• 我可以消除或簡化哪些內(nèi)容？
• 我可以減少時間或其他組件嗎？
• 如果我刪除某一部分會發(fā)生什么？
• 哪些是必要的或不必要的？
• 我可以取消這些規(guī)則嗎？
• ……

逆反

這里需要考慮的總體問題是：可否重組或重新安排原物的排序？或把相對的位置對調(diào)？重組或重新安排選項(xiàng)的順序，或把選項(xiàng)的位置對調(diào)。

思考清單：

• 倒過來會怎么樣？
• 上下是否可以倒過來？
• 左右、前后是否可以對換位置？
• 里外可否倒換？
• 正反是否可以倒換？
• 可否用否定代替肯定？
• 可以有其他的順序或者構(gòu)造嗎？
• ……

SCAMPER的由來

這個檢查列表最早是為頭腦風(fēng)暴設(shè)計的，旨在激活參與人員思路，起到發(fā)散思維的作用。心理學(xué)家羅伯特·艾伯爾總結(jié)了這些列表并做出最終的解釋。目前奔馳法主要用在產(chǎn)品改造和服務(wù)升級的過程中，但它對普通問題的解決也有幫助作用。

文章來源：優(yōu)設(shè)    作者：陸小鳳不傳奇

品牌 IP 化最大價值在于：通過挖掘品牌的人性，賦予性格、文化、價值觀更像一個有血有肉有靈魂的人，通過持續(xù)的內(nèi)容生產(chǎn)，吸引用戶參與，進(jìn)而使用戶產(chǎn)生精神共鳴，在與用戶產(chǎn)生關(guān)系的過程中給予情懷和溫度、最終實(shí)現(xiàn)商業(yè)價值。

IP 是什么？

IP 在百度上解釋為：（Intellectual Property）知識產(chǎn)權(quán)，指的是通過智力創(chuàng)造性勞動所獲得的成果，并由勞動者享受成果的專有權(quán)利，是一種無形財產(chǎn)。現(xiàn)在市面上見到的 IP 現(xiàn)象呈現(xiàn)出來的是一種新商業(yè)現(xiàn)象、新商業(yè)模式、一種新的思維方法，比如我們見到的漫畫、電視劇、明星、小說、游戲等……

用一句話解釋：IP 就是自帶流量、散發(fā)魅力、可以吸附粉絲、商業(yè)轉(zhuǎn)化。

品牌IP化的現(xiàn)象

十多年前，品牌設(shè)計被叫做企業(yè)形象設(shè)計（VI），他的基本要素就是：企業(yè) logo 圖形、標(biāo)準(zhǔn)字、輔助圖形、吉祥物設(shè)計等。設(shè)計師通過創(chuàng)意設(shè)計出簡潔生動的圖形傳遞品牌的形象，這個圖形就像一個符號占領(lǐng)用戶的心智。

企業(yè)的最終是要售賣產(chǎn)品達(dá)到盈利的目標(biāo)，就要投入大量的成本去各種渠道推廣品牌形象，比如燈箱廣告、電視廣告、車體廣告投入等，以保持品牌曝光度。

1. 品牌IP化

近十年來，在早期一些互聯(lián)網(wǎng)品牌變化中，我們發(fā)現(xiàn)京東、天貓、當(dāng)當(dāng)、國美……很多品牌都在打造動物形象。

從 2016 年開始，各個企業(yè)的品牌設(shè)計出現(xiàn)的一些新的方向，他們打造符合品牌的 IP 形象符號或者 IP family，比如知乎劉看山、 AcFun 的 AC 娘、嗶哩嗶哩的 2233 娘、QQfanmily、MTfamily，用一些傻呆、萌、賤、騷等個性鮮明的形象吸引粉絲，獲得用戶對品牌的好感度。

傻呆、萌、賤騷的個性IP形象：

IP族化：

品牌與品牌IP化的區(qū)別

從過去品牌設(shè)計發(fā)展到如今品牌 IP 化后，品牌逐漸變得有溫度、有人格靈魂、更容易互動了。

1. 從理性功能定位轉(zhuǎn)變到情感精神寄托

品牌設(shè)計在推廣中強(qiáng)調(diào)的是產(chǎn)品功能，屬于漏斗式輸入。而品牌 IP 化追求的用戶對價值和文化認(rèn)同，提供給消費(fèi)者的是一種情感的寄托。比如《故宮》不再是過去威武嚴(yán)肅的印象，以俏皮、賣萌的周邊形象深受年輕人的喜愛，故宮的文化、傳統(tǒng)元素也找到了新的傳承渠道。

2. 用戶購買行為由需要轉(zhuǎn)變?yōu)闊釔?/strong>