作者：彩云Sky
鏈接：https://www.zcool.com.cn/article/ZMTU5NDg1Mg==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
蘭亭妙微(cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
設(shè)計(jì)過(guò)程被描述為多個(gè)階段，每個(gè)階段都包含不同的活動(dòng)來(lái)完成該階段，它沒有統(tǒng)一的標(biāo)準(zhǔn)流程，每個(gè)公司和設(shè)計(jì)師都有自己的流程版本。
盡管存在多個(gè)流程，但一般流程和階段類似于以下內(nèi)容:
了解問(wèn)題：初步了解問(wèn)題。觀察、采訪和傾聽用戶。
定義問(wèn)題：解釋和定義要解決的問(wèn)題。
構(gòu)思：通過(guò)頭腦風(fēng)暴產(chǎn)生盡可能多的想法。
原型設(shè)計(jì)：構(gòu)建原型并與其他人分享（ 再次縮小解決方案空間，為實(shí)驗(yàn)階段 ）。
測(cè)試：測(cè)試可能的解決方案、實(shí)施、改進(jìn)或重新設(shè)計(jì)。
傳統(tǒng)的問(wèn)題解決采取有條不紊而又科學(xué)的形式。該過(guò)程從一個(gè)問(wèn)題開始，定義要采取的步驟以及達(dá)到解決方案的工具或方法。
設(shè)計(jì)思維是一種創(chuàng)造性的策略，可以產(chǎn)生創(chuàng)造性的未來(lái)結(jié)果和/或創(chuàng)造性的問(wèn)題解決方式，它應(yīng)該被認(rèn)為是一種以解決方案為中心的思維策略。
它通常被描述為一種創(chuàng)造性、主觀和感性的對(duì)許多大型組織的分析邏輯（ 布朗，2008 年 ），或作為分析和創(chuàng)造性推理模式的組合（ 鄧恩 & 馬丁，2006 年；利特卡，2015 年 ）。
設(shè)計(jì)思維來(lái)源于常規(guī)問(wèn)題解決方法，常規(guī)問(wèn)題解法是設(shè)計(jì)思維的基礎(chǔ)。
從解決問(wèn)題到設(shè)計(jì)思維，Liedtka (2013)
結(jié)果發(fā)現(xiàn)，設(shè)計(jì)思維實(shí)際上也是一個(gè)解決問(wèn)題的過(guò)程，而不僅僅是一個(gè)創(chuàng)新過(guò)程（ 利特卡，2013）
一個(gè)例子是，豐田采用設(shè)計(jì)思維從頭開始分析其西海岸的一個(gè)客戶聯(lián)絡(luò)中心，在重新設(shè)計(jì)過(guò)程中，組建了一個(gè)由一線呼叫代表、軟件工程師、業(yè)務(wù)主管和變革代理組成的跨職能團(tuán)隊(duì)，這一舉動(dòng)最終改變了客戶和員工的服務(wù)中心體驗(yàn)。
我們每天都會(huì)遇到問(wèn)題，但是當(dāng)我們解決同樣的問(wèn)題時(shí)，它們就成了例行公事（ 似乎已經(jīng)忘記它們是問(wèn)題了 ），我們甚至都沒有意識(shí)到正在解決這些問(wèn)題。例如，我的辦公室在 30 分鐘路程之外，該怎么到達(dá)那里？開車、坐火車或巴士到目的地；除非車子輪胎被刺破，否則你就需要弄清楚如何到達(dá)辦公室。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創(chuàng)造了特定術(shù)語(yǔ)：“設(shè)計(jì)思維”，并將多年來(lái)醞釀的方法和想法封裝成一個(gè)統(tǒng)一的概念。
設(shè)計(jì)思維是以人為中心、開放式、基于問(wèn)題的方法論。這種方法最初是為了改變工程教育中的教學(xué)方式，而工程師處理和解決問(wèn)題的方式有其設(shè)計(jì)思維的基礎(chǔ)。
設(shè)計(jì)思維一詞可以追溯到 1987 年 Peter Rowe 的著作：“設(shè)計(jì)思維。” 他描述工程師和建筑師處理問(wèn)題的方法有很大不同。
90 年代初，認(rèn)知科學(xué)家 Don Norman 加入 Apple 團(tuán)隊(duì)，擔(dān)任他們的用戶體驗(yàn)架構(gòu)師，這使他成為第一個(gè)在職位中包含 UX 的人。他提出了“用戶體驗(yàn)設(shè)計(jì)”這個(gè)術(shù)語(yǔ)，因?yàn)樗?ldquo;涵蓋人們對(duì)系統(tǒng)體驗(yàn)的所有方面，包括工業(yè)設(shè)計(jì)、圖形、界面、物理交互和手冊(cè)。” 從那時(shí)起，這些領(lǐng)域中的每一個(gè)都將用戶體驗(yàn)，擴(kuò)展到了自己的專業(yè)領(lǐng)域。
設(shè)計(jì)思維在解決“棘手問(wèn)題”時(shí)特別有用。
棘手問(wèn)題的特征
“棘手問(wèn)題”一詞是由設(shè)計(jì)理論家 Horst Rittel 在 1972 年創(chuàng)造的，用來(lái)描述本質(zhì)上非常模糊 \ 特別棘手的問(wèn)題。棘手問(wèn)題，有很多未知因素，沒有確定的解決方案。問(wèn)題或解決方案可能與另一個(gè)棘手的問(wèn)題有關(guān)，因此這是一個(gè)需要設(shè)計(jì)思維的持續(xù)過(guò)程。貧困、饑餓和氣候變化是一些現(xiàn)代的棘手問(wèn)題。
設(shè)計(jì)主題的范圍是普遍的，因?yàn)?設(shè)計(jì)思維可以應(yīng)用于人類經(jīng)驗(yàn)的任何領(lǐng)域。
它可以用于：
符號(hào)和視覺傳達(dá)：這包括平面設(shè)計(jì)的傳統(tǒng)工作，如排版和廣告、書籍和雜志制作、科學(xué)插圖、攝影、電影、電視和計(jì)算機(jī)顯示。
材料：這包括對(duì)日常用品的形式和視覺外觀的傳統(tǒng)關(guān)注 —— 服裝、家用物品、工具、儀器、機(jī)械和車輛。
人類活動(dòng)和組織性服務(wù)：包括對(duì)物流的傳統(tǒng)管理關(guān)注，結(jié)合物質(zhì)資源、工具和人類低效的序列和時(shí)間表，以達(dá)到特定的目標(biāo)。
復(fù)雜的系統(tǒng)或環(huán)境：生活、工作、娛樂(lè)和學(xué)習(xí)。這包括系統(tǒng)工程、建筑和城市規(guī)劃的傳統(tǒng)關(guān)注點(diǎn)，或復(fù)雜整體部分的功能分析及其隨后在層次結(jié)構(gòu)中的集成。
設(shè)計(jì)思維起源于設(shè)計(jì)師的培訓(xùn)和專業(yè)實(shí)踐，但這些原則可以被每個(gè)人實(shí)踐并擴(kuò)展到每個(gè)活動(dòng)領(lǐng)域。（布朗，2013 年）
在企業(yè)中，設(shè)計(jì)過(guò)程可以為企業(yè)環(huán)境中的問(wèn)題解決帶來(lái)創(chuàng)新思維。它還可以用于醫(yī)療保健，通過(guò)向護(hù)士、醫(yī)生和管理人員教授設(shè)計(jì)思維技術(shù)，我們可以激勵(lì)相關(guān)從業(yè)者貢獻(xiàn)新的想法。
不管是什么設(shè)計(jì)，理解和研究問(wèn)題是必不可少的，因?yàn)槲覀兡軌驈钠涑霭l(fā)，從而進(jìn)行以用戶為中心的設(shè)計(jì)。
設(shè)計(jì)思維的最早階段是搞懂你能帶來(lái)的情感價(jià)值。設(shè)計(jì)思維方法迫使你停留在提問(wèn)與質(zhì)疑階段，而不是準(zhǔn)確定義出問(wèn)題后進(jìn)入下一階段。我們都有過(guò)快進(jìn)入解決方案模式的傾向，所以設(shè)計(jì)思維方法迫使你真實(shí)地存在于這個(gè)不清楚、有時(shí)還非?；靵y的時(shí)刻，從而使你對(duì)要解決的問(wèn)題產(chǎn)生更好的理解。（利特克，2013）
傳統(tǒng)的問(wèn)題解決涉及提出一個(gè)解決方案，但設(shè)計(jì)思維首先使我們發(fā)散，試圖為問(wèn)題生成各種可能的替代解決方案。然后讓我們進(jìn)行收斂性思維，縮小多種可能性，找到單一的最佳解決方案。
根據(jù)利特卡和奧美 (2011) 的說(shuō)法，設(shè)計(jì)思維的全部意義在于學(xué)習(xí)一種新的、系統(tǒng)的解決問(wèn)題的方法。正如我們思考創(chuàng)造力一樣，即使是設(shè)計(jì)思維也可以通過(guò)實(shí)踐來(lái)教授和改進(jìn)。
設(shè)計(jì)過(guò)程從來(lái)都不是線性的，它由多次失敗和迭代組成（布朗，2018）。
首先，設(shè)計(jì)師試圖將問(wèn)題與過(guò)去的類似案例聯(lián)系起來(lái)。如果這種方法不能提供任何解決方案，下一步就是使用知識(shí)和創(chuàng)造力作為一種實(shí)驗(yàn)思維形式來(lái)產(chǎn)生新的想法。使用決策矩陣對(duì)這些想法進(jìn)行評(píng)估，從而會(huì)產(chǎn)生被進(jìn)一步分析和測(cè)試的解決方案。如果成功，它將被實(shí)施。如果不成功，則需要重新表述問(wèn)題，并重復(fù)該過(guò)程。這是一個(gè)迭代過(guò)程，即循環(huán)方法。
這一持續(xù)不斷的重新再設(shè)計(jì)過(guò)程，源于和客戶親密接觸的洞察。
學(xué)習(xí)設(shè)計(jì)思維不僅僅意味著學(xué)習(xí)一套新的工具。它還意味著：學(xué)習(xí)收集和分析大量數(shù)據(jù)；學(xué)習(xí)挖掘?qū)ο罂赡艿男螒B(tài)而不是自主認(rèn)為他是什么；學(xué)習(xí)管理不確定感，以及與許多新的伙伴合作（ 利特卡和奧美，2011）。你可以進(jìn)行的研究類型分為三類：生成性研究、評(píng)估性研究和驗(yàn)證性研究。
一種常見的表述 —— 實(shí)際上是設(shè)計(jì)思維的另一種視角 —— 即設(shè)計(jì)師應(yīng)該預(yù)料到會(huì)“很快失敗或經(jīng)常失敗”（布朗，2009）。
當(dāng)過(guò)程早期發(fā)生故障時(shí)，例如被拒絕的原型，實(shí)質(zhì)上它可以為有效解決方案提供關(guān)鍵見解。這種觀點(diǎn)與傳統(tǒng)的先形成理論，再檢驗(yàn)正誤的方式相矛盾。
Airbnb、Braun 和百事可樂(lè)等多元化公司都在 采用設(shè)計(jì)思維并將其作為核心戰(zhàn)略。例如，IBM 為全球旗下的 44 個(gè)設(shè)計(jì)工作室聘請(qǐng)了 1600 名設(shè)計(jì)師，并且正在培訓(xùn)數(shù)以萬(wàn)計(jì)的設(shè)計(jì)師員工建立深度創(chuàng)新能力 ( O'Keefe, 2017 )
設(shè)計(jì)思維為我們解決問(wèn)題添加了以人為本的元素。當(dāng)我們?cè)噲D通過(guò)牢記人們的想法來(lái)解決問(wèn)題，并使用基于直接觀察乃至訪談的研究時(shí)，我們便會(huì)捕捉到與消費(fèi)者需求一致的意外見解和創(chuàng)新。
它有助于將成功的產(chǎn)品更快地推向市場(chǎng)，最終節(jié)省企業(yè)資金。
IBM 的健康和人類服務(wù)組織的設(shè)計(jì)思維實(shí)踐，通過(guò)有效使用設(shè)計(jì)和設(shè)計(jì)思維幫助企業(yè)將缺陷數(shù)量減少了 50% 以上。這種更高效的工作流程導(dǎo)致計(jì)算出的 ROI 超過(guò) 300%。
由于復(fù)雜的問(wèn)題從來(lái)不能被所有人完全理解，因此在嘗試設(shè)計(jì)解決方案時(shí)，處理歧義和多個(gè)并發(fā)的思路方向的能力是至關(guān)重要的素質(zhì)。
設(shè)計(jì)思維通過(guò)綜合和歸納思維，幫助實(shí)現(xiàn)質(zhì)的飛躍。它允許通過(guò)解構(gòu)來(lái)測(cè)試約束，并允許通過(guò)多樣性思維和批評(píng)思維，來(lái)?yè)肀Ш吞剿髌缌x。
消費(fèi)者通常不知道他們有什么問(wèn)題需要解決，或者他們無(wú)法用語(yǔ)言表達(dá)出來(lái)。只有經(jīng)過(guò)仔細(xì)觀察，設(shè)計(jì)者才能根據(jù)真實(shí)消費(fèi)者行為中看到的東西來(lái)識(shí)別問(wèn)題，而不是簡(jiǎn)單地根據(jù)對(duì)消費(fèi)者的想法來(lái)確定問(wèn)題。這有助于定義模棱兩可的問(wèn)題，并找到解決方案。
該方法鼓勵(lì)“跳出框架思考”（“瘋狂的想法”）；它蔑視顯而易見的事物并采用更具實(shí)驗(yàn)性的方法。
在早期的流程階段鼓勵(lì)大膽的想法，以產(chǎn)生創(chuàng)造性的解決方案。使用它是為了讓設(shè)計(jì)師可以嘗試開發(fā)新的不受約束的思維方式，或?qū)ΤＲ妴?wèn)題的創(chuàng)新解覺方法。
根據(jù)大多數(shù)設(shè)計(jì)學(xué)院的說(shuō)法，具備特定特質(zhì)的人能夠更好地發(fā)揮設(shè)計(jì)思維的作用。
同理心：從多個(gè)角度想象世界 —— 同事、甲方客戶、實(shí)際使用者和消費(fèi)者的角度。要成為更好的同理心，必須傾聽和觀察他人的行為，注意并獲得洞察力。
綜合思維：重要的是不僅要有分析能力，而且要能夠提出新穎的解決方案，還要憑直覺。
樂(lè)觀：除非你相信有解決方案，否則在遇到挑戰(zhàn)且解決方案遇到瓶頸時(shí)，你可能會(huì)放棄。
實(shí)驗(yàn)主義：重大創(chuàng)新并非來(lái)自漸進(jìn)式調(diào)整。設(shè)計(jì)思想家以創(chuàng)造性的方式提出問(wèn)題并探索限制因素，并朝著全新的方向發(fā)展。
協(xié)作：產(chǎn)品、服務(wù)和體驗(yàn)日益復(fù)雜，因此必須擁有一支具有不同背景的團(tuán)隊(duì)，以幫助從多個(gè)角度看待問(wèn)題。
當(dāng)我們想到一個(gè)問(wèn)題的多種解決方案時(shí)，對(duì)我們解決問(wèn)題會(huì)非常有幫助，因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問(wèn)題。想要擺脫功能固定，首先是要讓人們可以使用“改造后的衣架進(jìn)入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開簡(jiǎn)單的彈簧門鎖。
為了幫助設(shè)計(jì)師利用文科和技術(shù)理論，整合多個(gè)領(lǐng)域的知識(shí)以找到創(chuàng)新的解決方案，我們采用設(shè)計(jì)思維來(lái)獲得洞察力。該方法側(cè)重于可視化和操作，因而幫助我們更容易地了解實(shí)際解法，而不僅僅是理論模型。
第一批美國(guó)公司在 2000 年代初期開始實(shí)施設(shè)計(jì)思維，這一概念引起了德國(guó)投資者 Hasso Plattner 的興趣，他于 2006 年資助創(chuàng)建了兩所設(shè)計(jì)學(xué)校（d.schools），其中一所位于波茨坦大學(xué)（德國(guó)），另一所位于美國(guó)斯坦福大學(xué)。由于兩所學(xué)校都成功地為大型組織提供了高管設(shè)計(jì)思維培訓(xùn)，因此該研究重點(diǎn)關(guān)注這些國(guó)家，以尋找早期實(shí)施者。
設(shè)計(jì)思維通常涉及希望參與整個(gè)設(shè)計(jì)和開發(fā)過(guò)程的龐大利益相關(guān)者團(tuán)隊(duì)。
觀點(diǎn)、才能和經(jīng)驗(yàn)的多樣性被認(rèn)為是注入新思維的部分重要來(lái)源。多樣性確保通過(guò)融合不同的觀點(diǎn)、技能和知識(shí)來(lái)產(chǎn)生創(chuàng)意（卡振思，2018 年；薩梅和德拉赫-扎哈維，2013 年）。設(shè)計(jì)思維的協(xié)作方法和工具可幫助團(tuán)隊(duì)以積極的方式利用他們的差異。
決策是平等的，因?yàn)槊總€(gè)成員的意見都被征求和使用（卡爾格倫等，2016）。
當(dāng) IDEO 去 Apple 展示他們的鼠標(biāo)時(shí)，它不是什么花哨的設(shè)備，而是一個(gè)用膠帶粘起來(lái)的原型。
低保真原型制作起來(lái)既快速又便宜（ 想想幾分鐘和幾分錢 ），但可以從用戶和同事那里得到有用的反饋，這符合快速驗(yàn)證、廉價(jià)試錯(cuò)的原則。為每個(gè)想法投入盡可能少的資源意味著前期投入的時(shí)間和金錢更少。此外，將多個(gè)原型帶到現(xiàn)場(chǎng)進(jìn)行測(cè)試為用戶提供了比較的基礎(chǔ)參考，同時(shí)也有助于揭示某些需求。
為了創(chuàng)新，設(shè)計(jì)思維意識(shí)到認(rèn)知和行動(dòng)對(duì)創(chuàng)新過(guò)程很重要。認(rèn)知包括接受度、樂(lè)觀和創(chuàng)造性的信心（ 凱莉 & 凱莉，2013；鄭，2018），而行動(dòng)包括快速原型設(shè)計(jì)、旅程地圖和假設(shè)浮現(xiàn)（ 假設(shè)浮現(xiàn)：assumption surfacing，這是一種評(píng)估技術(shù)，涉及寫出潛在的假設(shè)和反假設(shè)。）（ 卡爾格倫等，2016；利特卡，2015）
如果領(lǐng)導(dǎo)層不歡迎風(fēng)險(xiǎn)、模棱兩可和風(fēng)格的改變，實(shí)施起來(lái)就會(huì)變得更加困難。它會(huì)被管理者“質(zhì)疑”其具體指標(biāo)
沃爾特斯 ( 2011 ) 聲稱，由于設(shè)計(jì)思維的模糊性，它與組織文化相沖突。
據(jù)受訪者稱，在日常業(yè)務(wù)中使用設(shè)計(jì)思維之所以不會(huì)是最優(yōu)選項(xiàng)， 因?yàn)樗琴Y源密集型的，增加了工作量。（ 麗莎等，2016）
在醫(yī)療保健等規(guī)避風(fēng)險(xiǎn)的行業(yè)和公司中，“經(jīng)常和早點(diǎn)失敗”的方法被認(rèn)為是非常困難的。
許多設(shè)計(jì)師反對(duì)設(shè)計(jì)思維這一觀點(diǎn)，設(shè)計(jì)思維不僅關(guān)乎一個(gè)過(guò)程，而且關(guān)乎改變思維過(guò)程并提高人們可能提出的解決方案的創(chuàng)造力。
“設(shè)計(jì)思維”的推廣已被大型全球公司用來(lái)增加業(yè)務(wù)。不過(guò)，在更廣泛的設(shè)計(jì)世界中，我甚至?xí)f(shuō)“設(shè)計(jì)思維”的過(guò)度宣傳導(dǎo)致了所提供設(shè)計(jì)質(zhì)量的下降。—— Yasushi Kusume
弗吉尼亞理工大學(xué)科學(xué)、技術(shù)和社會(huì)助理教授 Lee Vinsel 在《設(shè)計(jì)思維運(yùn)動(dòng)是荒謬的》中寫道，“歸根結(jié)底，設(shè)計(jì)思維與設(shè)計(jì)無(wú)關(guān)。這與文科無(wú)關(guān)。這與任何有意義的創(chuàng)新無(wú)關(guān)。如果這意味著重大的社會(huì)變革，那肯定不是關(guān)于“社會(huì)創(chuàng)新”。這是關(guān)于商業(yè)化的。”
觀察人們的行為以及他們?nèi)绾闻c環(huán)境互動(dòng)，可以為你提供有關(guān)人們想法和感受的線索。
你可能認(rèn)為你知道問(wèn)題所在，但只有通過(guò)觀察才能了解消費(fèi)者真正需要什么。
宜家派設(shè)計(jì)師到人們家中，觀測(cè)他們的互動(dòng)行為來(lái)了解他們的需求。這將使設(shè)計(jì)者能夠推斷這些經(jīng)歷的無(wú)形含義，以發(fā)現(xiàn)洞察。這些洞察提供創(chuàng)新解決方案的構(gòu)思方向。而事實(shí)上，最好的解決方案來(lái)自于對(duì)人類行為的最佳洞察。
Good Kitchen 是一家為老年人和體弱者提供膳食的社會(huì)服務(wù)機(jī)構(gòu)。起初的問(wèn)題似乎是設(shè)計(jì)不當(dāng)?shù)纳攀巢藛?。然后設(shè)計(jì)思維揭示了無(wú)數(shù)問(wèn)題，所有問(wèn)題都源于服務(wù)本身的性質(zhì)。因此，經(jīng)由對(duì)服務(wù)進(jìn)行了徹底改革的之后，最終提高了客戶和員工的滿意度（利特卡，2014）
蘭亭妙微(cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
對(duì)于設(shè)計(jì)師來(lái)說(shuō)，遇到設(shè)計(jì)瓶頸期很正常，入行一段時(shí)間后所具備的能力就會(huì)達(dá)到峰值，無(wú)法突破峰值就會(huì)遇到瓶頸。主要在設(shè)計(jì)思維和設(shè)計(jì)技法層面受限，打開設(shè)計(jì)思維才能突破瓶頸期，通過(guò)積累優(yōu)秀的案例并進(jìn)行總結(jié)分析，可以更快的打破思維限制。
分享目錄
一、趣味性的登錄設(shè)計(jì)
二、瓷片區(qū)的趣味性手勢(shì)交互
三、營(yíng)造懷舊感的溫馨體驗(yàn)
四、趣味性的進(jìn)度提示設(shè)計(jì)
五、場(chǎng)景感的點(diǎn)擊操作
六、動(dòng)效引導(dǎo)用戶發(fā)帖
七、卡通形象強(qiáng)化瓷片區(qū)視覺感
八、不改變布局的曝光強(qiáng)化
九、可以晃動(dòng)的 Banner 圖
十、場(chǎng)景感的底部標(biāo)簽欄設(shè)計(jì)
一、趣味性的登錄設(shè)計(jì)
登錄是進(jìn)入產(chǎn)品的第一道防線，也容易讓用戶產(chǎn)生排斥感，降低用戶的防備心理才能提高登錄的意愿度。
盯潮 App 在登錄界面中，以潮流元素和商品等內(nèi)容進(jìn)行設(shè)計(jì)，使得頁(yè)面視覺感豐富?；蝿?dòng)手機(jī)時(shí)元素也會(huì)移動(dòng)，在掉落或者碰撞手機(jī)邊緣時(shí)配合震動(dòng)感，讓體驗(yàn)變得非常有趣。趣味性的設(shè)計(jì)降低了用戶的排斥感，提升了登錄的意愿度和體驗(yàn)感。
二、瓷片區(qū)的趣味性手勢(shì)交互
瓷片區(qū)、Banner、金剛區(qū)是產(chǎn)品中的三大運(yùn)營(yíng)模塊，起到提高曝光度達(dá)到引流的目的。瓷片區(qū)在頁(yè)面中的布局比較靈活，設(shè)計(jì)表現(xiàn)也非常豐富。
盯潮 App 在首頁(yè)瓷片區(qū)設(shè)計(jì)中，以柵格式布局進(jìn)行區(qū)塊劃分，占比較大的模塊類似于 Banner 式表現(xiàn)。通過(guò)手勢(shì)可以任意拖動(dòng)實(shí)現(xiàn)切換，趣味性和互動(dòng)性相結(jié)合，提高了用戶的使用樂(lè)趣。
三、營(yíng)造懷舊感的溫馨體驗(yàn)
童年的記憶是我們逝去的青春，每每看到小時(shí)候的畫面，總能勾起我們童年的回憶。最近發(fā)現(xiàn)一款結(jié)合懷舊感營(yíng)造設(shè)計(jì)風(fēng)格的產(chǎn)品，名字叫“軟眠眠”。
這是一款拯救失眠者的治愈系睡眠 App，以一幅小時(shí)候生活的環(huán)境插畫填充界面背景，圖標(biāo)設(shè)計(jì)也是提取小時(shí)候的玩物或者生活用品，視覺風(fēng)格營(yíng)造極強(qiáng)的懷舊感。無(wú)論是畫風(fēng)還是配色、配樂(lè)等，都勾起了我們滿滿的回憶，帶給用戶溫馨的體驗(yàn)。
四、趣味性的進(jìn)度提示設(shè)計(jì)
在完成步驟化和消耗數(shù)據(jù)等內(nèi)容表達(dá)層面會(huì)選擇進(jìn)度條，通過(guò)可視化的表達(dá)提高用戶的理解，減輕信息認(rèn)知負(fù)擔(dān)。
軟眠眠 App 在定制睡眠計(jì)劃的過(guò)程中，完成選項(xiàng)時(shí)的進(jìn)度條設(shè)計(jì)非常有意思，是一個(gè)小孩通過(guò)拉動(dòng)繩子移動(dòng)。拉動(dòng)過(guò)程中結(jié)合動(dòng)態(tài)表達(dá)，配合手繪風(fēng)的表現(xiàn)讓人感覺輕松愉快，趣味性的設(shè)計(jì)也提高了完成選項(xiàng)任務(wù)的意愿度。
五、場(chǎng)景感的點(diǎn)擊操作
在保障底層操作體驗(yàn)的基礎(chǔ)上，設(shè)計(jì)會(huì)越來(lái)越講究細(xì)節(jié)的體驗(yàn)，逐步強(qiáng)化情感化的融入和場(chǎng)景感的體驗(yàn)。
最近在體驗(yàn)小雞上工 App 時(shí)，在找工作的列表設(shè)計(jì)中加入了“搶”按鈕，在點(diǎn)擊列表時(shí)按鈕會(huì)有按壓的動(dòng)效過(guò)程。模擬搶拍按鈕獲得機(jī)會(huì)的體驗(yàn)，營(yíng)造場(chǎng)景氛圍感，提高了設(shè)計(jì)表達(dá)的趣味性。
六、動(dòng)效引導(dǎo)用戶發(fā)帖
微動(dòng)效可以提高功能的吸引力，也能讓互動(dòng)體驗(yàn)變得更有趣，可以通過(guò)動(dòng)效引導(dǎo)功能操作和提高關(guān)注度。
騰訊動(dòng)漫 App 在圈子欄目中，以 IP 形象結(jié)合動(dòng)效強(qiáng)化發(fā)帖按鈕，以此引導(dǎo)用戶參與發(fā)帖。動(dòng)效不僅突出了發(fā)帖的關(guān)注度，也讓發(fā)帖按鈕設(shè)計(jì)更有親和力，進(jìn)而提升用戶的點(diǎn)擊欲。
七、卡通形象強(qiáng)化瓷片區(qū)視覺感
瓷片區(qū)起到強(qiáng)化曝光達(dá)到流量引導(dǎo)的作用，提高該模塊的吸引力至關(guān)重要，視覺感的突出也尤為重要。
會(huì)玩 App 在首頁(yè)“一起玩”的瓷片區(qū)設(shè)計(jì)中，以卡通形象結(jié)合豐富的色彩進(jìn)行表現(xiàn)，各種裝扮的形象豐富視覺感?？ㄍㄐ蜗笤O(shè)計(jì)風(fēng)格統(tǒng)一，卡片色彩豐富且協(xié)調(diào)，整體瓷片區(qū)視覺沖擊力十足。
八、不改變布局的曝光強(qiáng)化
在當(dāng)前產(chǎn)品結(jié)構(gòu)不變的基礎(chǔ)上，如何提高局部?jī)?nèi)容或者主推內(nèi)容的曝光度，是產(chǎn)品設(shè)計(jì)師不斷探索的方向。
愛奇藝 App 首頁(yè)推薦欄目 Banner 圖下方，默認(rèn)情況下以宮格布局推薦影片。前段時(shí)間在打開時(shí)發(fā)現(xiàn)了一個(gè)臨時(shí)設(shè)計(jì)表達(dá)，保持當(dāng)前結(jié)構(gòu)布局不變，放大了圖片填充和推薦影片，整張畫面填充宮格，視覺張力十足。該設(shè)計(jì)表達(dá)既不會(huì)干擾當(dāng)前布局，也能強(qiáng)化推薦影片的曝光度，解決方案值得探索。
九、可以晃動(dòng)的 Banner 圖
Banner 可以在創(chuàng)意、造型、互動(dòng)形式等方面進(jìn)行設(shè)計(jì)發(fā)揮，也呈現(xiàn)了許多優(yōu)秀的方案，產(chǎn)品設(shè)計(jì)師也在不斷嘗試更多的可能性。
最近在體驗(yàn)盯潮 App 時(shí)，發(fā)售欄目頂部 Banner 圖設(shè)計(jì)引人關(guān)注。當(dāng)用戶左右晃動(dòng)手機(jī)時(shí)，Banner 圖背景層不動(dòng)，而文案和產(chǎn)品等元素層會(huì)跟著晃動(dòng)的頻率左右移動(dòng)?？梢曰蝿?dòng)的 Banner 圖非常有意思，成功地吸引了用戶的關(guān)注度和點(diǎn)擊欲。
十、場(chǎng)景感的底部標(biāo)簽欄設(shè)計(jì)
底部標(biāo)簽欄設(shè)計(jì)可以在背景、造型、圖標(biāo)等元素中發(fā)揮，其中圖標(biāo)設(shè)計(jì)中的發(fā)揮相對(duì)更多一些，在背景和造型層面的案例較少，不過(guò)最近也發(fā)現(xiàn)了一個(gè)解決方案。
在體驗(yàn)云游萬(wàn)里長(zhǎng)城小程序時(shí)，進(jìn)入之后的小程序底部標(biāo)簽欄設(shè)計(jì)結(jié)合了長(zhǎng)城墻面和結(jié)構(gòu)，非常有場(chǎng)景代入感。設(shè)計(jì)了深色版和淺色版，圖標(biāo)造型設(shè)計(jì)也融入了長(zhǎng)城元素，不失為一種優(yōu)秀的差異化設(shè)計(jì)探索。
小結(jié)
希望本期的分享可以開啟大家更多設(shè)計(jì)思維，從優(yōu)秀的設(shè)計(jì)方案中發(fā)現(xiàn)設(shè)計(jì)的軌跡，復(fù)用到后期的項(xiàng)目設(shè)計(jì)中。本文描述屬于個(gè)人理解和總結(jié)，不足之處歡迎大家留言補(bǔ)充，我們互相進(jìn)步。
蘭亭妙微(cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
形狀設(shè)計(jì)可以影響整個(gè)界面的視覺效果。通過(guò)選擇適當(dāng)?shù)男螤詈团帕蟹绞剑梢詣?chuàng)造出令人愉悅、易于使用和富有吸引力的界面。
在UI設(shè)計(jì)中，形狀設(shè)計(jì)是一個(gè)至關(guān)重要的環(huán)節(jié)。對(duì)其選擇和排列會(huì)直接影響到界面的美觀度和用戶的交互體驗(yàn)。接下來(lái)將詳細(xì)探討UI設(shè)計(jì)中的形狀設(shè)計(jì)，包括其重要性、基本原則和實(shí)際應(yīng)用。
形狀可以幫助用戶理解和操作界面。一個(gè)優(yōu)秀的形狀設(shè)計(jì)應(yīng)該具有清晰、簡(jiǎn)潔和易于理解的特點(diǎn)，我們?cè)谄綍r(shí)做設(shè)計(jì)中，需要將這些原則深入到每一個(gè)細(xì)節(jié)中。
在設(shè)計(jì)中，形狀的識(shí)別和理解是至關(guān)重要的。一個(gè)成功的形狀設(shè)計(jì)應(yīng)該能夠快速地被用戶識(shí)別并理解。例如，一個(gè)常見的形狀可以使用不同的顏色和大小來(lái)區(qū)分主要內(nèi)容和次要內(nèi)容，從而引導(dǎo)用戶的注意力。
1、形狀的一致性
在UI設(shè)計(jì)中，一致性是一個(gè)非常重要的原則。一個(gè)好的形狀設(shè)計(jì)應(yīng)該在整個(gè)應(yīng)用程序中保持一致，從而使用戶可以輕松地導(dǎo)航和操作。例如，閑魚APP里的所有的按鈕可以使用相同的形狀和顏色，以便用戶可以輕松地識(shí)別并操作。
2、形狀的個(gè)性化與品牌識(shí)別
一個(gè)獨(dú)特的形狀設(shè)計(jì)可以幫助品牌在競(jìng)爭(zhēng)激烈的市場(chǎng)中脫穎而出。一個(gè)好的形狀設(shè)計(jì)應(yīng)該能夠體現(xiàn)品牌的個(gè)性和價(jià)值觀，從而增強(qiáng)品牌的識(shí)別度。使用獨(dú)特的圖標(biāo)和標(biāo)志來(lái)傳達(dá)其品牌形象和價(jià)值觀。例如：小米的logo、京東狗、淘寶天貓。
1、按鈕設(shè)計(jì)
按鈕是UI設(shè)計(jì)中最重要的元素之一。一個(gè)好的按鈕設(shè)計(jì)應(yīng)該具有清晰的形狀和易于理解的標(biāo)簽。
按鈕形狀主要有直角、小圓角、全圓角三種樣式。
① 直角按鈕具有嚴(yán)謹(jǐn)、力量、高端的特點(diǎn)，適用于大牌美妝、奢侈品類產(chǎn)品；
② 小圓角按鈕具有穩(wěn)定、中性的感覺，適用于用戶跨度較大的常規(guī)類產(chǎn)品中，例如微信、滴滴、抖音等；
③ 全圓角按鈕更加溫和、親切，適用于電商類和兒童類的產(chǎn)品中。
按鈕尺寸和比例根據(jù)iOS和Android的規(guī)范，按鈕尺寸至少高于5.5毫米（36 pt），否則用戶點(diǎn)擊時(shí)會(huì)較為困難。同時(shí)，按鈕長(zhǎng)度固定，文字長(zhǎng)度變化或是按鈕長(zhǎng)度根據(jù)文字長(zhǎng)短而變化的設(shè)計(jì)方式也需要考慮文字距離按鈕上下左右邊距的比例關(guān)系。
總的來(lái)說(shuō)，UI中按鈕形狀的設(shè)計(jì)需要結(jié)合具體的產(chǎn)品屬性和界面風(fēng)格，以及用戶的使用習(xí)慣來(lái)進(jìn)行綜合考慮。
2、圖標(biāo)設(shè)計(jì)
圖標(biāo)是UI設(shè)計(jì)中另一種重要的具有高度概括性和視覺傳達(dá)性的小尺寸圖像元素。可以幫助用戶快速地識(shí)別和理解功能和信息，是靠文案無(wú)法實(shí)現(xiàn)的。
例如，天氣圖標(biāo)通過(guò)其形狀、色彩和設(shè)計(jì)元素直觀地傳達(dá)不同的天氣狀況和氣象信息，幫助人們更好地了解天氣狀況。又如衛(wèi)生間男女圖標(biāo)的設(shè)計(jì)讓人們易于識(shí)別和理解。
在UI設(shè)計(jì)中，圖標(biāo)的圓角度通常是怎么定義的呢？
① 大圓角：應(yīng)用在以圓潤(rùn)、可愛為主要風(fēng)格的UI設(shè)計(jì)中，以營(yíng)造出更加柔和、親切的視覺效果。
② 小圓角：小圓角作為一種微妙的細(xì)節(jié)元素，可以增加圖標(biāo)的層次感和細(xì)節(jié)。在追求設(shè)計(jì)質(zhì)感的界面中，適當(dāng)添加小圓角可以使圖標(biāo)更加精致和有品質(zhì)感。
③ 無(wú)圓角：應(yīng)用在科技或現(xiàn)代感的UI設(shè)計(jì)中，以營(yíng)造出更加硬朗、冷峻的視覺效果。但使用需要克制，過(guò)多的直角可能會(huì)讓整個(gè)界面顯得生硬和冷感。
補(bǔ)充一點(diǎn)，我發(fā)現(xiàn)一個(gè)重要細(xì)節(jié)，就是很多人在計(jì)算內(nèi)圓角數(shù)值時(shí)都存在困擾。自工作以來(lái)，我注意到這個(gè)問(wèn)題影響了很多人，他們不知道如何正確地計(jì)算內(nèi)圓角的數(shù)值。為了解決這個(gè)問(wèn)題，通過(guò)以下方式幫助大家更好地掌握計(jì)算內(nèi)圓角數(shù)值的方法。
3、輸入框設(shè)計(jì)
輸入框是用戶輸入信息的重要區(qū)域。在UI設(shè)計(jì)中，輸入框的形狀設(shè)計(jì)可以根據(jù)實(shí)際需求和設(shè)計(jì)風(fēng)格進(jìn)行變化。以下是一些常見的輸入框形狀設(shè)計(jì)：
① 方型輸入框：這是最常見的輸入框形狀，它以方形的形式呈現(xiàn)，可以在其中輸入文本或信息。這種設(shè)計(jì)簡(jiǎn)單明了，易于使用，適用于大多數(shù)場(chǎng)景。
② 圓角矩形輸入框：這種輸入框在四個(gè)角上采用了圓角設(shè)計(jì)，使得整個(gè)輸入框看起來(lái)更加柔和、友好。這種設(shè)計(jì)在一些需要強(qiáng)調(diào)用戶輸入的場(chǎng)景下較為常見。
③ 下拉菜單輸入框：這種輸入框可以讓用戶從下拉菜單中選擇一個(gè)選項(xiàng)，而不是直接在文本框中輸入。這種設(shè)計(jì)適用于一些固定選項(xiàng)的場(chǎng)景，可以減少用戶的輸入操作。
④ 按鈕式輸入框：這種輸入框?qū)⑤斎肟蚝桶粹o結(jié)合在一起，用戶可以點(diǎn)擊按鈕來(lái)輸入信息。這種設(shè)計(jì)適用于一些需要強(qiáng)調(diào)點(diǎn)擊操作的場(chǎng)景，例如站酷的登錄。
⑤ 語(yǔ)音識(shí)別輸入框：這種輸入框允許用戶通過(guò)語(yǔ)音來(lái)輸入信息，而不是手動(dòng)輸入。這種設(shè)計(jì)適用于一些需要快速輸入或不方便手動(dòng)輸入的場(chǎng)景，例如駕車、寫字等。
總的來(lái)說(shuō)，輸入框的形狀設(shè)計(jì)應(yīng)根據(jù)實(shí)際需求和設(shè)計(jì)風(fēng)格來(lái)進(jìn)行選擇，同時(shí)也要考慮用戶的使用習(xí)慣和操作體驗(yàn)。
4、導(dǎo)航欄設(shè)計(jì)
導(dǎo)航欄是UI設(shè)計(jì)中重要的組成部分之一。它幫助用戶在不同的頁(yè)面之間進(jìn)行切換和導(dǎo)航。在設(shè)計(jì)導(dǎo)航欄時(shí)，應(yīng)考慮其位置、顏色和形狀等因素。以下是一些常見的導(dǎo)航欄形狀設(shè)計(jì)：
① 頂部導(dǎo)航欄：這是最常見的導(dǎo)航模式，位于頁(yè)面頂部，可以包含網(wǎng)站的名稱、主要的導(dǎo)航選項(xiàng)、搜索框等元素。這種設(shè)計(jì)簡(jiǎn)單明了，易于使用，適用于大多數(shù)場(chǎng)景。
② 側(cè)邊導(dǎo)航欄：這種導(dǎo)航模式位于頁(yè)面左側(cè)，通常用于二級(jí)導(dǎo)航或輔助導(dǎo)航。側(cè)邊導(dǎo)航欄可以以垂直或水平方向呈現(xiàn)，根據(jù)實(shí)際需求進(jìn)行選擇。
③ 底部導(dǎo)航欄：這種導(dǎo)航模式位于頁(yè)面底部，通常用于一級(jí)目錄的導(dǎo)航。底部導(dǎo)航欄可以包含網(wǎng)站的名稱、主要的導(dǎo)航選項(xiàng)、搜索框等元素。這種設(shè)計(jì)操作方便，用戶體驗(yàn)好，適用于大多數(shù)場(chǎng)景。
④ 彈出式導(dǎo)航欄：這種導(dǎo)航模式通常用于移動(dòng)端應(yīng)用，通過(guò)點(diǎn)擊或滑動(dòng)屏幕上的按鈕或圖標(biāo)來(lái)喚出導(dǎo)航菜單。彈出式導(dǎo)航欄可以以垂直或水平方向呈現(xiàn)，根據(jù)實(shí)際需求進(jìn)行選擇。
總的來(lái)說(shuō)，導(dǎo)航欄的形狀設(shè)計(jì)應(yīng)根據(jù)實(shí)際的導(dǎo)航模式和設(shè)計(jì)風(fēng)格來(lái)進(jìn)行選擇，同時(shí)也要考慮用戶的使用習(xí)慣和操作體驗(yàn)。好的導(dǎo)航設(shè)計(jì)應(yīng)該簡(jiǎn)單明了、易于使用，能夠提供清晰的信息架構(gòu)和層級(jí)關(guān)系，幫助用戶快速找到所需內(nèi)容。
5、作為底紋設(shè)計(jì)
將形狀用作底紋，可以增加圖形的視覺層次感和趣味性。尤其是當(dāng)使用如圓圈、條紋、曲線等形狀時(shí)，可以使底紋呈現(xiàn)出動(dòng)態(tài)感和動(dòng)感。
也可以強(qiáng)調(diào)文字或圖片中的某些元素，用來(lái)引導(dǎo)觀者的視線，以創(chuàng)造出視覺焦點(diǎn)。比如，在一個(gè)沉悶的黑色背景上使用鮮艷的彩色形狀作為底紋，可以將觀者的注意力集中在那些形狀上。
但是，必須著重強(qiáng)調(diào)的是，底紋的使用應(yīng)當(dāng)與整體的設(shè)計(jì)風(fēng)格和主題相得益彰。若應(yīng)用不當(dāng)，可能會(huì)對(duì)畫面的整體美感產(chǎn)生破壞性的影響。因此，在決定是否使用底紋時(shí)，必須慎重考慮其與整體設(shè)計(jì)的和諧度。
1、動(dòng)態(tài)形狀設(shè)計(jì)
隨著技術(shù)的不斷發(fā)展，動(dòng)態(tài)形狀設(shè)計(jì)已經(jīng)成為一種趨勢(shì)。通過(guò)使用動(dòng)畫和過(guò)渡效果，可以創(chuàng)建更具吸引力和互動(dòng)性的界面。例如，使用漸變效果來(lái)平滑地轉(zhuǎn)換不同的頁(yè)面或狀態(tài)。
2、3D和立體形狀設(shè)計(jì)
3D和立體形狀設(shè)計(jì)為UI設(shè)計(jì)師提供了更多的可能性。通過(guò)使用陰影、光照和深度效果，可以創(chuàng)建更立體、更有層次感的界面。例如，使用3D旋轉(zhuǎn)效果來(lái)突出主要內(nèi)容或使用陰影效果來(lái)增加界面的深度感。
3、可定制形狀設(shè)計(jì)
隨著用戶對(duì)個(gè)性化需求的不斷增加，可定制的形狀設(shè)計(jì)變得越來(lái)越重要。用戶希望根據(jù)自己的喜好和需求來(lái)調(diào)整界面。例如，允許用戶自定義選擇自己喜歡的頁(yè)面主題風(fēng)格。
在UI設(shè)計(jì)中，精美形狀設(shè)計(jì)的關(guān)鍵是深入理解用戶需求，注重細(xì)節(jié)，保持一致性，勇于創(chuàng)新，不斷提高技能水平。這樣才能創(chuàng)造符合用戶口味的界面，提升用戶體驗(yàn)。簡(jiǎn)潔地說(shuō)，好的形狀設(shè)計(jì)來(lái)源于用戶需求、細(xì)節(jié)、一致性、創(chuàng)新和自我提升。
以上總結(jié)僅代表個(gè)人觀點(diǎn)，如有不足歡迎大家補(bǔ)充互相進(jìn)步。
蘭亭妙微(cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
企業(yè)多產(chǎn)品線模式下，UI體驗(yàn)文化打造、UI設(shè)計(jì)質(zhì)量品控5個(gè)方面闡述項(xiàng)目快速、規(guī)?；嵘喈a(chǎn)品線整體體驗(yàn)中的方法論和實(shí)踐經(jīng)驗(yàn)。
SaaS 產(chǎn)品體驗(yàn)要求越來(lái)越高，用戶體驗(yàn)已經(jīng)成為產(chǎn)品競(jìng)爭(zhēng)力的重要組成部分，怎樣在多業(yè)務(wù)線的產(chǎn)品環(huán)境中做好體驗(yàn)設(shè)計(jì)，本文從貼合業(yè)務(wù)線的設(shè)計(jì)規(guī)范、敏捷易用的前端組件庫(kù)、產(chǎn)品研發(fā)協(xié)作流程保障、UI體驗(yàn)文化打造、UI設(shè)計(jì)質(zhì)量品控5個(gè)方面闡述項(xiàng)目快速、規(guī)?；嵘喈a(chǎn)品線整體體驗(yàn)過(guò)程中方法論和實(shí)踐經(jīng)驗(yàn)。
關(guān)鍵詞：
用戶體驗(yàn)設(shè)計(jì)；UI設(shè)計(jì)規(guī)范；多產(chǎn)品線；體驗(yàn)文化；UI設(shè)計(jì)落地
面對(duì)多產(chǎn)品體系，多產(chǎn)品線，需要積極尋找和探索適合我們客觀情況的最佳實(shí)踐，我們面臨的問(wèn)題有：
1.過(guò)往以功能堆砌為主、基本“能用”，缺乏平臺(tái)規(guī)范和一致性，體驗(yàn)不足。
2.產(chǎn)品線多、體量大。
3.客戶對(duì)產(chǎn)品體驗(yàn)要求越來(lái)越高。
4.產(chǎn)品歷史包袱、修復(fù)改動(dòng)困難。
5.對(duì)用戶體驗(yàn)認(rèn)知不一，協(xié)同、溝通成本高。
6.重復(fù)的開發(fā)成本。
7.第三方組件與業(yè)務(wù)的匹配度不佳。
解決以上幾大難題，我們啟動(dòng)了UI 設(shè)計(jì)規(guī)范的搭建、UI組件庫(kù)的開發(fā)等，讓規(guī)范和組件庫(kù)成為各產(chǎn)品線堅(jiān)實(shí)底座的一部分，使用戶體驗(yàn)文化賦能前端和產(chǎn)品經(jīng)理，協(xié)同 QA 力量一起推動(dòng)產(chǎn)品體驗(yàn)升級(jí)，以下整理分享的實(shí)踐方法適用于中小型UED團(tuán)隊(duì)支撐復(fù)雜、多業(yè)務(wù)線的企業(yè)，本文嘗試從以下幾個(gè)方面總結(jié)和提煉實(shí)踐經(jīng)驗(yàn)，跟業(yè)界同行探討。
設(shè)計(jì)規(guī)范體系的搭建對(duì)于新的團(tuán)隊(duì)，如何從復(fù)雜海量的業(yè)務(wù)場(chǎng)景中制定出一套適用于自己產(chǎn)品的UI設(shè)計(jì)規(guī)范，是第一道待翻越的高墻，完整的設(shè)計(jì)規(guī)范應(yīng)該是包含視覺規(guī)范與交互規(guī)范，本文主要針對(duì)設(shè)計(jì)規(guī)范實(shí)踐過(guò)程進(jìn)行闡述。
貼合場(chǎng)景的設(shè)計(jì)規(guī)范：
雖然市面上已經(jīng)有眾多成熟的設(shè)計(jì)規(guī)范體系可供使用，但是當(dāng)前我們所處的產(chǎn)品階段、多業(yè)務(wù) 線以及復(fù)雜的業(yè)務(wù)場(chǎng)景等綜合因素，決定了需要重新搭建一套符合我們自己業(yè)務(wù)場(chǎng)景的設(shè)計(jì)規(guī) 范體系。
UI規(guī)范效益最大化：
一旦我們決定制作規(guī)范，就要把規(guī)范當(dāng)成一個(gè)產(chǎn)品去做。去梳理一套高效合理、可復(fù)用的制作流 程，去分析產(chǎn)出什么樣的「規(guī)范產(chǎn)品」才能產(chǎn)生最大的價(jià)值。 依據(jù)規(guī)范效益模型，在規(guī)范的制定中盡可能的提高規(guī)范的通用性至90%，先解決統(tǒng)一性，再解決場(chǎng)景細(xì)分，打造高質(zhì)量通用的模式庫(kù)以提高質(zhì)量和效率，并力求讓更多人從這套設(shè)計(jì)體系中獲益， 從而讓規(guī)范體系發(fā)揮更大的價(jià)值。
UI規(guī)范制定的策略：
明確用戶對(duì)設(shè)計(jì)規(guī)范的訴求，構(gòu)建適合產(chǎn)品的UI設(shè)計(jì)規(guī)范，首先，需要明確規(guī)范體系的用戶群體經(jīng)過(guò)設(shè)計(jì)團(tuán)隊(duì)多輪調(diào)研，確定設(shè)計(jì)規(guī)范面向的目標(biāo)用戶群、基于核心用戶的訴求，為后續(xù)規(guī)范內(nèi)容框架的制定提供依據(jù)。
確定UI設(shè)計(jì)價(jià)值觀：
產(chǎn)品歷史包袱重，系統(tǒng)結(jié)構(gòu)復(fù)雜，在提升用戶體驗(yàn)時(shí)，內(nèi)容表達(dá)「清晰明確」是第一要?jiǎng)?wù)，例如尊重已經(jīng)形成的用戶習(xí)慣，優(yōu)化改造時(shí)，注意版本之間的銜接，讓用戶「清晰明確」，這也是為什么將「清晰明確」作為價(jià)值觀之首，另外提升效率是企業(yè)級(jí)產(chǎn)品用戶體驗(yàn)的永恒主題，同時(shí)兼顧系統(tǒng)的簡(jiǎn)潔與一致。
梳理UI規(guī)范框架：
UI設(shè)計(jì)規(guī)范包括設(shè)計(jì)價(jià)值觀、全局規(guī)則、組件庫(kù)、模式庫(kù)、典型頁(yè)面、移動(dòng)端規(guī)范和設(shè)計(jì)資源框架整理主要從以下3個(gè)方面進(jìn)行：
1.梳理現(xiàn)有組件，剔除不使用的部分 。?
2.同類競(jìng)品的框架借鑒，查漏補(bǔ)缺。 ?
3.場(chǎng)景驗(yàn)證，與業(yè)務(wù)場(chǎng)景深度結(jié)合經(jīng)過(guò)充分論證和梳理，對(duì)規(guī)范框架做了重新定義，增補(bǔ)了業(yè)務(wù)缺少的內(nèi)容。
如上圖所示，例如對(duì)高頻的工具欄組件的補(bǔ)充，典型頁(yè)面的補(bǔ)充，增加模式庫(kù)以及全局規(guī)則，當(dāng)前第一個(gè)版本的規(guī)范框架是基于業(yè)務(wù)場(chǎng)景優(yōu)先級(jí)最高的內(nèi)容進(jìn)行制定，更多的規(guī)范內(nèi)容的增加依托于不斷的迭代，逐漸完善規(guī)范框架。
規(guī)范內(nèi)容的制定及評(píng)審：
組件規(guī)范包含：變更記錄、組件定義、何時(shí)使用、組件的類型、組件的響應(yīng)。
規(guī)范內(nèi)容制定的原則： ?
1.有明確場(chǎng)景可依。?
2.精簡(jiǎn)不必要的分支 例如在定義表單規(guī)范時(shí)，對(duì)于表單標(biāo)簽的對(duì)齊方式做了統(tǒng)一的約束，標(biāo)簽右對(duì)齊，輸入框左對(duì)齊全局保持統(tǒng)一。
邏輯正確、規(guī)則明確易懂： ?
例如常見的alert （警告提示）名稱調(diào)整為常駐提示，語(yǔ)義更貼合場(chǎng)景，便于理解。
規(guī)則的可拓展性，多場(chǎng)景的兼容性： ?
產(chǎn)品架構(gòu)是PC端到移動(dòng)端的自動(dòng)適配，因此在組件設(shè)計(jì)的時(shí)候需同時(shí)考慮PC端與移動(dòng)端的對(duì)應(yīng)關(guān)系以及兩端場(chǎng)景的兼容性。
協(xié)作及敏捷迭代： ?
規(guī)范發(fā)布后，伴隨著實(shí)際項(xiàng)目的檢驗(yàn)，業(yè)務(wù)場(chǎng)景的擴(kuò)充變化，如何高效的對(duì)設(shè)計(jì)規(guī)范進(jìn)行迭代，決定了設(shè)計(jì)系統(tǒng)能否持續(xù)的走得更遠(yuǎn)，規(guī)范內(nèi)容定期評(píng)審，必須通過(guò)業(yè)務(wù)、技術(shù)、設(shè)計(jì)評(píng)審，確保規(guī)范是可用的、可落地并且易于使用的規(guī)范后期不同的規(guī)范模塊專屬人負(fù)責(zé)，同時(shí)有backup，可以幫助走查復(fù)盤雙重保障規(guī)范的質(zhì)量。
敏捷易用的前端組件庫(kù)： ?
復(fù)雜的業(yè)務(wù)場(chǎng)景和多產(chǎn)品線特點(diǎn)，快速打造一套敏捷易用、高質(zhì)量并符合實(shí)際業(yè)務(wù)場(chǎng)景的前端組件庫(kù)，是提高產(chǎn)品研發(fā)效率、改善UI質(zhì)量、提升用戶體驗(yàn)的關(guān)鍵。
復(fù)雜的業(yè)務(wù)場(chǎng)景和多產(chǎn)品線特點(diǎn)，快速打造一套敏捷易用、高質(zhì)量并符合實(shí)際業(yè)務(wù)場(chǎng)景的前端組件庫(kù)，是提高產(chǎn)品研發(fā)效率、改善UI質(zhì)量、提升用戶體驗(yàn)的關(guān)鍵。
前端組件庫(kù)建立目標(biāo)： ?
1.提高開發(fā)效率，對(duì)高頻使用、通用組件進(jìn)行代碼化封裝，避免重復(fù)開發(fā)工作。 ?
2.提高開發(fā)質(zhì)量，通過(guò)各類業(yè)務(wù)場(chǎng)景和業(yè)務(wù)線的錘煉，沉淀組件代碼最佳實(shí)踐。 ?
3.提高產(chǎn)品體驗(yàn)，組件封裝代碼化，減少在多角色協(xié)同中因?yàn)槔斫馄?、信息傳遞問(wèn)題等導(dǎo)致的不確定性和結(jié)果不可控性，不同業(yè)務(wù)線、不行項(xiàng)目、共用一套基礎(chǔ)代碼，保證體驗(yàn)的一致性，組件的組織形式： 結(jié)合實(shí)際業(yè)務(wù)場(chǎng)景和原子設(shè)計(jì)理論，將組件劃分為不同顆粒度：基礎(chǔ)組件、業(yè)務(wù)組件、典型頁(yè)面 組件，以適用于不同研發(fā)場(chǎng)景使用。
1.基礎(chǔ)組件，基礎(chǔ)組件為組件庫(kù)最小顆粒度，構(gòu)成系統(tǒng)界面的基本構(gòu)件。 ?
2.業(yè)務(wù)組件，在基礎(chǔ)組件的基礎(chǔ)上，結(jié)合具有共性業(yè)務(wù)特征的業(yè)務(wù)場(chǎng)景，梳理出具有業(yè)務(wù)特征的 業(yè)務(wù)組件。 ? 3.典型頁(yè)面組件，梳理具有業(yè)務(wù)特點(diǎn)的典型頁(yè)面，相比基礎(chǔ)組件和業(yè)務(wù)組件，典型頁(yè)面更加具體， 為用戶提供具有代表性的內(nèi)容和框架，并準(zhǔn)確描述用戶最終看到的內(nèi)容。如列表和左樹右表典型 頁(yè)面組件，作為最為常見的頁(yè)面結(jié)構(gòu)，各業(yè)務(wù)場(chǎng)景可復(fù)用頁(yè)面組件，保證了頁(yè)面組件內(nèi)各基礎(chǔ)組 件的一致性，最大程度的實(shí)現(xiàn)不同產(chǎn)品線產(chǎn)品中頁(yè)面體驗(yàn)的一致性。
推進(jìn)前端組件庫(kù)落地執(zhí)行： ?
前期設(shè)計(jì)規(guī)范落地到組件庫(kù)過(guò)程中，面臨諸多問(wèn)題和阻礙，比如開發(fā)落地質(zhì)量不高、內(nèi)容遺漏、 各方理解不一致、驗(yàn)收及修復(fù)問(wèn)題不到位等問(wèn)題。處理這些問(wèn)題對(duì)UI團(tuán)隊(duì)資源造成很大消耗， 通過(guò)總結(jié)復(fù)盤前期組件庫(kù)落地時(shí)的經(jīng)驗(yàn)和教訓(xùn)，梳理落地執(zhí)行流程，在新的協(xié)作流程下，新一 批的組件開發(fā)不論在協(xié)作效率和開發(fā)質(zhì)量上都有質(zhì)的提升。
分層推進(jìn)： ?
組件庫(kù)開發(fā)是一個(gè)持續(xù)迭代的過(guò)程，考慮到組件庫(kù)開發(fā)資源極為有限且無(wú)專職負(fù)責(zé)人員，在跟組 件庫(kù)開發(fā)團(tuán)隊(duì)協(xié)同過(guò)程中，我們通過(guò)分步開發(fā)來(lái)解決組件庫(kù)更新優(yōu)化的問(wèn)題并通過(guò)不斷優(yōu)化協(xié)作流程來(lái)助力組件庫(kù)高效落地。
前端組件庫(kù)分步開發(fā)原則： ?
1.優(yōu)先級(jí)原則，優(yōu)先開發(fā)適用于業(yè)務(wù)線普適場(chǎng)景的組件。 ?
2.緊急性原則，對(duì)于急需的業(yè)務(wù)線所需組件優(yōu)先開發(fā)。 ?
3.快速可實(shí)現(xiàn)原則，開發(fā)實(shí)現(xiàn)成本高的組件暫緩處理。
自查走查驗(yàn)收： ?
組件UI責(zé)任人梳理出下屬組件需開發(fā)落地的細(xì)節(jié)點(diǎn)，整理為文檔，待開發(fā)人員完成組件開發(fā)后，自行參照UI提供的自查文檔，查漏補(bǔ)缺，保障進(jìn)入U(xiǎn)I驗(yàn)收環(huán)節(jié)的前端組件不會(huì)出現(xiàn)較多的缺陷，降低后期走查和溝通修改的工作量，同時(shí)監(jiān)督開發(fā)人員提高組件落地還原度和質(zhì)量。
組件庫(kù)的持續(xù)迭代： ?
UI團(tuán)隊(duì)通過(guò)一套標(biāo)準(zhǔn)的流程來(lái)把控組件庫(kù)迭代的質(zhì)量，在日常工作中經(jīng)常會(huì)收到產(chǎn)品經(jīng)理或項(xiàng)目 方提出新的組件需求或?qū)ΜF(xiàn)有組件的優(yōu)化。UI部門作為推動(dòng)組件庫(kù)搭建的核心環(huán)節(jié)，需要以全局 和更深入的視角加以判斷把關(guān)，保證前端組件庫(kù)內(nèi)容的普適性和高質(zhì)量，避免組件庫(kù)內(nèi)容冗余， 降低研發(fā)維護(hù)成本。
產(chǎn)品研發(fā)協(xié)作流程保障： ?
好的過(guò)程是好的結(jié)果的有力保障，一個(gè)業(yè)務(wù)需求從產(chǎn)生到開發(fā)落地需要經(jīng)過(guò)多角色協(xié)同、一系 列環(huán)節(jié)。必須依靠規(guī)范的研發(fā)協(xié)作流程，確保各角色清楚自己職責(zé)以及如何跟上下游銜接，同 時(shí)我們也希望協(xié)作流程能夠確保設(shè)計(jì)資源可以向重點(diǎn)業(yè)務(wù)模塊傾斜，以及發(fā)揮各個(gè)角色可以發(fā) 揮的作用去共同提升產(chǎn)品體驗(yàn)。
UED團(tuán)隊(duì)建立之初，我們面臨的首要問(wèn)題是：需求隨機(jī)，完全取決于各產(chǎn)品線和產(chǎn)品經(jīng)理 個(gè)人，為了解決這個(gè)問(wèn)題，我們制定了UI融入研發(fā)體系的流程以解決合理、有效利用UI資 源的問(wèn)題。
企業(yè)級(jí)產(chǎn)品特點(diǎn)、多業(yè)務(wù)線、大量面向管理員用戶的具有相似頁(yè)面結(jié)構(gòu)和交互模式的業(yè)務(wù) 模塊、產(chǎn)品經(jīng)理跟交互團(tuán)隊(duì)人員配比等因素都決定了并非所有需求都需要流轉(zhuǎn)到UI團(tuán)隊(duì)進(jìn) 行設(shè)計(jì)，在判斷哪些需求需要流轉(zhuǎn)至UI團(tuán)隊(duì)設(shè)計(jì)時(shí)，我們給出了如下指導(dǎo)性方向： ?
1.用戶量角度，大量終端用戶使用的場(chǎng)景，例如訂票、報(bào)銷、采購(gòu)頁(yè)面 。 ?
2.用戶重要程度角度，核心、重要用戶使用的場(chǎng)景 eg.公司領(lǐng)導(dǎo)、決策層。 ?
3.通用性角度，通用組件或框架，需要UI通盤考慮各個(gè)業(yè)務(wù)線場(chǎng)景需求進(jìn)行設(shè)計(jì)。 其他需求則主要由產(chǎn)品經(jīng)理進(jìn)行設(shè)計(jì)，UX以評(píng)審方式輕度參與。
協(xié)作流程迭代，UI驗(yàn)收成為必要一環(huán)： 隨后我們又面臨新的問(wèn)題：設(shè)計(jì)還原度差，被公司老板生動(dòng)的形容為：看設(shè)計(jì)稿是“精裝修”， 開發(fā)落地后就成了“毛坯房”了。為盡可能確保設(shè)計(jì)還原質(zhì)量，我們?cè)谘邪l(fā)流程中明確了所有涉 及前端頁(yè)面的功能需求都需要在研發(fā)協(xié)同工具中流轉(zhuǎn)到UI負(fù)責(zé)人驗(yàn)收，在產(chǎn)品團(tuán)隊(duì)TAPD中記 錄UI缺陷、標(biāo)明嚴(yán)重程度，對(duì)于 “嚴(yán)重” 級(jí)別以上UI缺陷，禁止發(fā)版。
UI工期評(píng)估合理化：
為了既能盡力配合各產(chǎn)品線迭代計(jì)劃又要爭(zhēng)取合理UI設(shè)計(jì)時(shí)間、保證產(chǎn)出質(zhì)量，合理評(píng)估設(shè)計(jì)周期對(duì)UI人力管理尤其重要。對(duì)此，我們對(duì)設(shè)計(jì)需求分成了ABC三級(jí)進(jìn)行評(píng)估。 對(duì)于A和B級(jí)需求，通常模塊較大，先有UI設(shè)計(jì)方案再去分期迭代開發(fā)，對(duì)于這兩類需求，在評(píng)估 模型中給出了大致工期概念，比如以月為單位，大于1個(gè)月或2個(gè)月。
對(duì)于C級(jí)需求，通常為產(chǎn)品經(jīng)理先排進(jìn)某個(gè)迭代再來(lái)提UI設(shè)計(jì)需求，設(shè)計(jì)范圍相對(duì)明確，我們則結(jié)合典型頁(yè)面數(shù)量因子和設(shè)計(jì)難度因子給出了UI工期大概評(píng)估公式，以天為單位。 ?
1.設(shè)計(jì)難度因子：根據(jù)業(yè)務(wù)線的復(fù)雜程度而定，范圍為（0.8~1.5）。 ?
2.典型頁(yè)面數(shù)量因子：評(píng)估需求范圍規(guī)模（N）。
UI設(shè)計(jì)團(tuán)隊(duì)在協(xié)作過(guò)程中面臨諸多挑戰(zhàn)：產(chǎn)品線多、產(chǎn)品邏輯復(fù)雜、研發(fā)鏈路長(zhǎng)、各級(jí)人員對(duì)產(chǎn)品認(rèn)知及重視程度不一、好的體驗(yàn)設(shè)計(jì)難落地、溝通成本高等問(wèn)題，想要解決這些問(wèn)題，若僅靠UI團(tuán)隊(duì)自身力量是不夠的，需要?jiǎng)訂T公司各個(gè)環(huán)節(jié)和人員重視用戶體驗(yàn)，共同促進(jìn)產(chǎn) 品體驗(yàn)提升。
搭建體驗(yàn)文化灌溉機(jī)制：
UI部門通過(guò)多維度的體驗(yàn)知識(shí)內(nèi)容矩陣、多渠道多場(chǎng)景全員覆蓋，普及和加深各級(jí)對(duì)產(chǎn)品體驗(yàn) 價(jià)值的認(rèn)識(shí)，提升產(chǎn)品體驗(yàn)思考力和洞察力，幫助企業(yè)以新的視角思考業(yè)務(wù)、產(chǎn)品研發(fā)和用戶 體驗(yàn)的關(guān)系，賦能產(chǎn)品經(jīng)理及研發(fā)人員高質(zhì)量的輸出，“以用戶為中心”和“打造產(chǎn)品極致體驗(yàn)” 的價(jià)值觀根植與企業(yè)文化中，指導(dǎo)研發(fā)流程中各項(xiàng)工作最終影響到產(chǎn)品的戰(zhàn)略層、范圍層、結(jié) 構(gòu)層、框架層和表現(xiàn)層這5個(gè)產(chǎn)品體驗(yàn)維度，以實(shí)現(xiàn)企業(yè)產(chǎn)品的“極致產(chǎn)品體驗(yàn)”目標(biāo)。 通過(guò)搭建體驗(yàn)文化灌溉機(jī)制，提升全員體驗(yàn)意識(shí)，能為產(chǎn)品研發(fā)帶來(lái)長(zhǎng)久的價(jià)值： ?
1.提高設(shè)計(jì)還原度 ?
2.減少培訓(xùn)成本 ?
3.提升跨部門溝通效率 ?
4.提升UI團(tuán)隊(duì)影響力 ?
5.提升客戶滿意度
體驗(yàn)文化落地實(shí)踐：
針對(duì)不同類型的體驗(yàn)知識(shí)，我們采取不同的傳播渠道進(jìn)行透，以期達(dá)到最好的效果，避免形式化， 將體驗(yàn)文化滲透、學(xué)習(xí)落到實(shí)處，最終影響產(chǎn)品研發(fā)的各個(gè)環(huán)節(jié)。
以下為UI團(tuán)隊(duì)在企業(yè)體驗(yàn)文化 推廣的主要渠道和方法： ?
極致體驗(yàn)公眾號(hào)主要發(fā)布產(chǎn)品體驗(yàn)的基礎(chǔ)原理，體驗(yàn)價(jià)值、項(xiàng)目復(fù)盤、常見體驗(yàn)問(wèn)題等深度長(zhǎng)文。讓公司各級(jí)人 員認(rèn)識(shí)用戶體驗(yàn)及價(jià)值，讓用戶體驗(yàn)理念深入人心。 ?
體驗(yàn)知識(shí)小卡片整理產(chǎn)品體驗(yàn)小的知識(shí)點(diǎn)，閱讀學(xué)習(xí)成本低。利用員工碎片時(shí)間，對(duì)細(xì)小體驗(yàn)知識(shí)點(diǎn)的學(xué)習(xí)，積 跬步，至千里。 ?
直播宣講針對(duì)重點(diǎn)且復(fù)雜的產(chǎn)品體驗(yàn)內(nèi)容，如交互規(guī)范宣講、重點(diǎn)問(wèn)題復(fù)盤、產(chǎn)品經(jīng)理及開發(fā)人員應(yīng)知應(yīng) 會(huì)的知識(shí)點(diǎn)，采用宣講直播的方式，更好的對(duì)內(nèi)容進(jìn)行詳細(xì)解說(shuō)和疑難問(wèn)題溝通。 ?
體驗(yàn)調(diào)研分享UI部門成員對(duì)核心競(jìng)品進(jìn)行體驗(yàn)調(diào)研，整理分析后對(duì)產(chǎn)品經(jīng)理及相關(guān)人員進(jìn)行分享，賦能產(chǎn)品經(jīng) 理，為產(chǎn)品的體驗(yàn)設(shè)計(jì)提供新的思路。
UI團(tuán)隊(duì)專業(yè)水平一定程度上決定了公司產(chǎn)品體驗(yàn)的上限，持續(xù)提升UI自身專業(yè)輸出能力可以從源頭提升公司產(chǎn)品體驗(yàn)。
設(shè)計(jì)自查：
企業(yè)級(jí)產(chǎn)品的大量體驗(yàn)問(wèn)題都是設(shè)計(jì)基礎(chǔ)問(wèn)題。因此需要設(shè)計(jì)師不論在內(nèi)審前，還是內(nèi)審過(guò)程中都要牢記設(shè)計(jì)原則，查漏補(bǔ)缺，守住底線。我們?cè)诓块T內(nèi)部制定了一套適合企業(yè)產(chǎn)品的UI自查表來(lái)檢查設(shè)計(jì)方案，通過(guò)這些自查點(diǎn)來(lái)避免產(chǎn)品中出現(xiàn)基礎(chǔ)體驗(yàn)問(wèn)題，從UI設(shè)計(jì)師自己這里 把好第一道關(guān)。
在日常工作中，UI自查表始終占據(jù)工區(qū)的醒目位置。在評(píng)審過(guò)程中，大家也會(huì)通過(guò)線上文檔的形 式來(lái)對(duì)設(shè)計(jì)原則的條目進(jìn)行逐一檢查。
做好UI內(nèi)部評(píng)審：
設(shè)計(jì)團(tuán)隊(duì)內(nèi)評(píng)審（Design critique）是幾乎所有國(guó)內(nèi)外設(shè)計(jì)團(tuán)隊(duì)的普遍、經(jīng)典做法，可以有效提 高設(shè)計(jì)產(chǎn)出水平、保證團(tuán)隊(duì)對(duì)外輸出質(zhì)量。方法是普適的，但具體執(zhí)行時(shí)如何做才能有更好的效果卻各有各異。 在如何做好內(nèi)部評(píng)審上，我們進(jìn)行了如下嘗試。 從“全員參與” 到 “組成內(nèi)部評(píng)審委員會(huì)” 團(tuán)隊(duì)內(nèi)評(píng)審時(shí)邀請(qǐng)全員參加，但發(fā)現(xiàn)只有少數(shù)同事發(fā)言，另外一些同事因資歷淺、不了解評(píng)審產(chǎn)品或者積極性不高給不出建議。同時(shí)隨著團(tuán)隊(duì)成員數(shù)量從幾個(gè)增加到十幾個(gè)，評(píng)審會(huì)議的時(shí)間成 本大大增加。
選取團(tuán)隊(duì)內(nèi)相對(duì)資深和積極提出問(wèn)題、建議的同事組成內(nèi)部評(píng)審委員會(huì)，以月為周期輪流進(jìn)行， 可以有效分散評(píng)審委員在團(tuán)隊(duì)內(nèi)部評(píng)審上的工作負(fù)荷，并明確一次UI內(nèi)部評(píng)審除了內(nèi)部評(píng)審委員 會(huì)還有哪些關(guān)聯(lián)同事需要參加。 關(guān)于邀請(qǐng)?jiān)u審內(nèi)容關(guān)聯(lián)同事，比如“消息中心” UI評(píng)審跟另外一位同事負(fù)責(zé)的“討論消息”有關(guān)聯(lián)，則需要邀請(qǐng)這位同事一起評(píng)審，以便發(fā)現(xiàn)關(guān)聯(lián)問(wèn)題，整體考慮設(shè)計(jì)方案。
以上參與評(píng)審機(jī)制明確在團(tuán)隊(duì)內(nèi)部協(xié)作工具上，做到人人清楚。另外，對(duì)于評(píng)審建議，要做到有 記錄、有回應(yīng)、有跟蹤，確保有效發(fā)揮了內(nèi)部評(píng)審的價(jià)值。
UI設(shè)計(jì)師的能力模型：不言而喻，UI設(shè)計(jì)師自身能力的培養(yǎng)是UI品控的重要一環(huán)。因此對(duì)于設(shè)計(jì)師能力培養(yǎng)通道上，我 們引入了以下模型。
我們將UI設(shè)計(jì)師能力歸納成了3x3能力矩陣。這可以設(shè)計(jì)師在工作中也可以有目的提升自身薄弱環(huán)節(jié)，同時(shí)也讓企業(yè)對(duì)UI設(shè)計(jì)師的要求更加清晰，除此之外，我們要求UI設(shè)計(jì)師也需要多了解業(yè)務(wù)和前端知識(shí)，往前多走一步，跟上下游角色更好的銜接，一方面，UI設(shè)計(jì)師需要理解業(yè)務(wù)，要能夠有半個(gè)產(chǎn)品經(jīng)理的業(yè)務(wù)知識(shí)儲(chǔ)備， 如果能站在更高的行業(yè)視角對(duì)自己所服務(wù)的業(yè)務(wù)領(lǐng)域（向 業(yè)務(wù)產(chǎn)品經(jīng)理再邁進(jìn)一點(diǎn)）有一定的理解是更好的了，另外一方面，UI設(shè)計(jì)師跟自己的下游-前端 開發(fā)工程師也需要很好的銜接上，知道相關(guān)前端技術(shù)概念、基本頁(yè)面布局和交互實(shí)現(xiàn)邏輯、方法，能夠無(wú)縫地將界面和交互設(shè)計(jì)翻譯成前端可理解的語(yǔ)言。
蘭亭妙微(cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 設(shè)計(jì)思維
對(duì)于產(chǎn)品設(shè)計(jì)師來(lái)說(shuō)，在同質(zhì)化的環(huán)境中我們需要具備突破創(chuàng)意的思維，這樣才能輸出差異化的設(shè)計(jì)方案。而創(chuàng)意離不開優(yōu)秀作品的靈感啟發(fā)，發(fā)現(xiàn)有意思的設(shè)計(jì)細(xì)節(jié)也能提高我們的設(shè)計(jì)思維。
今天黑馬哥將會(huì)繼續(xù)為大家?guī)?lái)一些優(yōu)秀的設(shè)計(jì)細(xì)節(jié)，我們一起來(lái)反思一下，這樣的設(shè)計(jì)想法為啥自己沒有想到呢？
分享目錄
一、營(yíng)造頂部區(qū)域視覺感與情感化
二、主題化配圖增強(qiáng)視覺感
三、彈幕式標(biāo)簽提高關(guān)注度
四、IP 強(qiáng)化底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)
五、強(qiáng)化動(dòng)態(tài)發(fā)布的引導(dǎo)設(shè)計(jì)
六、連貫性的插畫突出卡片特色
七、動(dòng)態(tài)表情化的評(píng)價(jià)設(shè)計(jì)
八、場(chǎng)景化的推薦設(shè)計(jì)
九、上下輪播的 Banner 設(shè)計(jì)
十、情感化的氛圍營(yíng)造
一、營(yíng)造頂部區(qū)域視覺感與情感化
產(chǎn)品頂部區(qū)域的視覺感是吸引用戶的關(guān)鍵，在一些功能單一的產(chǎn)品中，強(qiáng)化視覺表現(xiàn)力也是提升產(chǎn)品豐富度的有效形式。
比如麥當(dāng)勞 App 首頁(yè)的設(shè)計(jì)中，頂部區(qū)域結(jié)合溫馨的場(chǎng)景插畫進(jìn)行表達(dá)，讓你早上打開麥當(dāng)勞就有種心情愉悅感。動(dòng)態(tài)的太陽(yáng)微笑畫面給你一天好心情，情感化的設(shè)計(jì)不僅增強(qiáng)了視覺感，也帶給用戶美好的產(chǎn)品使用體驗(yàn)。
二、主題化配圖增強(qiáng)視覺感
封面圖在產(chǎn)品規(guī)范中相對(duì)比較難約束，通過(guò)構(gòu)圖、比例、固定元素和配圖質(zhì)量等，在一定程度上可以提高感官體驗(yàn)。如果是在重點(diǎn)突出的內(nèi)容上面，結(jié)合主題化配圖也可以增強(qiáng)視覺感。
之前在使用優(yōu)酷 App 時(shí)，當(dāng)時(shí)在重點(diǎn)突出熱劇的設(shè)計(jì)中，就將主題化的內(nèi)容融入到宮格的配圖中。以統(tǒng)一的畫面風(fēng)格和設(shè)計(jì)表現(xiàn)形式填充封面，增強(qiáng)了視覺表現(xiàn)力，以此突出熱劇的吸引力。
三、彈幕式標(biāo)簽提高關(guān)注度
在固定的結(jié)構(gòu)布局中如何提高局部?jī)?nèi)容的關(guān)注度，我們需要在不改變結(jié)構(gòu)的前提下進(jìn)行創(chuàng)意融入。比如動(dòng)態(tài)畫面、突出視覺感、內(nèi)容特異化等等，而最近發(fā)現(xiàn)彈幕式標(biāo)簽也是一個(gè)不錯(cuò)的選擇。
在體驗(yàn)優(yōu)酷 App 時(shí)，在動(dòng)漫欄目中針對(duì)推薦的熱播新番，想要突出的動(dòng)漫結(jié)合了彈幕式標(biāo)簽進(jìn)行強(qiáng)化。動(dòng)感的節(jié)奏會(huì)提高用戶的關(guān)注度，在不改變當(dāng)前結(jié)構(gòu)的基礎(chǔ)上，不失為一種有效的解決方案。
四、IP 強(qiáng)化底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)
底部標(biāo)簽欄圖標(biāo)是產(chǎn)品設(shè)計(jì)師經(jīng)常發(fā)揮的場(chǎng)景，在一些節(jié)慶主題或者活動(dòng)中都會(huì)定制設(shè)計(jì)。
優(yōu)酷 App 在元旦促銷活動(dòng)期間，就將底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)與 IP 形象結(jié)合，默認(rèn)以促銷主題文字展示，點(diǎn)擊狀態(tài)以 IP 形象顯示。圖標(biāo)與活動(dòng)相結(jié)合，不僅突出圖標(biāo)視覺表現(xiàn)，也營(yíng)造了活動(dòng)氛圍感。
五、強(qiáng)化動(dòng)態(tài)發(fā)布的引導(dǎo)設(shè)計(jì)
對(duì)于靠?jī)?nèi)容吸引用戶參與度的產(chǎn)品來(lái)說(shuō)，提高用戶發(fā)布動(dòng)態(tài)的意愿度至關(guān)重要，突出動(dòng)態(tài)發(fā)布的吸引力也能起到促進(jìn)作用。
會(huì)玩 App 在動(dòng)態(tài)發(fā)布的引導(dǎo)設(shè)計(jì)中給出了不錯(cuò)的思路，未發(fā)布動(dòng)態(tài)時(shí)會(huì)以形象化的空狀態(tài)設(shè)計(jì)進(jìn)行引導(dǎo)。動(dòng)態(tài)發(fā)布的按鈕旁以俏皮可愛的形象進(jìn)行引導(dǎo)設(shè)計(jì)，提高了按鈕的吸引力，讓用戶有種參與的沖動(dòng)。情感化設(shè)計(jì)的引導(dǎo)不僅可以增強(qiáng)感官體驗(yàn)，也更容易攻破用戶的防備心理。
六、連貫性的插畫突出卡片特色
卡片式設(shè)計(jì)已經(jīng)成為主流的產(chǎn)品設(shè)計(jì)趨勢(shì)，信息的歸納感可以提高識(shí)別效率。探索卡片設(shè)計(jì)的表現(xiàn)特色尤為重要，重點(diǎn)在于卡片造型和內(nèi)部視覺表現(xiàn)力的發(fā)揮層面。
麥當(dāng)勞 App 在主內(nèi)容的卡片設(shè)計(jì)上運(yùn)用了配送場(chǎng)景插畫，連貫性的插畫突出了卡片特色。插畫場(chǎng)景結(jié)合了品牌圖形，增強(qiáng)了麥當(dāng)勞的品牌曝光度；白天和晚上還以不同配色風(fēng)格和細(xì)節(jié)進(jìn)行差異表現(xiàn)，無(wú)論是想法還是設(shè)計(jì)細(xì)節(jié)都非常不錯(cuò)，是一個(gè)挺有創(chuàng)意的案例表現(xiàn)。
七、動(dòng)態(tài)表情化的評(píng)價(jià)設(shè)計(jì)
用戶評(píng)價(jià)可以反饋服務(wù)的質(zhì)量，進(jìn)而做出產(chǎn)品迭代或者服務(wù)調(diào)整的思路。如何提高用戶參與評(píng)價(jià)的積極性，需要產(chǎn)品設(shè)計(jì)師多多探索啦！
最近在使用順豐速運(yùn)小程序時(shí)，完成快遞業(yè)務(wù)之后進(jìn)行評(píng)價(jià)，表情化的星級(jí)評(píng)價(jià)非常有意思。不同等級(jí)以不同的表情呈現(xiàn)，動(dòng)態(tài)表達(dá)非常形象生動(dòng)，讓人不由的挨個(gè)體驗(yàn)。動(dòng)態(tài)表情的形式提高了評(píng)價(jià)的關(guān)注度，情感化的表達(dá)讓用戶更愿意參與評(píng)價(jià)，提高了評(píng)價(jià)的體驗(yàn)度。
八、場(chǎng)景化的推薦設(shè)計(jì)
針對(duì)電商類產(chǎn)品來(lái)說(shuō)，商品/店鋪推薦模塊出現(xiàn)頻次較高，吸引用戶關(guān)注度自然成為了設(shè)計(jì)的首要目標(biāo)。
在體驗(yàn) Mars App 時(shí)，在生活超市推薦的設(shè)計(jì)中，模擬了便利店的場(chǎng)景形象。真實(shí)感的場(chǎng)景表達(dá)帶給用戶親切自然的購(gòu)物體驗(yàn)，同時(shí)也提高了用戶對(duì)于該模塊的關(guān)注度。
九、上下輪播的 Banner 設(shè)計(jì)
輪播 Banner 圖算是產(chǎn)品設(shè)計(jì)中最常見的模塊，在移動(dòng)端的設(shè)計(jì)中通常左右輪播為主，最近體驗(yàn)到上下輪播的案例，打破常規(guī)也不失為一種新的設(shè)計(jì)思路。
在 Mars App 的首頁(yè) Banner 圖以上下輪播進(jìn)行交互，左側(cè)固定展示定位城市的天氣等信息，提高了 Banner 位置的利用率。Banner 與金剛區(qū)懸浮在特定的背景上，帶給用戶沉浸式的感官體驗(yàn)。
十、情感化的氛圍營(yíng)造
情感化的設(shè)計(jì)可以讓產(chǎn)品更有溫度，增加用戶對(duì)產(chǎn)品的好感度。配合傳統(tǒng)節(jié)日或者節(jié)氣主題進(jìn)行表達(dá)是相對(duì)比較普遍的形式，會(huì)在產(chǎn)品主題和視覺區(qū)域進(jìn)行氛圍營(yíng)造。
在清明節(jié)期間體驗(yàn)飛豬旅行 App 時(shí)，頂部區(qū)域以踏春的場(chǎng)景營(yíng)造氛圍感，還在搜索區(qū)域以青團(tuán)（青團(tuán)是江南人家在清明節(jié)吃的一道傳統(tǒng)點(diǎn)心）替代搜索按鈕。情感化的設(shè)計(jì)營(yíng)造不僅體現(xiàn)了產(chǎn)品的溫度，也帶給用戶對(duì)于節(jié)日的場(chǎng)景體驗(yàn)。
小結(jié)
禁錮我們思維的不是我們的技術(shù)，而是我們的眼界和設(shè)計(jì)感知。發(fā)現(xiàn)優(yōu)秀的設(shè)計(jì)并總結(jié)和轉(zhuǎn)化，才能讓我們打開禁錮的思維，在優(yōu)秀的基礎(chǔ)上輸出更好的設(shè)計(jì)解決方案。
本文對(duì)于設(shè)計(jì)的理解闡述屬于個(gè)人見解，不足之處歡迎大家留言補(bǔ)充，我們互相進(jìn)步。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
蘭亭妙微(cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
如果說(shuō)設(shè)計(jì)思維是設(shè)計(jì)師做設(shè)計(jì)的基礎(chǔ)，那么用戶思維就是你發(fā)現(xiàn)和解決問(wèn)題的能力，到底什么是用戶思維？有沒有一些具體詳細(xì)的解釋讓我們了解它呢？請(qǐng)看分享。
用戶思維-環(huán)境
說(shuō)到用戶思維第一個(gè)必須是用戶環(huán)境，環(huán)境分為設(shè)計(jì)師的設(shè)計(jì)環(huán)境，以及用戶使用你的產(chǎn)品環(huán)境，以及物理環(huán)境，是不是有刮風(fēng)、下雨的惡劣天氣。
1.你的設(shè)計(jì)環(huán)境
▲上圖是大多數(shù)設(shè)計(jì)師平時(shí)工作環(huán)境，每天早上我們帶著一杯星巴克，用著蘋果電腦，打開iMAC做著設(shè)計(jì)，效果圖每張圖片都精挑細(xì)選，我們也理所當(dāng)然的以為我們的用戶也和我們一樣，大家都是用的蘋果電腦，用的蘋果手機(jī)？
2.你心中用戶的環(huán)境
▲很多設(shè)計(jì)師作品集里面喜歡放用戶畫像，我們理想的用戶畫像都像上圖一樣，用戶都是白領(lǐng)，聰明學(xué)歷高，能很好的看明白你的設(shè)計(jì)，也會(huì)使用。就像我之前做支付寶，也曾以為用戶都是如上圖所示，其實(shí)不是。很多時(shí)候用戶的場(chǎng)景和我們想象中相差甚遠(yuǎn)。
3.用戶實(shí)際的環(huán)境
大家都是每天地鐵里面，在沒有wifi和4G的公交，地鐵里。也都是用的大屏設(shè)計(jì)，各種安卓手機(jī)。
▲舉個(gè)例子，這個(gè)「放大鏡」，做設(shè)計(jì)是人都知道是代表「搜索」但是在我們走訪線下實(shí)際場(chǎng)景時(shí)候，下沉到三四線城市的時(shí)候，很多時(shí)候人們并不認(rèn)識(shí)。
▲三四線城市用戶就覺得這個(gè)像「平底鍋」，不知道是什么意思，這種情況不在少數(shù)。
▲家里有一臺(tái)臺(tái)式電腦給父母用，有一次打電話給我說(shuō)，有個(gè)流氓軟件經(jīng)常彈窗，我教他們?nèi)ノ业碾娔X，找到「設(shè)備管理器」卸載掉即可，結(jié)果，父母問(wèn)什么是「設(shè)備管理器」？
所以，你會(huì)發(fā)現(xiàn)，用戶其實(shí)和我們心目中想象的相差甚遠(yuǎn)。我們覺得很基礎(chǔ)的互聯(lián)網(wǎng)知識(shí)，在他們那里可能會(huì)很復(fù)雜。
4.用戶設(shè)備環(huán)境
機(jī)型尺寸：安卓機(jī)的機(jī)型遠(yuǎn)遠(yuǎn)比我們想象的要多，各種超大屏，國(guó)內(nèi)廠商各種千奇百怪的屏幕，這些做設(shè)計(jì)都需要考慮。
操作系統(tǒng)：不同的操作系統(tǒng)，有華為系統(tǒng)，小米系統(tǒng)，魅族以及各種第三方定制的系統(tǒng)，這些系統(tǒng)上呈現(xiàn)效果，都是需要在設(shè)計(jì)時(shí)候需要去考慮的。
手機(jī)分辨率：安卓和蘋果屏幕各種大小，和主流的分辨率，設(shè)計(jì)時(shí)候如何適配，才能很好滿足主流用戶的體驗(yàn)，也都需要設(shè)計(jì)師提前去規(guī)劃。
5.用戶物理環(huán)境
室內(nèi)環(huán)境：用戶在室內(nèi)使用我們產(chǎn)品時(shí)候，是不是應(yīng)該考慮如果是室內(nèi)，光線可以自動(dòng)的調(diào)節(jié)。比如蘋果的系統(tǒng)，會(huì)根據(jù)用戶室內(nèi)室外的光線，調(diào)整亮度。
室外環(huán)境：用戶在陽(yáng)光下使用，那么亮度變化，陽(yáng)光下字體識(shí)別度等等，都應(yīng)該考慮進(jìn)去。比如白天和晚上使用蘋果電腦時(shí)候的場(chǎng)景，是否有不同，比如iOS系統(tǒng)的設(shè)計(jì)，也是重復(fù)考慮用戶實(shí)際用戶場(chǎng)景。
網(wǎng)絡(luò)環(huán)境：用戶在有無(wú)限和5G情況下的體驗(yàn)，是不是視頻直接播放，減少等待，當(dāng)用戶在地鐵手機(jī)網(wǎng)絡(luò)不好時(shí)候，視頻是不是支持緩存或者提醒用戶在使用流量。所以在產(chǎn)品設(shè)計(jì)時(shí)候，重復(fù)需要考慮用戶這種場(chǎng)景。
▲抖音和騰訊視頻，在用戶非wifi情況下，會(huì)提醒用戶當(dāng)前網(wǎng)絡(luò)環(huán)境，提示用戶注意流量使用，除了流量提醒，其實(shí)包括網(wǎng)絡(luò)加載不出來(lái)時(shí)候，如何設(shè)計(jì)產(chǎn)品策略都是需要設(shè)計(jì)時(shí)候考慮的。
噪音和隱私：比如在公共場(chǎng)合噪音大的時(shí)候，產(chǎn)品體驗(yàn)該怎么優(yōu)化，有木有可能聲音自動(dòng)調(diào)整大，比如微信當(dāng)你外面很吵時(shí)候，直接把語(yǔ)音放耳邊，就從外放變成內(nèi)放了。
▲比如支付寶理財(cái)頁(yè)面，資產(chǎn)和收益顯示可以隱藏金額，保護(hù)用戶隱私情況。以及支付寶在系統(tǒng)后臺(tái)時(shí)候，可以隱藏頁(yè)面。
總結(jié)下，我們平時(shí)設(shè)計(jì)中提到的用戶思維，其中關(guān)于環(huán)境的考慮就包括這些：
用戶實(shí)際環(huán)境
機(jī)型尺寸/2.操作系統(tǒng)/3.屏幕分辨率
用戶物理環(huán)境
1.室內(nèi)環(huán)境/2.室外環(huán)境/3/網(wǎng)絡(luò)環(huán)境/4.噪音和隱私
該怎么去做？
1.一部蘋果一部安卓機(jī)
之前在淘寶天貓時(shí)候，有些領(lǐng)導(dǎo)層會(huì)要求，必須使用安卓機(jī)作為主機(jī)，因?yàn)橹挥心闳ンw驗(yàn)安卓機(jī)，你才能發(fā)現(xiàn)頁(yè)面和產(chǎn)品有多少問(wèn)題，蘋果本身的系統(tǒng)設(shè)計(jì)比較好，問(wèn)題會(huì)比較少，但安卓系統(tǒng)沒有那么穩(wěn)定，容易出BUG；所以用安卓機(jī)能發(fā)現(xiàn)產(chǎn)品更多問(wèn)題，同時(shí)也能讓我們更關(guān)注到真實(shí)用戶的感受。
2.換位思考將心比心
簡(jiǎn)單來(lái)說(shuō)就是做設(shè)計(jì)要有同理心，懂得如何去“換位思考，將心比心”。要學(xué)會(huì)用普通用戶視角去審視我們的產(chǎn)品問(wèn)題，用理解的心態(tài)去理解用戶情緒；從用戶的角度看待問(wèn)題，進(jìn)而增加更多看待問(wèn)題的角度，找到更多設(shè)計(jì)的空間，最后達(dá)到解決問(wèn)題的目的。
之前支付寶時(shí)候，提倡管理層要每年去傾聽用戶聲音100小時(shí)，老板們需要每月抽時(shí)間去當(dāng)「客服」，看看用戶實(shí)際用我們的產(chǎn)品，有哪些難用的地方，從而做到真正從產(chǎn)品上解決用戶問(wèn)題。
用戶思維-場(chǎng)景
1.理解用戶從哪里來(lái)要到哪里去
去過(guò)迪士尼的朋友都知道，人很多，那么如何讓這么多人，有效的去體驗(yàn)更多的項(xiàng)目？就必須根據(jù)場(chǎng)景來(lái)設(shè)計(jì)，用戶從門口進(jìn)來(lái)，去往哪里，每個(gè)項(xiàng)目的設(shè)計(jì)環(huán)節(jié)都需要思考清楚。
場(chǎng)景是從哪里來(lái)到哪里去：從一個(gè)場(chǎng)景到另外一個(gè)場(chǎng)景。我記得之前玩過(guò)一個(gè)迪士尼項(xiàng)目加勒比海盜，里面就把每個(gè)環(huán)節(jié)設(shè)計(jì)的很符合整體場(chǎng)景。
▲從入口，到航行過(guò)程中，到大海里大戰(zhàn)，以及故事的高潮，到最后的收尾，都是從一個(gè)時(shí)間到另外一個(gè)時(shí)間，就像在電影中親身經(jīng)歷。其實(shí)我們做設(shè)計(jì)又何嘗不是。用戶從一個(gè)入口，到最終成交轉(zhuǎn)化整個(gè)鏈路。
所以場(chǎng)景思維很重要就是關(guān)注用戶，每個(gè)鏈路的體驗(yàn)環(huán)節(jié)，如何去發(fā)現(xiàn)其中問(wèn)題，找到設(shè)計(jì)撬動(dòng)點(diǎn)。
2.場(chǎng)景是帶時(shí)間維度的
時(shí)間維度很好理解，是用戶在完成任務(wù)整個(gè)過(guò)程中的行為，常見的有前，中，后。我們還是以案例來(lái)分析：
買之前：
▲認(rèn)知：用戶打開支付寶想買理財(cái)，但他很可能從來(lái)沒有買過(guò)理財(cái)產(chǎn)品，那么第一步他可能會(huì)去了解產(chǎn)品，了解里面的金融術(shù)語(yǔ)，比如七日年化，收益率等等。那么我們?cè)谠O(shè)計(jì)時(shí)候，就要去思考，如何降低用戶的認(rèn)知，如何用一些淺顯易懂的文案讓用戶理解理財(cái)。
▲搜索：用戶通過(guò)第一步了解了各個(gè)理財(cái)特點(diǎn)，鎖定要買基金產(chǎn)品，然后這個(gè)過(guò)程中，他會(huì)去對(duì)比每只基金的收益情況，去尋找適合他的產(chǎn)品。
買之中：
▲判斷：用戶終于發(fā)現(xiàn)了一個(gè)比較符合他心中預(yù)期的產(chǎn)品，然后會(huì)去比較這產(chǎn)品的優(yōu)缺點(diǎn)，比如它最后想選擇，收益在6-8%的一只產(chǎn)品，然后會(huì)去思考到底買那一只合適。
▲下單：最后用戶選擇了這款收益為6%的產(chǎn)品，然后進(jìn)行交易。
買之后：
▲查看：最后用戶購(gòu)買成功了，購(gòu)買后，他就會(huì)每天來(lái)看他這只產(chǎn)品的收益情況，每天的收益，每周收益，以及什么時(shí)候賣出去。
▲了解了用戶的購(gòu)買狀態(tài)，以及場(chǎng)景的時(shí)間維度，我們就可以去觀察這些鏈路，去尋找一些設(shè)計(jì)線索，去發(fā)現(xiàn)問(wèn)題解決問(wèn)題，場(chǎng)景思維也能幫我們?cè)O(shè)計(jì)更好的決策。其實(shí)這個(gè)思維在電商中也同樣適用。
買之前：
▲認(rèn)知：雙11快到了，你在家門口地鐵，公交或者微博廣告里面，看見了雙11的一個(gè)產(chǎn)品廣告。其中一個(gè)商品吸引了你。
▲搜索：然后你打開淘寶APP，搜索這款產(chǎn)品，通過(guò)搜索的入口，進(jìn)入到了店鋪?lái)?yè)面。或者你通過(guò)外面的廣告頁(yè)面點(diǎn)擊到了商品店鋪?lái)?yè)面。
買之中：
▲判斷：你通過(guò)店鋪?lái)?yè)面，看見這個(gè)商品正在直播講解，你希望查看真實(shí)的商品情況，于是點(diǎn)進(jìn)去，發(fā)現(xiàn)講解的內(nèi)容能讓你更好的了解了此商品，你決定去商品詳情頁(yè)準(zhǔn)備購(gòu)買。
▲下單：后面你決定購(gòu)買，直接淘寶下單付款。
買之后：
▲查看：買完后，你很想用上它，于是你開始查看物流，同時(shí)也在擔(dān)心如果質(zhì)量不好，你要如何發(fā)起七天無(wú)理由退款。
以上就是我們說(shuō)的用戶思維里面的場(chǎng)景思維，我們需要了解用戶從哪里來(lái)到哪里去，同時(shí)還需要了解用戶購(gòu)買前，購(gòu)買中，購(gòu)買后的心理變化，了解這個(gè)過(guò)程中的鏈路問(wèn)題進(jìn)行設(shè)計(jì)優(yōu)化。
最后
今天這篇分享的用戶思維，只是一個(gè)基礎(chǔ)框架，讓我們能利用同理心，了解用戶的行為特點(diǎn)，提升我們的用戶視角，發(fā)現(xiàn)更多的設(shè)計(jì)問(wèn)題，進(jìn)而解決問(wèn)題，成為一個(gè)真正解決問(wèn)題的設(shè)計(jì)師。
作者：我們的設(shè)計(jì)日記
鏈接：https://www.zcool.com.cn/article/ZMTI2MzA4MA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
蘭亭妙微(cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
01. 按鈕設(shè)計(jì)強(qiáng)弱表現(xiàn)
在整個(gè)產(chǎn)品設(shè)計(jì)中我們要根據(jù)信息傳遞的優(yōu)先級(jí)對(duì)按鈕設(shè)計(jì)進(jìn)行主次區(qū)分，設(shè)計(jì)表達(dá)要有強(qiáng)弱差異。按鈕設(shè)計(jì)可以通過(guò)大小、填充、描邊、色相、飽和度等的不同來(lái)進(jìn)行強(qiáng)弱差異，不同強(qiáng)弱的差異表現(xiàn)出按鈕的等級(jí)：行動(dòng)觸發(fā)、主要、次要、輔助、禁用等。
02. 圓角設(shè)置要合理
對(duì)于按鈕邊框來(lái)說(shuō)，我們通常采用全圓角和小圓角居多，這樣顯得穩(wěn)重大氣。而大圓角按鈕并非不可用，只是相對(duì)較少，會(huì)顯得按鈕不方不圓的，設(shè)計(jì)表現(xiàn)顯得不夠成熟。
全圓角的圓角值等于按鈕高度值的一半，而小圓角的圓角值我們通?？刂圃?1/4H（高度值的四分之一）以內(nèi)（僅為個(gè)人參考，并非絕對(duì)值）。
03. 投影設(shè)置要用對(duì)色彩關(guān)系
給一個(gè)有彩色系按鈕設(shè)置投影時(shí)，選擇無(wú)彩色系（比如黑色）也能達(dá)到效果，只是為了得到更好的視覺效果，提高用戶感官體驗(yàn)。我們也可以嘗試基于按鈕本身色相來(lái)確定投影顏色，這樣得到的效果會(huì)顯得更加干凈清爽。
04. 投影的使用勿過(guò)度泛濫
雖然投影的運(yùn)用可以使按鈕更有層次感，但是也需要根據(jù)具體情況慎用。比如對(duì)于一些淺色按鈕來(lái)說(shuō)也許投影反而會(huì)降低按鈕的識(shí)別度，使得按鈕配色環(huán)境顯得不夠干凈清爽。
05. 給按鈕文字一點(diǎn)呼吸感
按鈕文字和邊框的設(shè)計(jì)要預(yù)留一定的留白，不要做“舍不得”的設(shè)計(jì)，使得按鈕給人感覺很擁擠。如果你把控不好可以分析一些按鈕的負(fù)空間獲取經(jīng)驗(yàn)，看看文字大小和負(fù)空間之間是否存在某種比例關(guān)系。找到這個(gè)比例關(guān)系運(yùn)用到按鈕設(shè)計(jì)中，也許會(huì)讓你的設(shè)計(jì)顯得更加成熟穩(wěn)重。
06. 按鈕設(shè)計(jì)別讓用戶思考
按鈕的存在是為了引導(dǎo)用戶進(jìn)行引導(dǎo)式操作，而不是讓用戶對(duì)其產(chǎn)生困惑。按鈕設(shè)計(jì)別讓用戶思考這是啥，是否可以點(diǎn)擊，需要簡(jiǎn)潔明了的對(duì)此操作進(jìn)行指引。用戶已經(jīng)養(yǎng)成對(duì)按鈕外觀和功能的行為習(xí)慣，如果你設(shè)計(jì)的按鈕樣式與“標(biāo)準(zhǔn)”差異太大，用戶就會(huì)產(chǎn)生疑惑，影響使用體驗(yàn)。
07. 樣式表達(dá)的一致性
當(dāng)設(shè)計(jì)元素規(guī)范統(tǒng)一時(shí)，用戶操作過(guò)程中的理解成本最低，一致性也因此成為最有力的可用性原則之一。我們?cè)谠O(shè)計(jì)按鈕的時(shí)候要注意樣式表達(dá)的一致性，比如：按鈕形狀、色彩定義、風(fēng)格特征等，這樣會(huì)使得我們的設(shè)計(jì)可用性更強(qiáng)。
08. 箭頭運(yùn)用不是字符輸入
一些初入職場(chǎng)的設(shè)計(jì)師會(huì)偷懶直接字符輸入形成按鈕內(nèi)部所需箭頭，這樣的表達(dá)方式自然顯得粗糙些。箭頭要當(dāng)成圖標(biāo)來(lái)進(jìn)行設(shè)計(jì)，控制好箭頭的粗細(xì)和文字筆畫的粗細(xì)值接近，這樣顯得更有細(xì)節(jié)和態(tài)度。
09. 按鈕設(shè)計(jì)主次分明
通過(guò)信息對(duì)比才能形成主次之分，按鈕設(shè)計(jì)需要在風(fēng)格上進(jìn)行區(qū)分，達(dá)到層次結(jié)構(gòu)的視覺提示。主要的按鈕需要和次要的、輔助的形成差異，最大化突出主按鈕的視覺效果，更好的引導(dǎo)用戶根據(jù)設(shè)定的軌跡進(jìn)行操作。
10. 按鈕設(shè)計(jì)不要讓用戶誤解
在整個(gè)項(xiàng)目設(shè)計(jì)規(guī)范中，我們需要避免讓用戶把非按鈕狀態(tài)的內(nèi)容進(jìn)行誤判。在確定好按鈕樣式特征之后，不要在其它場(chǎng)景運(yùn)用其樣式特征或者類似的風(fēng)格特征，這樣會(huì)讓用戶產(chǎn)生錯(cuò)誤的認(rèn)知，因而進(jìn)行無(wú)用的操作。
11. 按鈕文本表達(dá)要言簡(jiǎn)意賅
在進(jìn)行按鈕文本思考的時(shí)候，盡量減少字符和單詞的數(shù)量，內(nèi)容表達(dá)言簡(jiǎn)意賅，只要能夠準(zhǔn)確傳達(dá)信息識(shí)別度即可。有時(shí)候也不一定需要文本，圖標(biāo)可以傳遞的信息可以考慮文本的減少，也許可以讓界面的呼吸感更強(qiáng)。
12. 按鈕文本設(shè)置切勿換行
單行文字的可讀性更高，如果出現(xiàn)換行就會(huì)降低可讀性。我們?cè)谠O(shè)計(jì)按鈕的時(shí)候，確保文本內(nèi)容在一行之內(nèi)顯示，如果設(shè)計(jì)空間不足要考慮文本內(nèi)容的精簡(jiǎn)。
13. 特殊場(chǎng)景要靈活轉(zhuǎn)變
底部按鈕的運(yùn)用并非固定不變，不同機(jī)型或者特殊場(chǎng)景的考慮需要靈活轉(zhuǎn)變。比如 iPhone X 等類型的機(jī)型，由于底部需要預(yù)留主頁(yè)控制器的位置，所以在設(shè)計(jì)按鈕的時(shí)候需要考慮上中下的過(guò)渡銜接，這樣才能帶給用戶更好的感官體驗(yàn)。
14. 按鈕大小要便于點(diǎn)擊
按鈕需要方便用戶進(jìn)行點(diǎn)擊操作，如果用戶點(diǎn)擊失敗或者誤點(diǎn)到周邊元素，就會(huì)帶給用戶不友好的體驗(yàn)。若是帶有文本的按鈕，只要文字大小不要小于極限值，通常實(shí)現(xiàn)出來(lái)的按鈕交互熱區(qū)都會(huì)滿足點(diǎn)擊需求。
如果是純 icon 的按鈕，除了按鈕大小需要控制合適以外，也要確保交互熱區(qū)能夠滿足點(diǎn)擊區(qū)域要求。
15. 同屬板塊按鈕大小一致
在同屬板塊內(nèi)的按鈕設(shè)計(jì)，我們可以通過(guò)按鈕的強(qiáng)弱來(lái)體現(xiàn)層級(jí)關(guān)系，不要讓按鈕大小不一，這樣視覺平衡會(huì)受到影響。
16. 按鈕設(shè)計(jì)考慮文本最大值
稍微注意細(xì)節(jié)的設(shè)計(jì)師也不會(huì)讓文本的長(zhǎng)度超過(guò)按鈕寬度，這是一個(gè)非常明顯的錯(cuò)誤。但是按鈕文本變得很長(zhǎng)卻是遇見過(guò)的，幾個(gè)字即可表達(dá)的意思卻使用了過(guò)多修飾詞。在進(jìn)行按鈕文本思考的時(shí)候，要根據(jù)最佳的視覺效果設(shè)定一個(gè)最大值，不要任其無(wú)限制發(fā)揮，這樣會(huì)使得最終的視覺效果大打折扣，甚至影響用戶感官體驗(yàn)。
17. 保持按鈕可讀性
按鈕設(shè)計(jì)需要考慮在不同環(huán)境下的適應(yīng)度，確保用戶可以一目了然的發(fā)現(xiàn)它?，F(xiàn)在很多產(chǎn)品都適配了深色主題模式，按鈕的配色不能只考慮白色或者淺色背景下的運(yùn)用，需要考慮大多數(shù)背景下的適配。在進(jìn)行色彩選擇的時(shí)候，始終保持按鈕與背景的高對(duì)比度和可讀性。
18. 按鈕去文本是否合理
關(guān)于按鈕文本的設(shè)置需要結(jié)合信息傳遞的識(shí)別性和準(zhǔn)確性，雖然純圖標(biāo)顯得設(shè)計(jì)簡(jiǎn)潔大方，但是需要考慮圖形是否可以準(zhǔn)確的表達(dá)其含義，不會(huì)讓用戶出現(xiàn)誤解或者錯(cuò)誤的認(rèn)知。所以，按鈕去文本需要根據(jù)文案代表的含義來(lái)判斷，如果不需要輔助解釋也能判斷出按鈕的意思，那么更為簡(jiǎn)潔的設(shè)計(jì)表達(dá)效果更佳。
19. 正確判斷按鈕顏色選擇
色彩在設(shè)計(jì)中是最直觀的體現(xiàn)，不同的顏色會(huì)傳遞不同的性格，帶給用戶認(rèn)知差異。而按鈕的顏色選擇也并非隨性發(fā)揮，需要結(jié)合品牌色和輔助色作出判斷。
通常比較統(tǒng)一的標(biāo)準(zhǔn)是采用品牌色作為大部分按鈕的顏色，遇到一些需要差異化的按鈕會(huì)選擇輔助色來(lái)表達(dá)，紅色或者橙色多為行動(dòng)刺激作用，不適合在非品牌色的時(shí)候?yàn)E用。淺灰色或者低飽和度的色系會(huì)帶有不可用、禁用、失效等屬性，需要酌情選擇。
20. 按鈕位置結(jié)合用戶體驗(yàn)
引導(dǎo)用戶作出選擇的按鈕應(yīng)該放在左邊還是右邊，根據(jù)操作系統(tǒng)的不同也引起了設(shè)計(jì)師們的爭(zhēng)議。比如 Windows 系統(tǒng)習(xí)慣將確認(rèn)按鈕放在左邊，而蘋果系統(tǒng)卻選擇了放在右邊，用戶運(yùn)用系統(tǒng)的習(xí)慣會(huì)影響其行為的適應(yīng)度。不過(guò)要是在移動(dòng)端個(gè)人傾向于將引導(dǎo)用戶作出選擇的按鈕放在右邊，更有利于用戶點(diǎn)擊（特殊人群這里需要除外）。
有時(shí)候?yàn)榱朔乐褂脩粽`操作，我們會(huì)將確認(rèn)操作的按鈕放在左邊，通過(guò)助力設(shè)計(jì)讓用戶再次確認(rèn)。所以，一方面我們要結(jié)合操作系統(tǒng)的習(xí)慣，另一方面也要結(jié)合用戶習(xí)慣，將按鈕放在最合適的位置，便于用戶操作。
小結(jié)
作為設(shè)計(jì)師來(lái)說(shuō)，對(duì)每一個(gè)細(xì)小的元素進(jìn)行深入思考和總結(jié)，才能讓我們?cè)O(shè)計(jì)出更好的解決方案。一枚小小的按鈕設(shè)計(jì)，其背后也有很多需要探索的東西，本文為大家總結(jié)了 20 條經(jīng)驗(yàn)，相信還有更多值得梳理的細(xì)節(jié)，期待更多設(shè)計(jì)伙伴去挖掘。
作者：黑馬青年
鏈接：https://www.zcool.com.cn/article/ZMTIwNzE4MA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
蘭亭妙微(cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
藍(lán)藍(lán)設(shè)計(jì)的小編 設(shè)計(jì)思維
作為產(chǎn)品總監(jiān)，你一定明白，軟件產(chǎn)品成功的關(guān)鍵在于用戶體驗(yàn)，而UI設(shè)計(jì)正是塑造用戶體驗(yàn)的核心。簡(jiǎn)單來(lái)說(shuō)，UI設(shè)計(jì)就是用戶界面的設(shè)計(jì)，它決定了用戶如何與你的產(chǎn)品互動(dòng)，就像產(chǎn)品的“顏值”和“內(nèi)涵”，直接影響用戶的第一印象和使用感受。UI設(shè)計(jì)不僅僅是讓界面好看，更重要的是好用。 它需要平衡視覺美感與功能實(shí)用性，讓用戶在使用過(guò)程中感到舒適、高效、愉悅。
如何提高軟件產(chǎn)品中的UI設(shè)計(jì)水準(zhǔn)？ 以下是一些建議：
藍(lán)藍(lán)設(shè)計(jì)的小編 http://cqzjtgb.com