作者：彩云Sky
鏈接：https://www.zcool.com.cn/article/ZMTU5NDg1Mg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
大體上分為兩類：彩蛋流和體驗流
搜索的本質(zhì)是什么？無疑是內(nèi)容的召回和信息的推薦。
可隨著時代的發(fā)展和行業(yè)公司的內(nèi)卷，不少公司除了持續(xù)優(yōu)化搜索結(jié)果與推薦外，在搜索的體驗和彩蛋上也是下了不少功夫，從而進(jìn)一步加強自有產(chǎn)品的競爭力與用戶黏性。因此今天就來盤點一些，那有意思的大廠搜索交互。
大體上分為兩類：彩蛋流和體驗流
注重提升搜索過程中的趣味程度，以增加用戶的好感度與產(chǎn)品印象/口碑。行業(yè)代表：谷歌瀏覽器、百度瀏覽器
可以說是搜索彩蛋的先行者，內(nèi)置了很多搜索關(guān)鍵詞的有趣彩蛋，如娛樂角色：搜索【滅霸】，頁面右邊會打響指，相關(guān)字段會被’毀滅‘掉
搜索【馬里奧兄弟】，右邊也有游戲里一樣的點擊彩蛋
還有各種有意思的搜索結(jié)果比如搜：is google down（谷歌關(guān)閉了嗎），搜索結(jié)果優(yōu)先顯示：NO
再如搜索《銀河系漫游指南》的一句話：the answer to life, the universe, and everything。此時搜索結(jié)果頁會自動計算成42。貌似也只有讀過《銀河系漫游指南》的人才能明白其中的奧秘。聽說是生命、宇宙與萬事萬物的終極解答。
而且在日常的節(jié)日、活動、熱點運營上，谷歌也從不缺席。都會在搜索框上用【插畫、動效】等形式承載各種活動入口、吸引用戶參與，可以已經(jīng)形成一個穩(wěn)定、具有品牌感的企業(yè)文化了。
如各種復(fù)活節(jié)、開學(xué)季、母親節(jié)動效。而且更多有趣、創(chuàng)意的設(shè)計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設(shè)計方法。
百度在搜索彩蛋里下的的功夫也不少，最著名的應(yīng)該是搜索【黑洞】時，頁面上會出現(xiàn)黑洞的吸入特效。
而且和谷歌相同，在其他的搜索關(guān)鍵詞上，百度也是埋下了不少彩蛋，比如：搜索【翻轉(zhuǎn)】，頁面會左右翻過來
搜索【跳躍】，頁面會在上下跳動
搜索【失重】，頁面上的字會飄起來
而在【活動運營】上，百度也是很有心地進(jìn)行著創(chuàng)新設(shè)計，力求給用戶一種眼前一亮的感覺。比如每年的愚人節(jié)，搜索結(jié)果頁上都有‘調(diào)戲’用戶的創(chuàng)意設(shè)計，各種輕松調(diào)皮的畫風(fēng) 給不少用戶帶來了新鮮感和趣味性。
還有在【活動入口】的設(shè)計上也是特別有想法：在某年的圣誕節(jié)上，百度創(chuàng)新性地將活動入口’嵌套‘在結(jié)果頁卡片中間，用活動里的ip形象-雪人「抬著」結(jié)果頁卡片和在上面「滾動」
用這種充滿創(chuàng)意+應(yīng)景的的入口設(shè)計與引導(dǎo)方式，最大限度地降低漏斗，吸引讓更多用戶參與該活動。另外，百度搜索框上面的運營活動入口，也和谷歌有異曲同工之妙。
而且更多有趣、創(chuàng)意的設(shè)計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設(shè)計方法。
注重提升搜索過程中的交互體驗，以增加用戶的操作效率與產(chǎn)品易用性。
代表：蘋果產(chǎn)品、夸克瀏覽器
·iPhone
iPhone的【桌面搜索】除了能查詢手機上的各種信息、文件，它還自帶了【匯率轉(zhuǎn)換和計算器】。在搜索框輸入【數(shù)學(xué)公式、匯率轉(zhuǎn)換】時會自動計算對應(yīng)的結(jié)果。無需用戶額外打開計算器、瀏覽器，大大減少操作鏈路。
在iOS的原生鍵盤里，可以根據(jù)輸入詞檢測+搜索對應(yīng)的手機號碼：當(dāng)你輸入 【打+我或通訊錄好友+電話】時，鍵盤上會自動顯示自己或好友的電話號碼，點擊號碼就能自動粘貼在輸入框中。
用戶無需前往通訊錄就能輕松「獲知+想起」誰誰的電話號碼，大大提升操作體驗與效率
·Mac
在Mac電腦的工具欄上搜索相關(guān)幫助時，系統(tǒng)會直接把該結(jié)果所對應(yīng)的頁面位置調(diào)取出來并懸浮展示。用戶可以直觀地該結(jié)果在哪里，并減少尋找的操作路徑，免去多余操作
在Mac電腦的‘系統(tǒng)偏好設(shè)置’里搜索幫助，在結(jié)果列表上會以聚光燈的形式展示各個結(jié)果入口。選擇具體某個結(jié)果時，該入口的聚光燈會更清晰些，特別容易找到搜索結(jié)果。
夸克瀏覽器除了傳統(tǒng)的「點擊搜索框」喚出輸入欄外，在屏幕任意位置下滑手勢同樣可以喚出搜索框。
降低「需要往上手指移動，才能點擊搜索框」的操作成本，讓用戶更快、更精準(zhǔn)地觸達(dá)搜索。
而且在輸入網(wǎng)址或英文等字段時，搜索框下方會出現(xiàn)一個滑塊區(qū)。點擊就會變成長條的滑塊，拖拽滑塊即可改變光標(biāo)位置。
而且更多有趣、創(chuàng)意的設(shè)計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設(shè)計方法。
讓用戶更方便地將光標(biāo)快速移動到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克還會前置搜索結(jié)果， 比如在搜索框中輸入“某城市+天氣”的關(guān)鍵詞，上方就會以卡片的形式顯示該地區(qū)最近一周的天氣。
用戶無需觸發(fā)搜索、進(jìn)入結(jié)果頁才能看到想要查詢的信息。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
不管是一部電影，還是一張視覺創(chuàng)意，想要消費者或者老板買單，從形、意、色、字、構(gòu)、質(zhì)等一系列視覺語言，都需要很好的掌握。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
設(shè)計過程被描述為多個階段，每個階段都包含不同的活動來完成該階段，它沒有統(tǒng)一的標(biāo)準(zhǔn)流程，每個公司和設(shè)計師都有自己的流程版本。
盡管存在多個流程，但一般流程和階段類似于以下內(nèi)容:
了解問題：初步了解問題。觀察、采訪和傾聽用戶。
定義問題：解釋和定義要解決的問題。
構(gòu)思：通過頭腦風(fēng)暴產(chǎn)生盡可能多的想法。
原型設(shè)計：構(gòu)建原型并與其他人分享（ 再次縮小解決方案空間，為實驗階段 ）。
測試：測試可能的解決方案、實施、改進(jìn)或重新設(shè)計。
傳統(tǒng)的問題解決采取有條不紊而又科學(xué)的形式。該過程從一個問題開始，定義要采取的步驟以及達(dá)到解決方案的工具或方法。
設(shè)計思維是一種創(chuàng)造性的策略，可以產(chǎn)生創(chuàng)造性的未來結(jié)果和/或創(chuàng)造性的問題解決方式，它應(yīng)該被認(rèn)為是一種以解決方案為中心的思維策略。
它通常被描述為一種創(chuàng)造性、主觀和感性的對許多大型組織的分析邏輯（ 布朗，2008 年 ），或作為分析和創(chuàng)造性推理模式的組合（ 鄧恩 & 馬丁，2006 年；利特卡，2015 年 ）。
設(shè)計思維來源于常規(guī)問題解決方法，常規(guī)問題解法是設(shè)計思維的基礎(chǔ)。
從解決問題到設(shè)計思維，Liedtka (2013)
結(jié)果發(fā)現(xiàn)，設(shè)計思維實際上也是一個解決問題的過程，而不僅僅是一個創(chuàng)新過程（ 利特卡，2013）
一個例子是，豐田采用設(shè)計思維從頭開始分析其西海岸的一個客戶聯(lián)絡(luò)中心，在重新設(shè)計過程中，組建了一個由一線呼叫代表、軟件工程師、業(yè)務(wù)主管和變革代理組成的跨職能團隊，這一舉動最終改變了客戶和員工的服務(wù)中心體驗。
我們每天都會遇到問題，但是當(dāng)我們解決同樣的問題時，它們就成了例行公事（ 似乎已經(jīng)忘記它們是問題了 ），我們甚至都沒有意識到正在解決這些問題。例如，我的辦公室在 30 分鐘路程之外，該怎么到達(dá)那里？開車、坐火車或巴士到目的地；除非車子輪胎被刺破，否則你就需要弄清楚如何到達(dá)辦公室。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創(chuàng)造了特定術(shù)語：“設(shè)計思維”，并將多年來醞釀的方法和想法封裝成一個統(tǒng)一的概念。
設(shè)計思維是以人為中心、開放式、基于問題的方法論。這種方法最初是為了改變工程教育中的教學(xué)方式，而工程師處理和解決問題的方式有其設(shè)計思維的基礎(chǔ)。
設(shè)計思維一詞可以追溯到 1987 年 Peter Rowe 的著作：“設(shè)計思維。” 他描述工程師和建筑師處理問題的方法有很大不同。
90 年代初，認(rèn)知科學(xué)家 Don Norman 加入 Apple 團隊，擔(dān)任他們的用戶體驗架構(gòu)師，這使他成為第一個在職位中包含 UX 的人。他提出了“用戶體驗設(shè)計”這個術(shù)語，因為他想“涵蓋人們對系統(tǒng)體驗的所有方面，包括工業(yè)設(shè)計、圖形、界面、物理交互和手冊。” 從那時起，這些領(lǐng)域中的每一個都將用戶體驗，擴展到了自己的專業(yè)領(lǐng)域。
設(shè)計思維在解決“棘手問題”時特別有用。
棘手問題的特征
“棘手問題”一詞是由設(shè)計理論家 Horst Rittel 在 1972 年創(chuàng)造的，用來描述本質(zhì)上非常模糊 \ 特別棘手的問題。棘手問題，有很多未知因素，沒有確定的解決方案。問題或解決方案可能與另一個棘手的問題有關(guān)，因此這是一個需要設(shè)計思維的持續(xù)過程。貧困、饑餓和氣候變化是一些現(xiàn)代的棘手問題。
設(shè)計主題的范圍是普遍的，因為 設(shè)計思維可以應(yīng)用于人類經(jīng)驗的任何領(lǐng)域。
它可以用于：
符號和視覺傳達(dá)：這包括平面設(shè)計的傳統(tǒng)工作，如排版和廣告、書籍和雜志制作、科學(xué)插圖、攝影、電影、電視和計算機顯示。
材料：這包括對日常用品的形式和視覺外觀的傳統(tǒng)關(guān)注 —— 服裝、家用物品、工具、儀器、機械和車輛。
人類活動和組織性服務(wù)：包括對物流的傳統(tǒng)管理關(guān)注，結(jié)合物質(zhì)資源、工具和人類低效的序列和時間表，以達(dá)到特定的目標(biāo)。
復(fù)雜的系統(tǒng)或環(huán)境：生活、工作、娛樂和學(xué)習(xí)。這包括系統(tǒng)工程、建筑和城市規(guī)劃的傳統(tǒng)關(guān)注點，或復(fù)雜整體部分的功能分析及其隨后在層次結(jié)構(gòu)中的集成。
設(shè)計思維起源于設(shè)計師的培訓(xùn)和專業(yè)實踐，但這些原則可以被每個人實踐并擴展到每個活動領(lǐng)域。（布朗，2013 年）
在企業(yè)中，設(shè)計過程可以為企業(yè)環(huán)境中的問題解決帶來創(chuàng)新思維。它還可以用于醫(yī)療保健，通過向護(hù)士、醫(yī)生和管理人員教授設(shè)計思維技術(shù)，我們可以激勵相關(guān)從業(yè)者貢獻(xiàn)新的想法。
不管是什么設(shè)計，理解和研究問題是必不可少的，因為我們能夠從其出發(fā)，從而進(jìn)行以用戶為中心的設(shè)計。
設(shè)計思維的最早階段是搞懂你能帶來的情感價值。設(shè)計思維方法迫使你停留在提問與質(zhì)疑階段，而不是準(zhǔn)確定義出問題后進(jìn)入下一階段。我們都有過快進(jìn)入解決方案模式的傾向，所以設(shè)計思維方法迫使你真實地存在于這個不清楚、有時還非?；靵y的時刻，從而使你對要解決的問題產(chǎn)生更好的理解。（利特克，2013）
傳統(tǒng)的問題解決涉及提出一個解決方案，但設(shè)計思維首先使我們發(fā)散，試圖為問題生成各種可能的替代解決方案。然后讓我們進(jìn)行收斂性思維，縮小多種可能性，找到單一的最佳解決方案。
根據(jù)利特卡和奧美 (2011) 的說法，設(shè)計思維的全部意義在于學(xué)習(xí)一種新的、系統(tǒng)的解決問題的方法。正如我們思考創(chuàng)造力一樣，即使是設(shè)計思維也可以通過實踐來教授和改進(jìn)。
設(shè)計過程從來都不是線性的，它由多次失敗和迭代組成（布朗，2018）。
首先，設(shè)計師試圖將問題與過去的類似案例聯(lián)系起來。如果這種方法不能提供任何解決方案，下一步就是使用知識和創(chuàng)造力作為一種實驗思維形式來產(chǎn)生新的想法。使用決策矩陣對這些想法進(jìn)行評估，從而會產(chǎn)生被進(jìn)一步分析和測試的解決方案。如果成功，它將被實施。如果不成功，則需要重新表述問題，并重復(fù)該過程。這是一個迭代過程，即循環(huán)方法。
這一持續(xù)不斷的重新再設(shè)計過程，源于和客戶親密接觸的洞察。
學(xué)習(xí)設(shè)計思維不僅僅意味著學(xué)習(xí)一套新的工具。它還意味著：學(xué)習(xí)收集和分析大量數(shù)據(jù)；學(xué)習(xí)挖掘?qū)ο罂赡艿男螒B(tài)而不是自主認(rèn)為他是什么；學(xué)習(xí)管理不確定感，以及與許多新的伙伴合作（ 利特卡和奧美，2011）。你可以進(jìn)行的研究類型分為三類：生成性研究、評估性研究和驗證性研究。
一種常見的表述 —— 實際上是設(shè)計思維的另一種視角 —— 即設(shè)計師應(yīng)該預(yù)料到會“很快失敗或經(jīng)常失敗”（布朗，2009）。
當(dāng)過程早期發(fā)生故障時，例如被拒絕的原型，實質(zhì)上它可以為有效解決方案提供關(guān)鍵見解。這種觀點與傳統(tǒng)的先形成理論，再檢驗正誤的方式相矛盾。
Airbnb、Braun 和百事可樂等多元化公司都在 采用設(shè)計思維并將其作為核心戰(zhàn)略。例如，IBM 為全球旗下的 44 個設(shè)計工作室聘請了 1600 名設(shè)計師，并且正在培訓(xùn)數(shù)以萬計的設(shè)計師員工建立深度創(chuàng)新能力 ( O'Keefe, 2017 )
設(shè)計思維為我們解決問題添加了以人為本的元素。當(dāng)我們試圖通過牢記人們的想法來解決問題，并使用基于直接觀察乃至訪談的研究時，我們便會捕捉到與消費者需求一致的意外見解和創(chuàng)新。
它有助于將成功的產(chǎn)品更快地推向市場，最終節(jié)省企業(yè)資金。
IBM 的健康和人類服務(wù)組織的設(shè)計思維實踐，通過有效使用設(shè)計和設(shè)計思維幫助企業(yè)將缺陷數(shù)量減少了 50% 以上。這種更高效的工作流程導(dǎo)致計算出的 ROI 超過 300%。
由于復(fù)雜的問題從來不能被所有人完全理解，因此在嘗試設(shè)計解決方案時，處理歧義和多個并發(fā)的思路方向的能力是至關(guān)重要的素質(zhì)。
設(shè)計思維通過綜合和歸納思維，幫助實現(xiàn)質(zhì)的飛躍。它允許通過解構(gòu)來測試約束，并允許通過多樣性思維和批評思維，來擁抱和探索歧義。
消費者通常不知道他們有什么問題需要解決，或者他們無法用語言表達(dá)出來。只有經(jīng)過仔細(xì)觀察，設(shè)計者才能根據(jù)真實消費者行為中看到的東西來識別問題，而不是簡單地根據(jù)對消費者的想法來確定問題。這有助于定義模棱兩可的問題，并找到解決方案。
該方法鼓勵“跳出框架思考”（“瘋狂的想法”）；它蔑視顯而易見的事物并采用更具實驗性的方法。
在早期的流程階段鼓勵大膽的想法，以產(chǎn)生創(chuàng)造性的解決方案。使用它是為了讓設(shè)計師可以嘗試開發(fā)新的不受約束的思維方式，或?qū)ΤＲ妴栴}的創(chuàng)新解覺方法。
根據(jù)大多數(shù)設(shè)計學(xué)院的說法，具備特定特質(zhì)的人能夠更好地發(fā)揮設(shè)計思維的作用。
同理心：從多個角度想象世界 —— 同事、甲方客戶、實際使用者和消費者的角度。要成為更好的同理心，必須傾聽和觀察他人的行為，注意并獲得洞察力。
綜合思維：重要的是不僅要有分析能力，而且要能夠提出新穎的解決方案，還要憑直覺。
樂觀：除非你相信有解決方案，否則在遇到挑戰(zhàn)且解決方案遇到瓶頸時，你可能會放棄。
實驗主義：重大創(chuàng)新并非來自漸進(jìn)式調(diào)整。設(shè)計思想家以創(chuàng)造性的方式提出問題并探索限制因素，并朝著全新的方向發(fā)展。
協(xié)作：產(chǎn)品、服務(wù)和體驗日益復(fù)雜，因此必須擁有一支具有不同背景的團隊，以幫助從多個角度看待問題。
當(dāng)我們想到一個問題的多種解決方案時，對我們解決問題會非常有幫助，因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問題。想要擺脫功能固定，首先是要讓人們可以使用“改造后的衣架進(jìn)入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開簡單的彈簧門鎖。
為了幫助設(shè)計師利用文科和技術(shù)理論，整合多個領(lǐng)域的知識以找到創(chuàng)新的解決方案，我們采用設(shè)計思維來獲得洞察力。該方法側(cè)重于可視化和操作，因而幫助我們更容易地了解實際解法，而不僅僅是理論模型。
第一批美國公司在 2000 年代初期開始實施設(shè)計思維，這一概念引起了德國投資者 Hasso Plattner 的興趣，他于 2006 年資助創(chuàng)建了兩所設(shè)計學(xué)校（d.schools），其中一所位于波茨坦大學(xué)（德國），另一所位于美國斯坦福大學(xué)。由于兩所學(xué)校都成功地為大型組織提供了高管設(shè)計思維培訓(xùn)，因此該研究重點關(guān)注這些國家，以尋找早期實施者。
設(shè)計思維通常涉及希望參與整個設(shè)計和開發(fā)過程的龐大利益相關(guān)者團隊。
觀點、才能和經(jīng)驗的多樣性被認(rèn)為是注入新思維的部分重要來源。多樣性確保通過融合不同的觀點、技能和知識來產(chǎn)生創(chuàng)意（卡振思，2018 年；薩梅和德拉赫-扎哈維，2013 年）。設(shè)計思維的協(xié)作方法和工具可幫助團隊以積極的方式利用他們的差異。
決策是平等的，因為每個成員的意見都被征求和使用（卡爾格倫等，2016）。
當(dāng) IDEO 去 Apple 展示他們的鼠標(biāo)時，它不是什么花哨的設(shè)備，而是一個用膠帶粘起來的原型。
低保真原型制作起來既快速又便宜（ 想想幾分鐘和幾分錢 ），但可以從用戶和同事那里得到有用的反饋，這符合快速驗證、廉價試錯的原則。為每個想法投入盡可能少的資源意味著前期投入的時間和金錢更少。此外，將多個原型帶到現(xiàn)場進(jìn)行測試為用戶提供了比較的基礎(chǔ)參考，同時也有助于揭示某些需求。
為了創(chuàng)新，設(shè)計思維意識到認(rèn)知和行動對創(chuàng)新過程很重要。認(rèn)知包括接受度、樂觀和創(chuàng)造性的信心（ 凱莉 & 凱莉，2013；鄭，2018），而行動包括快速原型設(shè)計、旅程地圖和假設(shè)浮現(xiàn)（ 假設(shè)浮現(xiàn)：assumption surfacing，這是一種評估技術(shù)，涉及寫出潛在的假設(shè)和反假設(shè)。）（ 卡爾格倫等，2016；利特卡，2015）
如果領(lǐng)導(dǎo)層不歡迎風(fēng)險、模棱兩可和風(fēng)格的改變，實施起來就會變得更加困難。它會被管理者“質(zhì)疑”其具體指標(biāo)
沃爾特斯 ( 2011 ) 聲稱，由于設(shè)計思維的模糊性，它與組織文化相沖突。
據(jù)受訪者稱，在日常業(yè)務(wù)中使用設(shè)計思維之所以不會是最優(yōu)選項， 因為它是資源密集型的，增加了工作量。（ 麗莎等，2016）
在醫(yī)療保健等規(guī)避風(fēng)險的行業(yè)和公司中，“經(jīng)常和早點失敗”的方法被認(rèn)為是非常困難的。
許多設(shè)計師反對設(shè)計思維這一觀點，設(shè)計思維不僅關(guān)乎一個過程，而且關(guān)乎改變思維過程并提高人們可能提出的解決方案的創(chuàng)造力。
“設(shè)計思維”的推廣已被大型全球公司用來增加業(yè)務(wù)。不過，在更廣泛的設(shè)計世界中，我甚至?xí)f“設(shè)計思維”的過度宣傳導(dǎo)致了所提供設(shè)計質(zhì)量的下降。—— Yasushi Kusume
弗吉尼亞理工大學(xué)科學(xué)、技術(shù)和社會助理教授 Lee Vinsel 在《設(shè)計思維運動是荒謬的》中寫道，“歸根結(jié)底，設(shè)計思維與設(shè)計無關(guān)。這與文科無關(guān)。這與任何有意義的創(chuàng)新無關(guān)。如果這意味著重大的社會變革，那肯定不是關(guān)于“社會創(chuàng)新”。這是關(guān)于商業(yè)化的。”
觀察人們的行為以及他們?nèi)绾闻c環(huán)境互動，可以為你提供有關(guān)人們想法和感受的線索。
你可能認(rèn)為你知道問題所在，但只有通過觀察才能了解消費者真正需要什么。
宜家派設(shè)計師到人們家中，觀測他們的互動行為來了解他們的需求。這將使設(shè)計者能夠推斷這些經(jīng)歷的無形含義，以發(fā)現(xiàn)洞察。這些洞察提供創(chuàng)新解決方案的構(gòu)思方向。而事實上，最好的解決方案來自于對人類行為的最佳洞察。
Good Kitchen 是一家為老年人和體弱者提供膳食的社會服務(wù)機構(gòu)。起初的問題似乎是設(shè)計不當(dāng)?shù)纳攀巢藛?。然后設(shè)計思維揭示了無數(shù)問題，所有問題都源于服務(wù)本身的性質(zhì)。因此，經(jīng)由對服務(wù)進(jìn)行了徹底改革的之后，最終提高了客戶和員工的滿意度（利特卡，2014）
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
對于設(shè)計師來說，遇到設(shè)計瓶頸期很正常，入行一段時間后所具備的能力就會達(dá)到峰值，無法突破峰值就會遇到瓶頸。主要在設(shè)計思維和設(shè)計技法層面受限，打開設(shè)計思維才能突破瓶頸期，通過積累優(yōu)秀的案例并進(jìn)行總結(jié)分析，可以更快的打破思維限制。
分享目錄
一、趣味性的登錄設(shè)計
二、瓷片區(qū)的趣味性手勢交互
三、營造懷舊感的溫馨體驗
四、趣味性的進(jìn)度提示設(shè)計
五、場景感的點擊操作
六、動效引導(dǎo)用戶發(fā)帖
七、卡通形象強化瓷片區(qū)視覺感
八、不改變布局的曝光強化
九、可以晃動的 Banner 圖
十、場景感的底部標(biāo)簽欄設(shè)計
一、趣味性的登錄設(shè)計
登錄是進(jìn)入產(chǎn)品的第一道防線，也容易讓用戶產(chǎn)生排斥感，降低用戶的防備心理才能提高登錄的意愿度。
盯潮 App 在登錄界面中，以潮流元素和商品等內(nèi)容進(jìn)行設(shè)計，使得頁面視覺感豐富。晃動手機時元素也會移動，在掉落或者碰撞手機邊緣時配合震動感，讓體驗變得非常有趣。趣味性的設(shè)計降低了用戶的排斥感，提升了登錄的意愿度和體驗感。
二、瓷片區(qū)的趣味性手勢交互
瓷片區(qū)、Banner、金剛區(qū)是產(chǎn)品中的三大運營模塊，起到提高曝光度達(dá)到引流的目的。瓷片區(qū)在頁面中的布局比較靈活，設(shè)計表現(xiàn)也非常豐富。
盯潮 App 在首頁瓷片區(qū)設(shè)計中，以柵格式布局進(jìn)行區(qū)塊劃分，占比較大的模塊類似于 Banner 式表現(xiàn)。通過手勢可以任意拖動實現(xiàn)切換，趣味性和互動性相結(jié)合，提高了用戶的使用樂趣。
三、營造懷舊感的溫馨體驗
童年的記憶是我們逝去的青春，每每看到小時候的畫面，總能勾起我們童年的回憶。最近發(fā)現(xiàn)一款結(jié)合懷舊感營造設(shè)計風(fēng)格的產(chǎn)品，名字叫“軟眠眠”。
這是一款拯救失眠者的治愈系睡眠 App，以一幅小時候生活的環(huán)境插畫填充界面背景，圖標(biāo)設(shè)計也是提取小時候的玩物或者生活用品，視覺風(fēng)格營造極強的懷舊感。無論是畫風(fēng)還是配色、配樂等，都勾起了我們滿滿的回憶，帶給用戶溫馨的體驗。
四、趣味性的進(jìn)度提示設(shè)計
在完成步驟化和消耗數(shù)據(jù)等內(nèi)容表達(dá)層面會選擇進(jìn)度條，通過可視化的表達(dá)提高用戶的理解，減輕信息認(rèn)知負(fù)擔(dān)。
軟眠眠 App 在定制睡眠計劃的過程中，完成選項時的進(jìn)度條設(shè)計非常有意思，是一個小孩通過拉動繩子移動。拉動過程中結(jié)合動態(tài)表達(dá)，配合手繪風(fēng)的表現(xiàn)讓人感覺輕松愉快，趣味性的設(shè)計也提高了完成選項任務(wù)的意愿度。
五、場景感的點擊操作
在保障底層操作體驗的基礎(chǔ)上，設(shè)計會越來越講究細(xì)節(jié)的體驗，逐步強化情感化的融入和場景感的體驗。
最近在體驗小雞上工 App 時，在找工作的列表設(shè)計中加入了“搶”按鈕，在點擊列表時按鈕會有按壓的動效過程。模擬搶拍按鈕獲得機會的體驗，營造場景氛圍感，提高了設(shè)計表達(dá)的趣味性。
六、動效引導(dǎo)用戶發(fā)帖
微動效可以提高功能的吸引力，也能讓互動體驗變得更有趣，可以通過動效引導(dǎo)功能操作和提高關(guān)注度。
騰訊動漫 App 在圈子欄目中，以 IP 形象結(jié)合動效強化發(fā)帖按鈕，以此引導(dǎo)用戶參與發(fā)帖。動效不僅突出了發(fā)帖的關(guān)注度，也讓發(fā)帖按鈕設(shè)計更有親和力，進(jìn)而提升用戶的點擊欲。
七、卡通形象強化瓷片區(qū)視覺感
瓷片區(qū)起到強化曝光達(dá)到流量引導(dǎo)的作用，提高該模塊的吸引力至關(guān)重要，視覺感的突出也尤為重要。
會玩 App 在首頁“一起玩”的瓷片區(qū)設(shè)計中，以卡通形象結(jié)合豐富的色彩進(jìn)行表現(xiàn)，各種裝扮的形象豐富視覺感?？ㄍㄐ蜗笤O(shè)計風(fēng)格統(tǒng)一，卡片色彩豐富且協(xié)調(diào)，整體瓷片區(qū)視覺沖擊力十足。
八、不改變布局的曝光強化
在當(dāng)前產(chǎn)品結(jié)構(gòu)不變的基礎(chǔ)上，如何提高局部內(nèi)容或者主推內(nèi)容的曝光度，是產(chǎn)品設(shè)計師不斷探索的方向。
愛奇藝 App 首頁推薦欄目 Banner 圖下方，默認(rèn)情況下以宮格布局推薦影片。前段時間在打開時發(fā)現(xiàn)了一個臨時設(shè)計表達(dá)，保持當(dāng)前結(jié)構(gòu)布局不變，放大了圖片填充和推薦影片，整張畫面填充宮格，視覺張力十足。該設(shè)計表達(dá)既不會干擾當(dāng)前布局，也能強化推薦影片的曝光度，解決方案值得探索。
九、可以晃動的 Banner 圖
Banner 可以在創(chuàng)意、造型、互動形式等方面進(jìn)行設(shè)計發(fā)揮，也呈現(xiàn)了許多優(yōu)秀的方案，產(chǎn)品設(shè)計師也在不斷嘗試更多的可能性。
最近在體驗盯潮 App 時，發(fā)售欄目頂部 Banner 圖設(shè)計引人關(guān)注。當(dāng)用戶左右晃動手機時，Banner 圖背景層不動，而文案和產(chǎn)品等元素層會跟著晃動的頻率左右移動?？梢曰蝿拥?Banner 圖非常有意思，成功地吸引了用戶的關(guān)注度和點擊欲。
十、場景感的底部標(biāo)簽欄設(shè)計
底部標(biāo)簽欄設(shè)計可以在背景、造型、圖標(biāo)等元素中發(fā)揮，其中圖標(biāo)設(shè)計中的發(fā)揮相對更多一些，在背景和造型層面的案例較少，不過最近也發(fā)現(xiàn)了一個解決方案。
在體驗云游萬里長城小程序時，進(jìn)入之后的小程序底部標(biāo)簽欄設(shè)計結(jié)合了長城墻面和結(jié)構(gòu)，非常有場景代入感。設(shè)計了深色版和淺色版，圖標(biāo)造型設(shè)計也融入了長城元素，不失為一種優(yōu)秀的差異化設(shè)計探索。
小結(jié)
希望本期的分享可以開啟大家更多設(shè)計思維，從優(yōu)秀的設(shè)計方案中發(fā)現(xiàn)設(shè)計的軌跡，復(fù)用到后期的項目設(shè)計中。本文描述屬于個人理解和總結(jié)，不足之處歡迎大家留言補充，我們互相進(jìn)步。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
形狀設(shè)計可以影響整個界面的視覺效果。通過選擇適當(dāng)?shù)男螤詈团帕蟹绞?，可以?chuàng)造出令人愉悅、易于使用和富有吸引力的界面。
在UI設(shè)計中，形狀設(shè)計是一個至關(guān)重要的環(huán)節(jié)。對其選擇和排列會直接影響到界面的美觀度和用戶的交互體驗。接下來將詳細(xì)探討UI設(shè)計中的形狀設(shè)計，包括其重要性、基本原則和實際應(yīng)用。
形狀可以幫助用戶理解和操作界面。一個優(yōu)秀的形狀設(shè)計應(yīng)該具有清晰、簡潔和易于理解的特點，我們在平時做設(shè)計中，需要將這些原則深入到每一個細(xì)節(jié)中。
在設(shè)計中，形狀的識別和理解是至關(guān)重要的。一個成功的形狀設(shè)計應(yīng)該能夠快速地被用戶識別并理解。例如，一個常見的形狀可以使用不同的顏色和大小來區(qū)分主要內(nèi)容和次要內(nèi)容，從而引導(dǎo)用戶的注意力。
1、形狀的一致性
在UI設(shè)計中，一致性是一個非常重要的原則。一個好的形狀設(shè)計應(yīng)該在整個應(yīng)用程序中保持一致，從而使用戶可以輕松地導(dǎo)航和操作。例如，閑魚APP里的所有的按鈕可以使用相同的形狀和顏色，以便用戶可以輕松地識別并操作。
2、形狀的個性化與品牌識別
一個獨特的形狀設(shè)計可以幫助品牌在競爭激烈的市場中脫穎而出。一個好的形狀設(shè)計應(yīng)該能夠體現(xiàn)品牌的個性和價值觀，從而增強品牌的識別度。使用獨特的圖標(biāo)和標(biāo)志來傳達(dá)其品牌形象和價值觀。例如：小米的logo、京東狗、淘寶天貓。
1、按鈕設(shè)計
按鈕是UI設(shè)計中最重要的元素之一。一個好的按鈕設(shè)計應(yīng)該具有清晰的形狀和易于理解的標(biāo)簽。
按鈕形狀主要有直角、小圓角、全圓角三種樣式。
① 直角按鈕具有嚴(yán)謹(jǐn)、力量、高端的特點，適用于大牌美妝、奢侈品類產(chǎn)品；
② 小圓角按鈕具有穩(wěn)定、中性的感覺，適用于用戶跨度較大的常規(guī)類產(chǎn)品中，例如微信、滴滴、抖音等；
③ 全圓角按鈕更加溫和、親切，適用于電商類和兒童類的產(chǎn)品中。
按鈕尺寸和比例根據(jù)iOS和Android的規(guī)范，按鈕尺寸至少高于5.5毫米（36 pt），否則用戶點擊時會較為困難。同時，按鈕長度固定，文字長度變化或是按鈕長度根據(jù)文字長短而變化的設(shè)計方式也需要考慮文字距離按鈕上下左右邊距的比例關(guān)系。
總的來說，UI中按鈕形狀的設(shè)計需要結(jié)合具體的產(chǎn)品屬性和界面風(fēng)格，以及用戶的使用習(xí)慣來進(jìn)行綜合考慮。
2、圖標(biāo)設(shè)計
圖標(biāo)是UI設(shè)計中另一種重要的具有高度概括性和視覺傳達(dá)性的小尺寸圖像元素?？梢詭椭脩艨焖俚刈R別和理解功能和信息，是靠文案無法實現(xiàn)的。
例如，天氣圖標(biāo)通過其形狀、色彩和設(shè)計元素直觀地傳達(dá)不同的天氣狀況和氣象信息，幫助人們更好地了解天氣狀況。又如衛(wèi)生間男女圖標(biāo)的設(shè)計讓人們易于識別和理解。
在UI設(shè)計中，圖標(biāo)的圓角度通常是怎么定義的呢？
① 大圓角：應(yīng)用在以圓潤、可愛為主要風(fēng)格的UI設(shè)計中，以營造出更加柔和、親切的視覺效果。
② 小圓角：小圓角作為一種微妙的細(xì)節(jié)元素，可以增加圖標(biāo)的層次感和細(xì)節(jié)。在追求設(shè)計質(zhì)感的界面中，適當(dāng)添加小圓角可以使圖標(biāo)更加精致和有品質(zhì)感。
③ 無圓角：應(yīng)用在科技或現(xiàn)代感的UI設(shè)計中，以營造出更加硬朗、冷峻的視覺效果。但使用需要克制，過多的直角可能會讓整個界面顯得生硬和冷感。
補充一點，我發(fā)現(xiàn)一個重要細(xì)節(jié)，就是很多人在計算內(nèi)圓角數(shù)值時都存在困擾。自工作以來，我注意到這個問題影響了很多人，他們不知道如何正確地計算內(nèi)圓角的數(shù)值。為了解決這個問題，通過以下方式幫助大家更好地掌握計算內(nèi)圓角數(shù)值的方法。
3、輸入框設(shè)計
輸入框是用戶輸入信息的重要區(qū)域。在UI設(shè)計中，輸入框的形狀設(shè)計可以根據(jù)實際需求和設(shè)計風(fēng)格進(jìn)行變化。以下是一些常見的輸入框形狀設(shè)計：
① 方型輸入框：這是最常見的輸入框形狀，它以方形的形式呈現(xiàn)，可以在其中輸入文本或信息。這種設(shè)計簡單明了，易于使用，適用于大多數(shù)場景。
② 圓角矩形輸入框：這種輸入框在四個角上采用了圓角設(shè)計，使得整個輸入框看起來更加柔和、友好。這種設(shè)計在一些需要強調(diào)用戶輸入的場景下較為常見。
③ 下拉菜單輸入框：這種輸入框可以讓用戶從下拉菜單中選擇一個選項，而不是直接在文本框中輸入。這種設(shè)計適用于一些固定選項的場景，可以減少用戶的輸入操作。
④ 按鈕式輸入框：這種輸入框?qū)⑤斎肟蚝桶粹o結(jié)合在一起，用戶可以點擊按鈕來輸入信息。這種設(shè)計適用于一些需要強調(diào)點擊操作的場景，例如站酷的登錄。
⑤ 語音識別輸入框：這種輸入框允許用戶通過語音來輸入信息，而不是手動輸入。這種設(shè)計適用于一些需要快速輸入或不方便手動輸入的場景，例如駕車、寫字等。
總的來說，輸入框的形狀設(shè)計應(yīng)根據(jù)實際需求和設(shè)計風(fēng)格來進(jìn)行選擇，同時也要考慮用戶的使用習(xí)慣和操作體驗。
4、導(dǎo)航欄設(shè)計
導(dǎo)航欄是UI設(shè)計中重要的組成部分之一。它幫助用戶在不同的頁面之間進(jìn)行切換和導(dǎo)航。在設(shè)計導(dǎo)航欄時，應(yīng)考慮其位置、顏色和形狀等因素。以下是一些常見的導(dǎo)航欄形狀設(shè)計：
① 頂部導(dǎo)航欄：這是最常見的導(dǎo)航模式，位于頁面頂部，可以包含網(wǎng)站的名稱、主要的導(dǎo)航選項、搜索框等元素。這種設(shè)計簡單明了，易于使用，適用于大多數(shù)場景。
② 側(cè)邊導(dǎo)航欄：這種導(dǎo)航模式位于頁面左側(cè)，通常用于二級導(dǎo)航或輔助導(dǎo)航。側(cè)邊導(dǎo)航欄可以以垂直或水平方向呈現(xiàn)，根據(jù)實際需求進(jìn)行選擇。
③ 底部導(dǎo)航欄：這種導(dǎo)航模式位于頁面底部，通常用于一級目錄的導(dǎo)航。底部導(dǎo)航欄可以包含網(wǎng)站的名稱、主要的導(dǎo)航選項、搜索框等元素。這種設(shè)計操作方便，用戶體驗好，適用于大多數(shù)場景。
④ 彈出式導(dǎo)航欄：這種導(dǎo)航模式通常用于移動端應(yīng)用，通過點擊或滑動屏幕上的按鈕或圖標(biāo)來喚出導(dǎo)航菜單。彈出式導(dǎo)航欄可以以垂直或水平方向呈現(xiàn)，根據(jù)實際需求進(jìn)行選擇。
總的來說，導(dǎo)航欄的形狀設(shè)計應(yīng)根據(jù)實際的導(dǎo)航模式和設(shè)計風(fēng)格來進(jìn)行選擇，同時也要考慮用戶的使用習(xí)慣和操作體驗。好的導(dǎo)航設(shè)計應(yīng)該簡單明了、易于使用，能夠提供清晰的信息架構(gòu)和層級關(guān)系，幫助用戶快速找到所需內(nèi)容。
5、作為底紋設(shè)計
將形狀用作底紋，可以增加圖形的視覺層次感和趣味性。尤其是當(dāng)使用如圓圈、條紋、曲線等形狀時，可以使底紋呈現(xiàn)出動態(tài)感和動感。
也可以強調(diào)文字或圖片中的某些元素，用來引導(dǎo)觀者的視線，以創(chuàng)造出視覺焦點。比如，在一個沉悶的黑色背景上使用鮮艷的彩色形狀作為底紋，可以將觀者的注意力集中在那些形狀上。
但是，必須著重強調(diào)的是，底紋的使用應(yīng)當(dāng)與整體的設(shè)計風(fēng)格和主題相得益彰。若應(yīng)用不當(dāng)，可能會對畫面的整體美感產(chǎn)生破壞性的影響。因此，在決定是否使用底紋時，必須慎重考慮其與整體設(shè)計的和諧度。
1、動態(tài)形狀設(shè)計
隨著技術(shù)的不斷發(fā)展，動態(tài)形狀設(shè)計已經(jīng)成為一種趨勢。通過使用動畫和過渡效果，可以創(chuàng)建更具吸引力和互動性的界面。例如，使用漸變效果來平滑地轉(zhuǎn)換不同的頁面或狀態(tài)。
2、3D和立體形狀設(shè)計
3D和立體形狀設(shè)計為UI設(shè)計師提供了更多的可能性。通過使用陰影、光照和深度效果，可以創(chuàng)建更立體、更有層次感的界面。例如，使用3D旋轉(zhuǎn)效果來突出主要內(nèi)容或使用陰影效果來增加界面的深度感。
3、可定制形狀設(shè)計
隨著用戶對個性化需求的不斷增加，可定制的形狀設(shè)計變得越來越重要。用戶希望根據(jù)自己的喜好和需求來調(diào)整界面。例如，允許用戶自定義選擇自己喜歡的頁面主題風(fēng)格。
在UI設(shè)計中，精美形狀設(shè)計的關(guān)鍵是深入理解用戶需求，注重細(xì)節(jié)，保持一致性，勇于創(chuàng)新，不斷提高技能水平。這樣才能創(chuàng)造符合用戶口味的界面，提升用戶體驗。簡潔地說，好的形狀設(shè)計來源于用戶需求、細(xì)節(jié)、一致性、創(chuàng)新和自我提升。
以上總結(jié)僅代表個人觀點，如有不足歡迎大家補充互相進(jìn)步。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
那么什么才是對企業(yè)和用戶最有效的？什么情況下把所有的信息直接呈現(xiàn)比逐漸呈現(xiàn)信息更加合理？
網(wǎng)頁 ( Web ) 和應(yīng)用 ( App ) 雖然不能像報紙一樣折疊起來，但將重要信息顯示在頁面重要位置的案例依然存在。有的企業(yè)仍然希望讀者能一眼看到所有東西，就像在你面前說全都在這里，我們稱之為主頁體驗當(dāng)中的“藍(lán)色藥丸”。還有一種主頁體驗被稱為“紅色藥丸”，例如 Facebook 的無限卷軸，就像一粒神奇的藥丸，可以讓你無限投入其中。那么什么才是對企業(yè)和用戶最有效的？什么情況下把所有的信息直接呈現(xiàn)比逐漸呈現(xiàn)信息更加合理？
這取決于你的企業(yè)想要達(dá)到的目標(biāo)。你是希望你的訪客去選擇他們自己想要的內(nèi)容（ 例如 TED 演講 ) ，還是你想要幫他們作出選擇（ 例如 Netflix ）？也可能無需涉及任何決定，你希望人們因為好玩而在你的主頁上長久地停留（ 例如 Pinterest ）。你的商業(yè)目標(biāo)將會幫助你決定主頁內(nèi)容將持續(xù)多長時間：
如果你想要你的客戶自己去決定，就提供他們藍(lán)色藥丸。在頁面中直接展示所有選項，那么故事就結(jié)束了。
如果他們想要一個驚喜，那么紅色藥丸就是最好的選擇。就像在仙境中無限探索，向他們展示這兔子洞有多深。
如果你想為你的客戶選擇所需的路徑，那么請在無限卷軸中編織一個扣人心弦的故事，讓他們沉浸在你為他們優(yōu)先安排的體驗當(dāng)中。
你希望你的訪客首先選擇他們想要的。只有這樣，你才能更加深入的了解他們所選擇的道路。
這取決于你的企業(yè)正在努力要實現(xiàn)的目標(biāo)。什么情況下讓訪客先做決定比較合理？
你仍然可以幫助人們作出正確的選擇。關(guān)鍵點就是不要過早的深入細(xì)節(jié)，也不要挑出最喜歡的。盡管會巧妙的突出其中一個，但依然要將所有的選項以直觀的、無優(yōu)先級的、單一視圖的形式呈現(xiàn)給客戶。
你希望創(chuàng)造一個充滿了偶然性探索和發(fā)現(xiàn)的體驗旅程，就如愛麗絲準(zhǔn)備進(jìn)入兔子洞。你的用戶不需要去尋找任何具體的內(nèi)容，也沒有詳細(xì)的目標(biāo)或特定的規(guī)則，無限卷軸就是這里的答案，用戶可以沉浸在內(nèi)容的海洋里。就像 Pinterest 和 Facebook 這樣的網(wǎng)站，伴隨著大量用戶生成的內(nèi)容而使用無限卷軸。
盡管驚喜是主旨，但是人們依舊需要時間感和空間感。一方面，用戶必須知道還存在多少信息，即使它正在下載；另一方面，用戶必須知道他們所在的位置，這樣更容易向兩個方向?qū)Ш剑?前進(jìn)或后退 ）。如果你的目標(biāo)只是為你的客戶安排一個旅程的優(yōu)先級而不是一個無止境的旅程，那么你該怎么辦?我們需要第三個藥丸.....
綠色藥丸主頁 —— 長卷軸
你希望為訪客們安排一條線性路徑的優(yōu)先級，你為他們省去了選擇的麻煩。想象一下你的衣櫥是根據(jù)你今天要穿什么來安排的，還是為你即將到來的旅行計劃來安排的?
在什么情況下這是一個好的主意?
圖片來源：http://www.rleonardi.com/interactive-resume/
長卷軸在你的內(nèi)容里提供了一個連續(xù)的、自然流動的節(jié)奏?；叵胍幌履阍陂喿x紙質(zhì)書時獲得的樂趣，在鼠標(biāo)上輕輕滾動或按下小鍵盤就像翻頁一樣，它是毫不費力的、自然的和無干擾的，前進(jìn)和后退都很容易。當(dāng)然，你的故事需要足夠扣人心弦才能讀到高潮。你的觀點有多連貫和一致，這將決定你故事的線性流程。交叉引用或任何干擾都會打亂流程。即使你正在為你的訪客們推廣一條線性路徑，但是也不要忘記為其他可選擇的項目提供一個附屬選項?？傆幸恍┤藭x擇很少有人走的路。
決定在于內(nèi)容的廣度，就像沉浸感是內(nèi)容的深度。最大的問題是你希望你的主頁有多寬和多深。
作者：三分設(shè)
鏈接：https://www.zcool.com.cn/article/ZMTQyOTQxNg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
對于很多設(shè)計師來講在設(shè)計界面過程中往往會忽略掉很多的細(xì)節(jié)，比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等，特別是剛?cè)胄械脑O(shè)計師在做頁面時往往是直接拿到競品的頁面搬運到自己產(chǎn)品上，這種做法理論上不會讓自己的頁面出錯，但是很多人往往忽略了一點，就是別人這么設(shè)計的目標(biāo)是什么，是否會匹配自己的設(shè)計目標(biāo)，如果不了解這些貿(mào)然的去搬運設(shè)計，那么時間久了會養(yǎng)成一個不好的習(xí)慣，需要設(shè)計師去進(jìn)行設(shè)計時可能就會遇到很多難點，作為初級設(shè)計師或者剛?cè)胄械脑O(shè)計師，前期可以去進(jìn)行搬運設(shè)計，但是一定要了解別人為什么這么做。
接下來將分享12個設(shè)計上的小技巧，大部分在日常設(shè)計中都會遇到，了解到這些設(shè)計細(xì)節(jié)，可以讓我們的界面更加高效、易用、美觀提升用戶體驗。
一、快捷交互
二、提升交互路徑
三、問題前置
四、提升可讀性
五、點擊引導(dǎo)
六、注意飽和度
七、禁止特殊字體
八、按鈕也要有層級
九、圖標(biāo)保持一致
十、利用對比
十一、圖文疊加
十二、注意遮罩透明
我在做界面時可以時常利用交互手勢去幫助用戶提升操作效率，避免繁雜小操作步驟
左側(cè)為什么錯？？
左圖中針對單條消息的操作匯聚到了icon內(nèi)，對于用戶理解成本比較高，當(dāng)用戶想要去刪除或者屏蔽消息時需要通過聚合入口才能完成操作，大大的提升了用戶操作成本。
建議正確做法～～
我們可以在類似的消息場景或者其他列表形式的場景中，添加一些交互手勢，隨著手機系統(tǒng)的更新，用戶的操作習(xí)慣已經(jīng)被各大產(chǎn)品培養(yǎng)的非常成熟，并不用擔(dān)心用戶無法操作的情況，增加手勢有弊端也有優(yōu)勢，右圖中手勢增加了用戶首次使用的學(xué)習(xí)成本，但是降低了高頻功能的操作成本，這個理論上是可以接
受的。
實際產(chǎn)品中的運用
利用拇指定律把關(guān)鍵的操作入口元素等，放置右側(cè)提升用戶操作效率。
左側(cè)為什么錯？？
左圖中把按鈕放置了模塊左下側(cè)，這樣是不利于用戶進(jìn)行操作，當(dāng)然如果整個模塊的熱區(qū)都是同一個，這樣并沒有什么問題，用戶點擊卡片區(qū)域任何位置都能夠完成下一步操作，如果出現(xiàn)一個模塊內(nèi)存在多個熱區(qū)入口，而用戶想要到達(dá)目標(biāo)必須通過按鈕點擊才能進(jìn)入，那么左圖中的排版位置就會提升用戶的操作時間。
建議正確做法～～
當(dāng)一個頁面內(nèi)出現(xiàn)多個相同模塊或者一個模塊出現(xiàn)多個熱區(qū)入口時，按鈕點擊區(qū)域有限，我們設(shè)計時就可以利用拇指定律進(jìn)行排版，如右圖中布局，將按鈕放置右側(cè)可以便于用戶在右手操作時快速到達(dá)目標(biāo)，因為國內(nèi)使用右手的人數(shù)遠(yuǎn)遠(yuǎn)大于左手用戶，所以我們需要滿足大部分的體驗，合理利用拇指定律。
相關(guān)定律：費茲定律、拇指定律
實際產(chǎn)品中的運用
對于我們來講很多東西是簡單的，但是不乏會有一些用戶是陌生的，對于他們來講可能會有填寫成本。
左側(cè)為什么錯？？
左圖中理論上并不是錯，我們經(jīng)常設(shè)計表單時都會用的提示話術(shù)，但是我們需要考慮更多維度的東西，對于我們來講填寫這種表單非常簡單，例如個別用戶，可能會臨時忘了郵箱格式，又或者輸入手機號時多填了一位數(shù)等等情況，用戶錯誤一次操作步驟就會多一步，反之就是降低使用產(chǎn)品時的體驗。
建議正確做法～～
如右圖中，我們設(shè)計時可以更改提示的話術(shù)，幫助用戶把問題前置，當(dāng)用戶看到提示郵箱時就會按照格式去填寫，通過把手機號的位數(shù)拆分，讓用戶更好的記憶數(shù)字，這樣無論對產(chǎn)品還是用戶都沒有任何損失，反而能降低錯誤頻率。
實際產(chǎn)品中的運用
無論是頁面還是模塊，用戶在閱讀時是已掃讀的方式進(jìn)行瀏覽，我們需要保證頁面的文字元素具備一定的規(guī)律，以此來提升閱讀效率。
左側(cè)為什么錯？？
左圖中可以看到，文字與輸入框放在同一列進(jìn)行展示，這樣一方面不利于后續(xù)的文字?jǐn)U展，通常這種表單填寫的頁面，在頁面中都是具有很大的空間位置，這樣排布會造成視覺上的不規(guī)律和擁擠，降低了篩選效率，當(dāng)然如果是模塊區(qū)域很小的情況下，可以適當(dāng)?shù)倪M(jìn)行使用。
建議正確做法～～
右圖中我們把文字與輸入?yún)^(qū)域上下排布，雖然文字長短不一，但依據(jù)對齊原則在豎列情況看是具備對齊規(guī)律的，有效的提升信息篩選效率。
實際產(chǎn)品中的運用
我們在做系統(tǒng)功能模塊時需要注意添加功能點擊引導(dǎo)，用戶對此類消息模塊認(rèn)知上會默認(rèn)不可點擊，因此需要我們加以引導(dǎo)。
左側(cè)為什么錯？？
我們常見的消息模塊內(nèi)容為兩種，一種是互動類消息即用戶與用戶，另一種時是系統(tǒng)消息即產(chǎn)品推送的內(nèi)容，前者基于用戶習(xí)慣而言用戶已經(jīng)沒有使用成本默認(rèn)是可以進(jìn)行點擊交互，后者因為部分產(chǎn)品會把系統(tǒng)消息作為展示的形式給用戶，但是有些產(chǎn)品的系統(tǒng)消息卻是可以點擊交互，這就導(dǎo)致了用戶認(rèn)知上出現(xiàn)了混亂，左圖中像系統(tǒng)通知功能通知其實從視覺上看，并不具備點擊欲望，因此可能會對用戶造成錯誤的理解。
建議正確做法～～
當(dāng)我們在設(shè)計時需要注意，若消息列表中存在系統(tǒng)類消息并且可以進(jìn)行交互，在設(shè)計時可以添加向箭頭、紅點提示等方式告知用戶可以點擊，如果該功能有數(shù)據(jù)指標(biāo)，這種方式也同樣能賦能產(chǎn)品指標(biāo)。
實際產(chǎn)品中的案例
目前市場上產(chǎn)品幾乎都有深色版本，我們在設(shè)計時深色版本的顏色時需要注意飽和度的高低，同樣的飽和度在黑色背景上會比白色背景上更加亮，這跟人的視覺感官有很大的關(guān)系，因此我們在做黑色版本時需要注意是否調(diào)整飽和度。
左側(cè)為什么錯？？
在黑色背景中使用過高的飽和度會刺激眼睛，很多深色版本都是從白色模式通過反向顏色直接調(diào)整，而彩色元素會直接運用到深色中，那么就會造成一個問題，因為我們習(xí)慣在白色模式下看顏色，忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開手電筒”，對眼睛的傷害很高。
建議正確做法～～
我們在設(shè)計深色版本時可以根據(jù)產(chǎn)品主色降低飽和度，包括圖標(biāo)等元素，以此來緩沖對用戶視覺感官的刺激，目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進(jìn)行處理，這樣無需在添加更多的顏色規(guī)范。
實際產(chǎn)品中的案例
在設(shè)計模塊或者頁面時不建議使用特殊字體來突出文字層級，這樣會導(dǎo)致視覺不統(tǒng)一，以及開發(fā)成本增加。
左側(cè)為什么錯？？
左圖中灰色字使用了特殊字體，看起來雖然好看，但在實際開發(fā)中會導(dǎo)致開發(fā)成本增加，我們產(chǎn)品一般使用的是系統(tǒng)字體，若使用特殊字體需要讓開發(fā)同學(xué)添加對應(yīng)字體包，這樣會導(dǎo)致我們的產(chǎn)品包的內(nèi)存過大，除非產(chǎn)品中默認(rèn)一直使用該特殊字體，這樣才有使用的價值。
建議正確做法～～
一般系統(tǒng)字體就能夠滿足我們的設(shè)計需求，在UI設(shè)計中我們可以通過不同的字體粗細(xì)來調(diào)整文字層級，這樣能夠保證視覺更加統(tǒng)一，減少產(chǎn)品包大小。
實際產(chǎn)品中的案例
在設(shè)計時需要注意多個入口在同一位置時，需要把它們進(jìn)行層級劃分，避免影響用戶決策
左側(cè)為什么錯？？
圖中可以看到，兩個面性按鈕非常明顯的在模塊中，當(dāng)用戶在瀏覽頁面中很容易出現(xiàn)困惑，到底需要點擊哪個才能購買預(yù)定，因為兩個都是面性無法快速進(jìn)行定位入口，這樣不僅影響用戶決策效率，還會影響產(chǎn)品點擊率。
建議正確做法～～
建議設(shè)計類似模塊中時，無論是pc還是移動端都需要對入口進(jìn)行結(jié)構(gòu)劃分，這樣能夠使用戶在瀏覽頁面時快速定位到入口，提升決策效率，做體驗是解決用戶的思考時間。
實際產(chǎn)品中的案例
在UI設(shè)計中使用圖標(biāo)時，要保持一致性，確保他們共有相同的視覺風(fēng)格，相同的重量，填充和描邊。不要混搭。
左側(cè)為什么錯？？
可以看到左圖中的圖標(biāo)并不統(tǒng)一，線性里面摻雜著面性點綴，這在UI設(shè)計中嚴(yán)重違背了一致性的原則，會導(dǎo)致我們的頁面不夠嚴(yán)謹(jǐn)專業(yè)。
建議正確做法～～
在設(shè)計圖標(biāo)時，首先要保證圖標(biāo)風(fēng)格一致，其次在這個基礎(chǔ)上保證圖標(biāo)的描邊粗細(xì)、視覺占比重量、顏色等，不要出現(xiàn)混搭風(fēng)格。
實際產(chǎn)品中的案例
在設(shè)計頁面模塊時，可以多利對比度的方式來體現(xiàn)設(shè)計的表現(xiàn)力，鮮明直接的色值能夠直接表達(dá)事物的性質(zhì)以及特點，通過對比，也能夠更加清晰的強調(diào)設(shè)計中的重點，這樣給用戶的印象會更深刻，同樣會給產(chǎn)品帶來一定的趣味性。
左側(cè)為什么錯？？
左圖中單看視覺也沒問題，只是在表現(xiàn)上圖標(biāo)與背景融入到一塊了，導(dǎo)致視覺表現(xiàn)力較差，在設(shè)計中如果符合產(chǎn)品風(fēng)格的前提下，我們可以避免這種方式，這種方式雖然具有視覺效果但不夠強，對用戶的記憶點不夠深刻。
建議正確做法～～
設(shè)計到類似的模塊時我們可以利用對比的關(guān)系，以此突出視覺元素，通過顏色焦點引導(dǎo)用戶關(guān)注，強化用戶印象同時還能增加頁面的視覺表現(xiàn)力和氛圍感。
實際產(chǎn)品中的案例
在設(shè)計圖文疊加的卡片或者頁面時，我們需要注意不同明度的圖片上，文字識別是否有阻礙，一般情況會通過遮罩方式避免這個情況。
左側(cè)為什么錯？？
左圖中在深色圖片下字體的可讀性是沒有問題的，但當(dāng)出現(xiàn)文字底部區(qū)域的圖片相對復(fù)雜時便會影響識別，第二種情況當(dāng)圖片明度過高時文字同樣無法識別，試想一下，一張白色調(diào)性的圖片上放文字，那基本無法看清，嚴(yán)重影響閱讀體驗。
建議正確做法～～
在界面設(shè)計時如果遇到類似的卡片，建議在文字區(qū)域添加漸變遮罩的方式，以此保證文字的識別度，或者添加純黑色透明遮罩進(jìn)行處理，這樣可以兼容不同環(huán)境的圖片與文字的重疊，保證基本的閱讀體驗。
實際產(chǎn)品中的案例
UI設(shè)計中經(jīng)常會遇到彈窗，彈窗是需要配合頁面遮罩來讓用戶進(jìn)行專注操作，不同的遮罩透明度所帶來的專注度也不同。
左側(cè)為什么錯？？
左圖中我們看到，遮罩的透明度過低，我案例設(shè)置的是17%，此時彈窗內(nèi)容與頁面內(nèi)容結(jié)構(gòu)上區(qū)分并不是很明顯，一般彈窗是用來讓用戶跳脫頁面內(nèi)容，從而瀏覽彈窗內(nèi)容，轉(zhuǎn)變用戶目標(biāo)，當(dāng)彈窗無法聚焦時便很難達(dá)到目標(biāo)，并且視覺上層級更加混亂。
建議正確做法～～
右圖中案例我把透明度調(diào)整到了37%，我們此時再看彈窗很容易就忽略頁面內(nèi)容，因為灰色越高，遮擋度越高，用戶跳脫感就越強，這樣我們可以讓用戶專注彈窗內(nèi)容，同時視覺結(jié)構(gòu)上也區(qū)分很明顯。
實際產(chǎn)品中的案例
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
企業(yè)多產(chǎn)品線模式下，UI體驗文化打造、UI設(shè)計質(zhì)量品控5個方面闡述項目快速、規(guī)模化提升多產(chǎn)品線整體體驗中的方法論和實踐經(jīng)驗。
SaaS 產(chǎn)品體驗要求越來越高，用戶體驗已經(jīng)成為產(chǎn)品競爭力的重要組成部分，怎樣在多業(yè)務(wù)線的產(chǎn)品環(huán)境中做好體驗設(shè)計，本文從貼合業(yè)務(wù)線的設(shè)計規(guī)范、敏捷易用的前端組件庫、產(chǎn)品研發(fā)協(xié)作流程保障、UI體驗文化打造、UI設(shè)計質(zhì)量品控5個方面闡述項目快速、規(guī)?；嵘喈a(chǎn)品線整體體驗過程中方法論和實踐經(jīng)驗。
關(guān)鍵詞：
用戶體驗設(shè)計；UI設(shè)計規(guī)范；多產(chǎn)品線；體驗文化；UI設(shè)計落地
面對多產(chǎn)品體系，多產(chǎn)品線，需要積極尋找和探索適合我們客觀情況的最佳實踐，我們面臨的問題有：
1.過往以功能堆砌為主、基本“能用”，缺乏平臺規(guī)范和一致性，體驗不足。
2.產(chǎn)品線多、體量大。
3.客戶對產(chǎn)品體驗要求越來越高。
4.產(chǎn)品歷史包袱、修復(fù)改動困難。
5.對用戶體驗認(rèn)知不一，協(xié)同、溝通成本高。
6.重復(fù)的開發(fā)成本。
7.第三方組件與業(yè)務(wù)的匹配度不佳。
解決以上幾大難題，我們啟動了UI 設(shè)計規(guī)范的搭建、UI組件庫的開發(fā)等，讓規(guī)范和組件庫成為各產(chǎn)品線堅實底座的一部分，使用戶體驗文化賦能前端和產(chǎn)品經(jīng)理，協(xié)同 QA 力量一起推動產(chǎn)品體驗升級，以下整理分享的實踐方法適用于中小型UED團隊支撐復(fù)雜、多業(yè)務(wù)線的企業(yè)，本文嘗試從以下幾個方面總結(jié)和提煉實踐經(jīng)驗，跟業(yè)界同行探討。
設(shè)計規(guī)范體系的搭建對于新的團隊，如何從復(fù)雜海量的業(yè)務(wù)場景中制定出一套適用于自己產(chǎn)品的UI設(shè)計規(guī)范，是第一道待翻越的高墻，完整的設(shè)計規(guī)范應(yīng)該是包含視覺規(guī)范與交互規(guī)范，本文主要針對設(shè)計規(guī)范實踐過程進(jìn)行闡述。
貼合場景的設(shè)計規(guī)范：
雖然市面上已經(jīng)有眾多成熟的設(shè)計規(guī)范體系可供使用，但是當(dāng)前我們所處的產(chǎn)品階段、多業(yè)務(wù) 線以及復(fù)雜的業(yè)務(wù)場景等綜合因素，決定了需要重新搭建一套符合我們自己業(yè)務(wù)場景的設(shè)計規(guī) 范體系。
UI規(guī)范效益最大化：
一旦我們決定制作規(guī)范，就要把規(guī)范當(dāng)成一個產(chǎn)品去做。去梳理一套高效合理、可復(fù)用的制作流 程，去分析產(chǎn)出什么樣的「規(guī)范產(chǎn)品」才能產(chǎn)生最大的價值。 依據(jù)規(guī)范效益模型，在規(guī)范的制定中盡可能的提高規(guī)范的通用性至90%，先解決統(tǒng)一性，再解決場景細(xì)分，打造高質(zhì)量通用的模式庫以提高質(zhì)量和效率，并力求讓更多人從這套設(shè)計體系中獲益， 從而讓規(guī)范體系發(fā)揮更大的價值。
UI規(guī)范制定的策略：
明確用戶對設(shè)計規(guī)范的訴求，構(gòu)建適合產(chǎn)品的UI設(shè)計規(guī)范，首先，需要明確規(guī)范體系的用戶群體經(jīng)過設(shè)計團隊多輪調(diào)研，確定設(shè)計規(guī)范面向的目標(biāo)用戶群、基于核心用戶的訴求，為后續(xù)規(guī)范內(nèi)容框架的制定提供依據(jù)。
確定UI設(shè)計價值觀：
產(chǎn)品歷史包袱重，系統(tǒng)結(jié)構(gòu)復(fù)雜，在提升用戶體驗時，內(nèi)容表達(dá)「清晰明確」是第一要務(wù)，例如尊重已經(jīng)形成的用戶習(xí)慣，優(yōu)化改造時，注意版本之間的銜接，讓用戶「清晰明確」，這也是為什么將「清晰明確」作為價值觀之首，另外提升效率是企業(yè)級產(chǎn)品用戶體驗的永恒主題，同時兼顧系統(tǒng)的簡潔與一致。
梳理UI規(guī)范框架：
UI設(shè)計規(guī)范包括設(shè)計價值觀、全局規(guī)則、組件庫、模式庫、典型頁面、移動端規(guī)范和設(shè)計資源框架整理主要從以下3個方面進(jìn)行：
1.梳理現(xiàn)有組件，剔除不使用的部分 。?
2.同類競品的框架借鑒，查漏補缺。 ?
3.場景驗證，與業(yè)務(wù)場景深度結(jié)合經(jīng)過充分論證和梳理，對規(guī)范框架做了重新定義，增補了業(yè)務(wù)缺少的內(nèi)容。
如上圖所示，例如對高頻的工具欄組件的補充，典型頁面的補充，增加模式庫以及全局規(guī)則，當(dāng)前第一個版本的規(guī)范框架是基于業(yè)務(wù)場景優(yōu)先級最高的內(nèi)容進(jìn)行制定，更多的規(guī)范內(nèi)容的增加依托于不斷的迭代，逐漸完善規(guī)范框架。
規(guī)范內(nèi)容的制定及評審：
組件規(guī)范包含：變更記錄、組件定義、何時使用、組件的類型、組件的響應(yīng)。
規(guī)范內(nèi)容制定的原則： ?
1.有明確場景可依。?
2.精簡不必要的分支 例如在定義表單規(guī)范時，對于表單標(biāo)簽的對齊方式做了統(tǒng)一的約束，標(biāo)簽右對齊，輸入框左對齊全局保持統(tǒng)一。
邏輯正確、規(guī)則明確易懂： ?
例如常見的alert （警告提示）名稱調(diào)整為常駐提示，語義更貼合場景，便于理解。
規(guī)則的可拓展性，多場景的兼容性： ?
產(chǎn)品架構(gòu)是PC端到移動端的自動適配，因此在組件設(shè)計的時候需同時考慮PC端與移動端的對應(yīng)關(guān)系以及兩端場景的兼容性。
協(xié)作及敏捷迭代： ?
規(guī)范發(fā)布后，伴隨著實際項目的檢驗，業(yè)務(wù)場景的擴充變化，如何高效的對設(shè)計規(guī)范進(jìn)行迭代，決定了設(shè)計系統(tǒng)能否持續(xù)的走得更遠(yuǎn)，規(guī)范內(nèi)容定期評審，必須通過業(yè)務(wù)、技術(shù)、設(shè)計評審，確保規(guī)范是可用的、可落地并且易于使用的規(guī)范后期不同的規(guī)范模塊專屬人負(fù)責(zé)，同時有backup，可以幫助走查復(fù)盤雙重保障規(guī)范的質(zhì)量。
敏捷易用的前端組件庫： ?
復(fù)雜的業(yè)務(wù)場景和多產(chǎn)品線特點，快速打造一套敏捷易用、高質(zhì)量并符合實際業(yè)務(wù)場景的前端組件庫，是提高產(chǎn)品研發(fā)效率、改善UI質(zhì)量、提升用戶體驗的關(guān)鍵。
復(fù)雜的業(yè)務(wù)場景和多產(chǎn)品線特點，快速打造一套敏捷易用、高質(zhì)量并符合實際業(yè)務(wù)場景的前端組件庫，是提高產(chǎn)品研發(fā)效率、改善UI質(zhì)量、提升用戶體驗的關(guān)鍵。
前端組件庫建立目標(biāo)： ?
1.提高開發(fā)效率，對高頻使用、通用組件進(jìn)行代碼化封裝，避免重復(fù)開發(fā)工作。 ?
2.提高開發(fā)質(zhì)量，通過各類業(yè)務(wù)場景和業(yè)務(wù)線的錘煉，沉淀組件代碼最佳實踐。 ?
3.提高產(chǎn)品體驗，組件封裝代碼化，減少在多角色協(xié)同中因為理解偏差、信息傳遞問題等導(dǎo)致的不確定性和結(jié)果不可控性，不同業(yè)務(wù)線、不行項目、共用一套基礎(chǔ)代碼，保證體驗的一致性，組件的組織形式： 結(jié)合實際業(yè)務(wù)場景和原子設(shè)計理論，將組件劃分為不同顆粒度：基礎(chǔ)組件、業(yè)務(wù)組件、典型頁面 組件，以適用于不同研發(fā)場景使用。
1.基礎(chǔ)組件，基礎(chǔ)組件為組件庫最小顆粒度，構(gòu)成系統(tǒng)界面的基本構(gòu)件。 ?
2.業(yè)務(wù)組件，在基礎(chǔ)組件的基礎(chǔ)上，結(jié)合具有共性業(yè)務(wù)特征的業(yè)務(wù)場景，梳理出具有業(yè)務(wù)特征的 業(yè)務(wù)組件。 ? 3.典型頁面組件，梳理具有業(yè)務(wù)特點的典型頁面，相比基礎(chǔ)組件和業(yè)務(wù)組件，典型頁面更加具體， 為用戶提供具有代表性的內(nèi)容和框架，并準(zhǔn)確描述用戶最終看到的內(nèi)容。如列表和左樹右表典型 頁面組件，作為最為常見的頁面結(jié)構(gòu)，各業(yè)務(wù)場景可復(fù)用頁面組件，保證了頁面組件內(nèi)各基礎(chǔ)組 件的一致性，最大程度的實現(xiàn)不同產(chǎn)品線產(chǎn)品中頁面體驗的一致性。
推進(jìn)前端組件庫落地執(zhí)行： ?
前期設(shè)計規(guī)范落地到組件庫過程中，面臨諸多問題和阻礙，比如開發(fā)落地質(zhì)量不高、內(nèi)容遺漏、 各方理解不一致、驗收及修復(fù)問題不到位等問題。處理這些問題對UI團隊資源造成很大消耗， 通過總結(jié)復(fù)盤前期組件庫落地時的經(jīng)驗和教訓(xùn)，梳理落地執(zhí)行流程，在新的協(xié)作流程下，新一 批的組件開發(fā)不論在協(xié)作效率和開發(fā)質(zhì)量上都有質(zhì)的提升。
分層推進(jìn)： ?
組件庫開發(fā)是一個持續(xù)迭代的過程，考慮到組件庫開發(fā)資源極為有限且無專職負(fù)責(zé)人員，在跟組 件庫開發(fā)團隊協(xié)同過程中，我們通過分步開發(fā)來解決組件庫更新優(yōu)化的問題并通過不斷優(yōu)化協(xié)作流程來助力組件庫高效落地。
前端組件庫分步開發(fā)原則： ?
1.優(yōu)先級原則，優(yōu)先開發(fā)適用于業(yè)務(wù)線普適場景的組件。 ?
2.緊急性原則，對于急需的業(yè)務(wù)線所需組件優(yōu)先開發(fā)。 ?
3.快速可實現(xiàn)原則，開發(fā)實現(xiàn)成本高的組件暫緩處理。
自查走查驗收： ?
組件UI責(zé)任人梳理出下屬組件需開發(fā)落地的細(xì)節(jié)點，整理為文檔，待開發(fā)人員完成組件開發(fā)后，自行參照UI提供的自查文檔，查漏補缺，保障進(jìn)入UI驗收環(huán)節(jié)的前端組件不會出現(xiàn)較多的缺陷，降低后期走查和溝通修改的工作量，同時監(jiān)督開發(fā)人員提高組件落地還原度和質(zhì)量。
組件庫的持續(xù)迭代： ?
UI團隊通過一套標(biāo)準(zhǔn)的流程來把控組件庫迭代的質(zhì)量，在日常工作中經(jīng)常會收到產(chǎn)品經(jīng)理或項目 方提出新的組件需求或?qū)ΜF(xiàn)有組件的優(yōu)化。UI部門作為推動組件庫搭建的核心環(huán)節(jié)，需要以全局 和更深入的視角加以判斷把關(guān)，保證前端組件庫內(nèi)容的普適性和高質(zhì)量，避免組件庫內(nèi)容冗余， 降低研發(fā)維護(hù)成本。
產(chǎn)品研發(fā)協(xié)作流程保障： ?
好的過程是好的結(jié)果的有力保障，一個業(yè)務(wù)需求從產(chǎn)生到開發(fā)落地需要經(jīng)過多角色協(xié)同、一系 列環(huán)節(jié)。必須依靠規(guī)范的研發(fā)協(xié)作流程，確保各角色清楚自己職責(zé)以及如何跟上下游銜接，同 時我們也希望協(xié)作流程能夠確保設(shè)計資源可以向重點業(yè)務(wù)模塊傾斜，以及發(fā)揮各個角色可以發(fā) 揮的作用去共同提升產(chǎn)品體驗。
UED團隊建立之初，我們面臨的首要問題是：需求隨機，完全取決于各產(chǎn)品線和產(chǎn)品經(jīng)理 個人，為了解決這個問題，我們制定了UI融入研發(fā)體系的流程以解決合理、有效利用UI資 源的問題。
企業(yè)級產(chǎn)品特點、多業(yè)務(wù)線、大量面向管理員用戶的具有相似頁面結(jié)構(gòu)和交互模式的業(yè)務(wù) 模塊、產(chǎn)品經(jīng)理跟交互團隊人員配比等因素都決定了并非所有需求都需要流轉(zhuǎn)到UI團隊進(jìn) 行設(shè)計，在判斷哪些需求需要流轉(zhuǎn)至UI團隊設(shè)計時，我們給出了如下指導(dǎo)性方向： ?
1.用戶量角度，大量終端用戶使用的場景，例如訂票、報銷、采購頁面 。 ?
2.用戶重要程度角度，核心、重要用戶使用的場景 eg.公司領(lǐng)導(dǎo)、決策層。 ?
3.通用性角度，通用組件或框架，需要UI通盤考慮各個業(yè)務(wù)線場景需求進(jìn)行設(shè)計。 其他需求則主要由產(chǎn)品經(jīng)理進(jìn)行設(shè)計，UX以評審方式輕度參與。
協(xié)作流程迭代，UI驗收成為必要一環(huán)： 隨后我們又面臨新的問題：設(shè)計還原度差，被公司老板生動的形容為：看設(shè)計稿是“精裝修”， 開發(fā)落地后就成了“毛坯房”了。為盡可能確保設(shè)計還原質(zhì)量，我們在研發(fā)流程中明確了所有涉 及前端頁面的功能需求都需要在研發(fā)協(xié)同工具中流轉(zhuǎn)到UI負(fù)責(zé)人驗收，在產(chǎn)品團隊TAPD中記 錄UI缺陷、標(biāo)明嚴(yán)重程度，對于 “嚴(yán)重” 級別以上UI缺陷，禁止發(fā)版。
UI工期評估合理化：
為了既能盡力配合各產(chǎn)品線迭代計劃又要爭取合理UI設(shè)計時間、保證產(chǎn)出質(zhì)量，合理評估設(shè)計周期對UI人力管理尤其重要。對此，我們對設(shè)計需求分成了ABC三級進(jìn)行評估。 對于A和B級需求，通常模塊較大，先有UI設(shè)計方案再去分期迭代開發(fā)，對于這兩類需求，在評估 模型中給出了大致工期概念，比如以月為單位，大于1個月或2個月。
對于C級需求，通常為產(chǎn)品經(jīng)理先排進(jìn)某個迭代再來提UI設(shè)計需求，設(shè)計范圍相對明確，我們則結(jié)合典型頁面數(shù)量因子和設(shè)計難度因子給出了UI工期大概評估公式，以天為單位。 ?
1.設(shè)計難度因子：根據(jù)業(yè)務(wù)線的復(fù)雜程度而定，范圍為（0.8~1.5）。 ?
2.典型頁面數(shù)量因子：評估需求范圍規(guī)模（N）。
UI設(shè)計團隊在協(xié)作過程中面臨諸多挑戰(zhàn)：產(chǎn)品線多、產(chǎn)品邏輯復(fù)雜、研發(fā)鏈路長、各級人員對產(chǎn)品認(rèn)知及重視程度不一、好的體驗設(shè)計難落地、溝通成本高等問題，想要解決這些問題，若僅靠UI團隊自身力量是不夠的，需要動員公司各個環(huán)節(jié)和人員重視用戶體驗，共同促進(jìn)產(chǎn) 品體驗提升。
搭建體驗文化灌溉機制：
UI部門通過多維度的體驗知識內(nèi)容矩陣、多渠道多場景全員覆蓋，普及和加深各級對產(chǎn)品體驗 價值的認(rèn)識，提升產(chǎn)品體驗思考力和洞察力，幫助企業(yè)以新的視角思考業(yè)務(wù)、產(chǎn)品研發(fā)和用戶 體驗的關(guān)系，賦能產(chǎn)品經(jīng)理及研發(fā)人員高質(zhì)量的輸出，“以用戶為中心”和“打造產(chǎn)品極致體驗” 的價值觀根植與企業(yè)文化中，指導(dǎo)研發(fā)流程中各項工作最終影響到產(chǎn)品的戰(zhàn)略層、范圍層、結(jié) 構(gòu)層、框架層和表現(xiàn)層這5個產(chǎn)品體驗維度，以實現(xiàn)企業(yè)產(chǎn)品的“極致產(chǎn)品體驗”目標(biāo)。 通過搭建體驗文化灌溉機制，提升全員體驗意識，能為產(chǎn)品研發(fā)帶來長久的價值： ?
1.提高設(shè)計還原度 ?
2.減少培訓(xùn)成本 ?
3.提升跨部門溝通效率 ?
4.提升UI團隊影響力 ?
5.提升客戶滿意度
體驗文化落地實踐：
針對不同類型的體驗知識，我們采取不同的傳播渠道進(jìn)行透，以期達(dá)到最好的效果，避免形式化， 將體驗文化滲透、學(xué)習(xí)落到實處，最終影響產(chǎn)品研發(fā)的各個環(huán)節(jié)。
以下為UI團隊在企業(yè)體驗文化 推廣的主要渠道和方法： ?
極致體驗公眾號主要發(fā)布產(chǎn)品體驗的基礎(chǔ)原理，體驗價值、項目復(fù)盤、常見體驗問題等深度長文。讓公司各級人 員認(rèn)識用戶體驗及價值，讓用戶體驗理念深入人心。 ?
體驗知識小卡片整理產(chǎn)品體驗小的知識點，閱讀學(xué)習(xí)成本低。利用員工碎片時間，對細(xì)小體驗知識點的學(xué)習(xí)，積 跬步，至千里。 ?
直播宣講針對重點且復(fù)雜的產(chǎn)品體驗內(nèi)容，如交互規(guī)范宣講、重點問題復(fù)盤、產(chǎn)品經(jīng)理及開發(fā)人員應(yīng)知應(yīng) 會的知識點，采用宣講直播的方式，更好的對內(nèi)容進(jìn)行詳細(xì)解說和疑難問題溝通。 ?
體驗調(diào)研分享UI部門成員對核心競品進(jìn)行體驗調(diào)研，整理分析后對產(chǎn)品經(jīng)理及相關(guān)人員進(jìn)行分享，賦能產(chǎn)品經(jīng) 理，為產(chǎn)品的體驗設(shè)計提供新的思路。
UI團隊專業(yè)水平一定程度上決定了公司產(chǎn)品體驗的上限，持續(xù)提升UI自身專業(yè)輸出能力可以從源頭提升公司產(chǎn)品體驗。
設(shè)計自查：
企業(yè)級產(chǎn)品的大量體驗問題都是設(shè)計基礎(chǔ)問題。因此需要設(shè)計師不論在內(nèi)審前，還是內(nèi)審過程中都要牢記設(shè)計原則，查漏補缺，守住底線。我們在部門內(nèi)部制定了一套適合企業(yè)產(chǎn)品的UI自查表來檢查設(shè)計方案，通過這些自查點來避免產(chǎn)品中出現(xiàn)基礎(chǔ)體驗問題，從UI設(shè)計師自己這里 把好第一道關(guān)。
在日常工作中，UI自查表始終占據(jù)工區(qū)的醒目位置。在評審過程中，大家也會通過線上文檔的形 式來對設(shè)計原則的條目進(jìn)行逐一檢查。
做好UI內(nèi)部評審：
設(shè)計團隊內(nèi)評審（Design critique）是幾乎所有國內(nèi)外設(shè)計團隊的普遍、經(jīng)典做法，可以有效提 高設(shè)計產(chǎn)出水平、保證團隊對外輸出質(zhì)量。方法是普適的，但具體執(zhí)行時如何做才能有更好的效果卻各有各異。 在如何做好內(nèi)部評審上，我們進(jìn)行了如下嘗試。 從“全員參與” 到 “組成內(nèi)部評審委員會” 團隊內(nèi)評審時邀請全員參加，但發(fā)現(xiàn)只有少數(shù)同事發(fā)言，另外一些同事因資歷淺、不了解評審產(chǎn)品或者積極性不高給不出建議。同時隨著團隊成員數(shù)量從幾個增加到十幾個，評審會議的時間成 本大大增加。
選取團隊內(nèi)相對資深和積極提出問題、建議的同事組成內(nèi)部評審委員會，以月為周期輪流進(jìn)行， 可以有效分散評審委員在團隊內(nèi)部評審上的工作負(fù)荷，并明確一次UI內(nèi)部評審除了內(nèi)部評審委員 會還有哪些關(guān)聯(lián)同事需要參加。 關(guān)于邀請評審內(nèi)容關(guān)聯(lián)同事，比如“消息中心” UI評審跟另外一位同事負(fù)責(zé)的“討論消息”有關(guān)聯(lián)，則需要邀請這位同事一起評審，以便發(fā)現(xiàn)關(guān)聯(lián)問題，整體考慮設(shè)計方案。
以上參與評審機制明確在團隊內(nèi)部協(xié)作工具上，做到人人清楚。另外，對于評審建議，要做到有 記錄、有回應(yīng)、有跟蹤，確保有效發(fā)揮了內(nèi)部評審的價值。
UI設(shè)計師的能力模型：不言而喻，UI設(shè)計師自身能力的培養(yǎng)是UI品控的重要一環(huán)。因此對于設(shè)計師能力培養(yǎng)通道上，我 們引入了以下模型。
我們將UI設(shè)計師能力歸納成了3x3能力矩陣。這可以設(shè)計師在工作中也可以有目的提升自身薄弱環(huán)節(jié)，同時也讓企業(yè)對UI設(shè)計師的要求更加清晰，除此之外，我們要求UI設(shè)計師也需要多了解業(yè)務(wù)和前端知識，往前多走一步，跟上下游角色更好的銜接，一方面，UI設(shè)計師需要理解業(yè)務(wù)，要能夠有半個產(chǎn)品經(jīng)理的業(yè)務(wù)知識儲備， 如果能站在更高的行業(yè)視角對自己所服務(wù)的業(yè)務(wù)領(lǐng)域（向 業(yè)務(wù)產(chǎn)品經(jīng)理再邁進(jìn)一點）有一定的理解是更好的了，另外一方面，UI設(shè)計師跟自己的下游-前端 開發(fā)工程師也需要很好的銜接上，知道相關(guān)前端技術(shù)概念、基本頁面布局和交互實現(xiàn)邏輯、方法，能夠無縫地將界面和交互設(shè)計翻譯成前端可理解的語言。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計的小編 http://www.chinatradebeam.com