2021-5-25 ui設(shè)計(jì)分享達(dá)人
年少時(shí),經(jīng)常聽(tīng)到身邊的同事聊一些名詞概念,羨慕之余猶豫羞于提問(wèn),導(dǎo)致我經(jīng)常會(huì)陷入其中無(wú)法自拔,痛苦不已;過(guò)了這么多年,大多數(shù)概念都隨著工作的原因慢慢被理解和消化,或逐漸消失或不再提及。但唯獨(dú),“設(shè)計(jì)系統(tǒng)”這個(gè)詞陰魂不散,反反復(fù)復(fù)的出現(xiàn)在我的面前,特別是在面試這個(gè)場(chǎng)景下,幾乎每一場(chǎng)都會(huì)有這個(gè)詞被提到。
也源于最近做B端稍微多一些,不如今天就以toB產(chǎn)品為例來(lái)嘮嘮我認(rèn)知下的設(shè)計(jì)系統(tǒng)是什么以及如何幫助設(shè)計(jì)落地執(zhí)行的。
理論上來(lái)講,設(shè)計(jì)系統(tǒng)分為兩個(gè)大部分,一部分是指導(dǎo)思想,另一部分是實(shí)際產(chǎn)出;前者去指導(dǎo)后者執(zhí)行,二者的關(guān)系像極了競(jìng)技運(yùn)動(dòng)中的教練安排的“戰(zhàn)術(shù)”和球員場(chǎng)上的“執(zhí)行動(dòng)作”,如果用一張圖來(lái)表示,大概就是這么個(gè)事:
需要強(qiáng)調(diào)的是,要設(shè)計(jì)一套“設(shè)計(jì)語(yǔ)言”,首先需要聚焦到“語(yǔ)言”這個(gè)詞上,通常我們認(rèn)知里的語(yǔ)言無(wú)非是一套溝通方式,因?yàn)槲覀儗?duì)他習(xí)以為常,所以并沒(méi)有更進(jìn)一步的了解,我試圖去查了下語(yǔ)言的來(lái)源,以及為什么世界上會(huì)出現(xiàn)這么多語(yǔ)言之類的問(wèn)題,搜過(guò)出來(lái)的結(jié)果很多很復(fù)雜,但概括來(lái)說(shuō)就是支撐一套語(yǔ)言的核心分為“語(yǔ)言特性”以及“語(yǔ)言構(gòu)成”這兩大部分。
第一塊,詞匯:ta的作用是讓你表達(dá)出想法,就好比如果你跟我一樣English is not good的情況下,還嘚嘚瑟瑟的出國(guó)游玩,一定也經(jīng)歷過(guò)用“蹦單詞+比劃”的方式去問(wèn)路、點(diǎn)菜吧,典型的通過(guò)word的方式傳遞信息。
另一趴,語(yǔ)法,ta會(huì)讓你更順暢的表達(dá)出自己的想法,通過(guò)對(duì)詞匯的重組和編排,信息傳遞的有效性被大大增加,你可以通過(guò)“主動(dòng)賓”來(lái)陳述觀點(diǎn)或表達(dá)疑問(wèn),盡可能的豐富此刻你的所思所想。就像上面的例子,按照語(yǔ)法規(guī)則稍微調(diào)整一下,看起來(lái)就順暢多的多了~
那么如果映射到設(shè)計(jì)上,顯而易見(jiàn),組件庫(kù)對(duì)應(yīng)詞匯,交互流程對(duì)應(yīng)語(yǔ)法;所以你會(huì)發(fā)現(xiàn)當(dāng)我們不斷迭代產(chǎn)品的時(shí)候,我們無(wú)非就是想把產(chǎn)品當(dāng)做一件事情講清楚罷了。
再就是當(dāng)一套組件被創(chuàng)造出來(lái),ta需要遵循一定的規(guī)則形成一個(gè)完整的頁(yè)面,跟我們?cè)炀鋷缀跻荒R粯?;所以這個(gè)時(shí)候充當(dāng)語(yǔ)法的交互流程就至關(guān)重要?,F(xiàn)實(shí)情況下,往往交互形態(tài)是千變?nèi)f化的,經(jīng)常性的會(huì)因?yàn)闃I(yè)務(wù)場(chǎng)景的不同創(chuàng)造一些流程出來(lái);但如果是基于語(yǔ)言的背景下,我們需要盡可能的抽練一些標(biāo)準(zhǔn)化的規(guī)則形成語(yǔ)法,我們稱之為“設(shè)計(jì)模式”:
我從中挑了搜索這個(gè)比較通用的模式來(lái)簡(jiǎn)單講下;拋開(kāi)組件的“點(diǎn)”思維,需要我們定義的是“信息交互”的“線性”流程,我試著把其中的每個(gè)環(huán)節(jié)提煉了出來(lái),抽練了一個(gè)流程出來(lái):
通過(guò)上圖也許你會(huì)發(fā)現(xiàn)“模式”注重的是流程節(jié)點(diǎn)的體驗(yàn)感知(用戶跟產(chǎn)品交互的一來(lái)一往),并注重封裝成標(biāo)準(zhǔn)化方案。另外有一點(diǎn),我把整個(gè)搜索的過(guò)程分為了2個(gè)個(gè)小線程——輸入行為和消費(fèi)行為,這是為了以后團(tuán)隊(duì)協(xié)作更好的理解這條模式的運(yùn)作方式,以及之后的拓展,舉個(gè)例子:產(chǎn)品經(jīng)理決定加一個(gè)歷史搜索(就是顯示用戶過(guò)往的搜索結(jié)果),這個(gè)時(shí)候設(shè)計(jì)師就可以把這個(gè)功能當(dāng)做一個(gè)拓展包,直接扔到這個(gè)主干里來(lái):
另外,toB CRM鼻祖salesforce在自己的設(shè)計(jì)網(wǎng)站上公布了他們的設(shè)計(jì)模式,給出了一些特定的場(chǎng)景下的解決方案,不過(guò)寫的相對(duì)更偏組件流程一些:
PS . 插個(gè)有的沒(méi)的的小話題,一個(gè)很好玩的事,如果你細(xì)心琢磨的話,也許會(huì)發(fā)現(xiàn)其實(shí)組件本身也是帶有一定的潛在交互,這種交互不需要你特意安插,天生就有,就好比一個(gè)按鈕擺在那,在沒(méi)有任何引導(dǎo)的情況下,正常人也知道點(diǎn)一點(diǎn)。所以映射到語(yǔ)言里,語(yǔ)法貌似并不是必要的(當(dāng)然ta的存在是為了設(shè)計(jì)系統(tǒng)更完整,產(chǎn)品更好),比如這個(gè)爛大街的梗:
這種現(xiàn)象是著名的“貝葉斯理論”,利用相關(guān)信息總結(jié)出未知信息,也就是說(shuō)我們的大腦是可以通過(guò)殘缺的信息來(lái)補(bǔ)足未知的信息的,人類的大腦真的是奇奇妙妙啊~
相比構(gòu)成,特性這個(gè)就好理解多了,相當(dāng)于設(shè)計(jì)原則這類的,我們需要通過(guò)一定的規(guī)則約束對(duì)語(yǔ)言有一個(gè)明確的指向;比如現(xiàn)代漢語(yǔ)就具備適應(yīng)性、開(kāi)放性兩大特征。
但不得不說(shuō),作為面試官我個(gè)人不是很喜歡作品集里描述設(shè)計(jì)原則的時(shí)候就3個(gè)詞:“簡(jiǎn)潔”“高效”“清晰”。并不是討厭這三個(gè)詞,而是當(dāng)我追問(wèn)候選人為什么是這三個(gè)的時(shí)候,我得到的回復(fù)基本是Material Design(或其他大廠的設(shè)計(jì)系統(tǒng))就是這么寫的亦或是其他很蒼白的回答,這無(wú)疑是暴露了對(duì)設(shè)計(jì)系統(tǒng)的認(rèn)知?dú)埲保且粋€(gè)非常掉分的互動(dòng)過(guò)程。其實(shí),當(dāng)google、IBM、salesforce在對(duì)外宣講他們的設(shè)計(jì)原則的時(shí)候,也許就只有兩個(gè)字“清晰”,但背后或許有非常多的思考,甚至超乎你我的想象。
但...異乎尋常的是,AntDesign 的設(shè)計(jì)原則寫的很"深?yuàn)W",憑我的功力真的看不出背后的東西,也不知道如何指導(dǎo)設(shè)計(jì)(也許他們是在探索設(shè)計(jì)哲學(xué)吧哈哈哈哈):
當(dāng)我們對(duì)上述各方訴求梳理清楚后,首先要精準(zhǔn)的概括和整理這些內(nèi)容的權(quán)重和占比(需要注意的是,雖然允許多個(gè)原則存在,但也要有一定的側(cè)重和比例,這種做法在順暢的環(huán)節(jié)上不會(huì)有所建樹(shù),但在多個(gè)原則沖突的情況下為了保全大局,順應(yīng)占比最大的原則是相對(duì)穩(wěn)妥的選擇,一定程度上可以幫助設(shè)計(jì)師規(guī)避掉不必要的糾結(jié)或撕逼的過(guò)程);再然后基于當(dāng)下的情況產(chǎn)出相應(yīng)的原則,形成整套設(shè)計(jì)系統(tǒng)的王炸:
但在實(shí)際操作中,高度整合后的設(shè)計(jì)原則雖然指明了方向,但缺失了可衡量性,這就會(huì)導(dǎo)致“認(rèn)知偏差”的情況,因?yàn)槊總€(gè)人對(duì)圖例中的“高效”或“靈活”理解不同,會(huì)對(duì)同一個(gè)事物有不同的理解,就跟“小馬過(guò)河”這個(gè)典故一樣,小松鼠覺(jué)著水很深,小馬卻覺(jué)著也就那樣;也正是基于此,需要設(shè)計(jì)師們?cè)诖嘶A(chǔ)上拆分明確的細(xì)則,幫助整個(gè)團(tuán)隊(duì)建立統(tǒng)一認(rèn)知:
到這一步基本上設(shè)計(jì)系統(tǒng)就被定了調(diào)了,我們可以明確對(duì)一個(gè)設(shè)計(jì)進(jìn)行評(píng)判和衡量,以“清晰”為例,我們有個(gè)B端產(chǎn)品里面有個(gè)表單填寫的頁(yè)面,需要用戶提供一些個(gè)信息,前兩天,團(tuán)隊(duì)一個(gè)設(shè)計(jì)師做了個(gè)方案是把表單新開(kāi)tab,但產(chǎn)品覺(jué)著不夠清晰,反而覺(jué)著蒙版的形式更清晰。他就很疑惑,明明信息獲得了更好的展示咋就不清晰了?
說(shuō)到底,是我們?cè)谧鲈O(shè)計(jì)定義的時(shí)候,對(duì)“清晰”的認(rèn)知就是偏薄的,這個(gè)案例里面顯然第一個(gè)方案對(duì)信息的展示更加充分明了,但在這個(gè)場(chǎng)景下“清晰”并不僅僅指的是信息呈現(xiàn),產(chǎn)品經(jīng)理希望用戶透過(guò)浮層能確認(rèn)當(dāng)前處在哪一步(或哪個(gè)頁(yè)面)也同樣是一個(gè)維度;從這個(gè)case里,你會(huì)發(fā)現(xiàn),定義一個(gè)原則真的不僅僅是搬運(yùn)一個(gè)名詞這么簡(jiǎn)單,所有的原則和特性必須遵循易于操作且合理,這樣才是一條合格且優(yōu)秀的原則。
ps . Salesforce的Lightning設(shè)計(jì)系統(tǒng)是我最喜歡的design system之一,原因很多,其中很重要的一條是因?yàn)樗麄冋娴氖?strong style="outline:0px;margin:0px;padding:0px;">把“美”作為一個(gè)很重要的原則:
色彩體系的定制往往是重災(zāi)區(qū),最常見(jiàn)的做法是把顏色用色塊的方式一字排開(kāi),一排叫做品牌色,一排叫做輔助色,還有一排是灰度:
這種定義存在很大的風(fēng)險(xiǎn),就跟菜譜只告訴你需要哪些食材,不告訴你配比一樣,做出來(lái)的菜大概率是一塌糊涂,難以下咽。所以如果你正在建設(shè)一套團(tuán)隊(duì)協(xié)作級(jí)別的設(shè)計(jì)規(guī)范,務(wù)必要把“協(xié)作”當(dāng)做最重要的事,用比例的方式來(lái)告訴你的隊(duì)友他們應(yīng)該怎么做:
同理,其他的模塊,比如字號(hào),間距,圖標(biāo),我都建議盡可能的“場(chǎng)景化”,讓設(shè)計(jì)規(guī)范有一定的代入感,這樣會(huì)大大提高設(shè)計(jì)的效能和品質(zhì)。
拋出這個(gè)問(wèn)題,是因?yàn)榻?jīng)常在不同的場(chǎng)合聽(tīng)到“設(shè)計(jì)系統(tǒng)是扼殺設(shè)計(jì)師的創(chuàng)造力”之類的觀點(diǎn);我個(gè)人是很難以認(rèn)同這個(gè)的,對(duì)design system的最大誤解就是限制設(shè)計(jì)師的想象力。首先設(shè)計(jì)系統(tǒng)本身就是一個(gè)龐大且復(fù)雜的設(shè)計(jì)觀集合,需要調(diào)動(dòng)整個(gè)團(tuán)隊(duì)的想象力和創(chuàng)造力,最終達(dá)到一個(gè)統(tǒng)一共識(shí)才有可能被實(shí)施和執(zhí)行;其次,創(chuàng)造力并不全是設(shè)計(jì)個(gè)btn或者彈窗,真正能展示創(chuàng)造力的是像樂(lè)高一樣,通過(guò)零件(組件)拼裝成各種各樣的令人嘆為觀止的創(chuàng)意,那才是我理解的創(chuàng)造力:
另外從系統(tǒng)性思維上講,如果在不考慮資源的情況下,我倒是挺支持每一位設(shè)計(jì)師都自己去設(shè)計(jì)一套設(shè)計(jì)系統(tǒng),因?yàn)樵谖覀兤綍r(shí)看來(lái),2/3年經(jīng)驗(yàn)的設(shè)計(jì)師和10年的設(shè)計(jì)師他們的產(chǎn)出物或許不會(huì)差太多,但對(duì)設(shè)計(jì)觀架構(gòu)的能力千差萬(wàn)別,前者依賴感覺(jué)和直覺(jué)素養(yǎng)做事,后者更靠縝密的邏輯和推理來(lái)做事;我更喜歡后者多一些,并不是因?yàn)樗麄冎v起自己作品的時(shí)候聽(tīng)起來(lái)多么高大上,而是因?yàn)橐罁?jù)推理方法可以時(shí)刻保持輸出的穩(wěn)定性。
我無(wú)意詆毀這兩大巨星,也無(wú)意內(nèi)卷,只是想說(shuō),做事,終究不能托付給“天賦”和“靈感”,勤奮和努力在一定程度上也許可以幫你飛到更高。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。
文章來(lái)源:站酷 作者:負(fù)能量補(bǔ)給站
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com