如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
上周和小伙伴一起翻譯了一篇 medium 上點(diǎn)贊量超多的文章（8.1k贊），該文作者在電子產(chǎn)品的界面設(shè)計(jì)領(lǐng)域有13年的從業(yè)經(jīng)驗(yàn)，也經(jīng)歷了從架構(gòu)師到用戶(hù)體驗(yàn)設(shè)計(jì)師再到如今的產(chǎn)品設(shè)計(jì)師的多次職業(yè)轉(zhuǎn)換，文章主要是講他對(duì)用戶(hù)體驗(yàn)設(shè)計(jì)的犀利吐槽，以及對(duì)產(chǎn)品設(shè)計(jì)所代表的工作方法的無(wú)限看好?；蛟S觀(guān)點(diǎn)上并沒(méi)有什么新意，但是，就像某大佬說(shuō)的，設(shè)計(jì)是對(duì)混亂的馴服。想要馴服混亂僅憑理論套路是遠(yuǎn)遠(yuǎn)不夠的，而設(shè)計(jì)師真正的價(jià)值或許也就在于此：投身于未知與混沌的灰色之中，并且還要從中分出黑白。
那么為什么我要翻譯這篇巨長(zhǎng)的文章呢？就我個(gè)人而言，單純很喜歡作者傲慢中帶著犀利的風(fēng)格，就像看一篇文字版的吐槽大會(huì)般有趣。我在翻譯的時(shí)候加上了自己的思考和看法，所以，文末也留了 medium 的原文鏈接，可以去查看作者的本意，并觀(guān)看其中的演講視頻。
這是關(guān)于我從架構(gòu)師轉(zhuǎn)變到用戶(hù)體驗(yàn)設(shè)計(jì)師的一段經(jīng)歷，以及我是如何看待行業(yè)現(xiàn)狀的。
十年前的某一天，我決定要把我的職業(yè)從架構(gòu)師改成用戶(hù)體驗(yàn)設(shè)計(jì)師。我記得當(dāng)時(shí)很多可用性專(zhuān)家、架構(gòu)師、界面設(shè)計(jì)師、交互設(shè)計(jì)師對(duì)我說(shuō)：這只是潮流而已，「用戶(hù)體驗(yàn)設(shè)計(jì)」這個(gè)表述并不，簡(jiǎn)直就是胡說(shuō)八道，體驗(yàn)怎么可能被設(shè)計(jì)？
然后在去年，我又突然決定把我的職業(yè)從用戶(hù)體驗(yàn)設(shè)計(jì)師改成產(chǎn)品設(shè)計(jì)師。同樣的，一群用戶(hù)體驗(yàn)設(shè)計(jì)師又來(lái)對(duì)我說(shuō)，這只是潮流而已，用戶(hù)體驗(yàn)設(shè)計(jì)師和產(chǎn)品設(shè)計(jì)師之間并沒(méi)有什么本質(zhì)的區(qū)別。
但是，對(duì)我來(lái)說(shuō)，它們是不同的。在我看來(lái)，產(chǎn)品設(shè)計(jì)更加的謙虛真誠(chéng)。我覺(jué)得這是用戶(hù)體驗(yàn)設(shè)計(jì)師不具備但最應(yīng)該學(xué)會(huì)的：謙虛務(wù)實(shí)。
我不是在勸你像我一樣改換職業(yè)名稱(chēng)（坦白地說(shuō)，你最好別這么做），我真的一點(diǎn)兒也不在意。我只是想告訴你，我決定轉(zhuǎn)變的原因，以及我是如何看待行業(yè)現(xiàn)狀的。
很膚淺的話(huà)題，聊職稱(chēng)大概是世界上最無(wú)聊的事兒了，但是作為設(shè)計(jì)師們，我們又確實(shí)很喜歡討論它?；蛟S，這次我們可以聊的更深入一點(diǎn)。
我一直很喜歡 Alan Cooper 提出的這個(gè)詞：交互設(shè)計(jì)師（interaction designer）。我認(rèn)為它很地抓住了這項(xiàng)工作的本質(zhì)。但是早在十年前看來(lái)，這個(gè)詞的定義就已經(jīng)很狹隘了。數(shù)字產(chǎn)品的設(shè)計(jì)師們希望工作能觸及到更多的內(nèi)容，而「用戶(hù)體驗(yàn)設(shè)計(jì)」似乎就承擔(dān)了這個(gè)「需要觸及更廣泛內(nèi)容」的責(zé)任。
它確實(shí)抓住了這個(gè)需求，現(xiàn)在 UX 這個(gè)詞廣泛流傳，每個(gè)人都在使用這個(gè)縮寫(xiě)，但問(wèn)題是每個(gè)人對(duì)它的理解是不同的。所以，直到現(xiàn)在它也是個(gè)令人疑惑的概念。
在Peter Merholz 的一次訪(fǎng)談中，Don Norman 對(duì)創(chuàng)造 UX 這個(gè)詞的初衷做了如下解釋?zhuān)?
我發(fā)明了這個(gè)詞是因?yàn)槲矣X(jué)得人機(jī)交互和可用性這兩個(gè)詞兒太狹隘了。我想要?jiǎng)?chuàng)造一個(gè)可以覆蓋人們體驗(yàn)各個(gè)方面的系統(tǒng)，包括圖形設(shè)計(jì)，界面，體感交互和這個(gè)系統(tǒng)的使用手冊(cè)。但從那之后，這個(gè)詞就開(kāi)始廣泛地流傳，慢慢地失去了它本來(lái)的意義。
如今它偏離本來(lái)的意義越來(lái)越遠(yuǎn)，以至于 Alan Cooper 先生說(shuō)：根本沒(méi)有用戶(hù)體驗(yàn)設(shè)計(jì)這回事。
在我們盡可能擴(kuò)寬工作邊界的努力之下，我們把 UX 這個(gè)氣球吹得快要爆掉了。UX 現(xiàn)在承擔(dān)了「設(shè)計(jì)不同觸點(diǎn)的體驗(yàn)」的任務(wù)，包括組織轉(zhuǎn)型，制定策略，改革創(chuàng)新，市場(chǎng)營(yíng)銷(xiāo)，設(shè)計(jì)從 app 到廣告、服務(wù)、設(shè)備、地點(diǎn)、事件，甚至公司文化在內(nèi)的所有事情。
或許用戶(hù)體驗(yàn)確實(shí)應(yīng)該做到這些，但是問(wèn)題是，沒(méi)有一個(gè)用戶(hù)體驗(yàn)設(shè)計(jì)師能一個(gè)人把所有的這些事情做好，要?jiǎng)?chuàng)造一個(gè)復(fù)雜的產(chǎn)品，你需要的是一個(gè)由不同領(lǐng)域?qū)＜医M成的團(tuán)隊(duì)。
我不得不說(shuō)很多 UX設(shè)計(jì)師真的是眼高手低，他們根本不具備足夠的技能或者經(jīng)驗(yàn)去支撐他們的野心。
我同時(shí)也負(fù)責(zé)招聘的工作，大多數(shù)申請(qǐng) UX 這份工作的求職者可以分為以下幾類(lèi)：
當(dāng)然，以上只是一種簡(jiǎn)單的歸納，但是從我的觀(guān)察來(lái)看，很多做 UX 的都可以歸到這三類(lèi)人當(dāng)中，因?yàn)檎娴暮苌僖?jiàn)到那種既懂戰(zhàn)略又會(huì)戰(zhàn)術(shù)，既有創(chuàng)造力又有執(zhí)行力，既了解商業(yè)又懂設(shè)計(jì)的人才。
UX設(shè)計(jì)師日常做的事情以及他們對(duì)商業(yè)的價(jià)值根本配不上他們的自我認(rèn)知：「用戶(hù)體驗(yàn)設(shè)計(jì)很重要 」。
用戶(hù)體驗(yàn)設(shè)計(jì)實(shí)際上并不像很多「什么是UX」的文章寫(xiě)的那樣是所有事情的中心。我推薦你去看Paul Addams在UX London 2018上的優(yōu)秀演講——《The end of Navel Gazing》。標(biāo)題「用戶(hù)中心論的終結(jié)」很好地表達(dá)了這個(gè)意思。
我觀(guān)察到的另一個(gè)現(xiàn)象，是關(guān)于用戶(hù)體驗(yàn)設(shè)計(jì)目前的狀態(tài)的。UX設(shè)計(jì)師們每天都會(huì)發(fā)表數(shù)不清的文章，它們大部分都是關(guān)于研究工具以及方法論（例如用戶(hù)畫(huà)像，用戶(hù)體驗(yàn)地圖，原型制作工具，用戶(hù)研究方法等等），各種教程，無(wú)關(guān)緊要的圖形設(shè)計(jì)趨勢(shì)，或者用戶(hù)界面細(xì)節(jié)。
Fabricio Teixeira 和 Caio Braga 寫(xiě)了一篇優(yōu)秀的文章來(lái)說(shuō)明這些理論的狹隘之處：
https://essays.uxdesign.cc/state-of-design-publishing/
然而，這些我們經(jīng)常討論的東西，對(duì)于處在殘酷商業(yè)競(jìng)爭(zhēng)環(huán)境下的產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)來(lái)說(shuō)，并沒(méi)有什么用。因?yàn)橛?jì)劃與管理實(shí)際的產(chǎn)品開(kāi)發(fā)進(jìn)程和理想的「Design thinking 五步法」之間并沒(méi)有太大的關(guān)系。
整個(gè) UX 行業(yè)好像對(duì)商業(yè)這部分都沒(méi)什么興趣，也難怪，「用戶(hù)體驗(yàn)設(shè)計(jì)」這個(gè)名字就暗示了他們只關(guān)注用戶(hù)。商業(yè)是別人的事。
也難怪會(huì)冒出 UX 的忠實(shí)捍衛(wèi)者們了，如果你膽敢不同意他們的信仰，他們就會(huì)把你的心扯出來(lái)。
僅僅只要說(shuō)一句：用戶(hù)研究不是總是被需要和有實(shí)際意義的。他們就會(huì)告訴你如果你不會(huì)用戶(hù)研究，你就不是一個(gè)合格的用戶(hù)體驗(yàn)設(shè)計(jì)師。如果你個(gè)人并不是很喜歡一些方法論，像用戶(hù)畫(huà)像或者其他，你最好趕緊默默溜走。
可悲的是，UX們總是想成為最有創(chuàng)新能力的人。但是我認(rèn)為他們并不是。因?yàn)?，?chuàng)新力需要嘗試不同的工作方法，考慮新鮮的想法，要求與眾不同以及靈活多變，敢于實(shí)驗(yàn)，勇于實(shí)踐，并擁有商業(yè)頭腦與落地思維。想要成為真正的革新者，需要的是自己去開(kāi)創(chuàng)自己的道路，去突破規(guī)矩，去冒險(xiǎn)。而不是重復(fù)說(shuō)那些所有人都在說(shuō)的簡(jiǎn)單的陳詞濫調(diào)，遵從那些輕而易舉的方法指南。我覺(jué)得 UX設(shè)計(jì)師整個(gè)群體都搞不清楚地圖和實(shí)際道路，模型（或其他噱頭）和現(xiàn)實(shí)之間的差別。（只有這些「革新者」的想法才很容易被預(yù)測(cè)：因?yàn)樗麄兯腥硕甲x一樣的書(shū)，說(shuō)著同樣的話(huà)。）
我從事數(shù)碼產(chǎn)品的設(shè)計(jì)有13年了，現(xiàn)在我不覺(jué)得我和大多數(shù)的 UX設(shè)計(jì)師之間有什么共同點(diǎn)。我覺(jué)得我已經(jīng)超越了用戶(hù)體驗(yàn)設(shè)計(jì)。我跟產(chǎn)品經(jīng)理或產(chǎn)品需求方之間更為投契。
Peter Merholz 在他的一次演講中說(shuō)過(guò)，用戶(hù)體驗(yàn)這個(gè)行業(yè)的出現(xiàn)是因?yàn)楫a(chǎn)品經(jīng)理對(duì)用戶(hù)體驗(yàn)缺乏考慮，我同意這種說(shuō)法。
數(shù)字產(chǎn)品就是我現(xiàn)在正在做的，像網(wǎng)頁(yè)，app，界面。我的目標(biāo)是為我的客戶(hù)創(chuàng)造一個(gè)成功的產(chǎn)品，一個(gè)會(huì)幫助他們賺錢(qián)或者省錢(qián)的產(chǎn)品。可用性和用戶(hù)體驗(yàn)只是實(shí)現(xiàn)這個(gè)目標(biāo)的一部分，它們很重要，但是說(shuō)實(shí)在的，并不是最終的目的。我不會(huì)像大多數(shù)的 UX設(shè)計(jì)師那樣不切實(shí)際的浪漫主義。
我也需要為我自己和我的公司賺錢(qián)，所以我要擅長(zhǎng)規(guī)劃一個(gè)有效率的設(shè)計(jì)流程，估計(jì)好預(yù)算，有條有理地和客戶(hù)進(jìn)行合作，銷(xiāo)售與推廣我的工作，招聘人才等等。
我知道我很擅長(zhǎng)數(shù)字產(chǎn)品設(shè)計(jì)，但是我可能并不擅長(zhǎng)做所有類(lèi)型的設(shè)計(jì)。這就是為什么我更喜歡「數(shù)字產(chǎn)品設(shè)計(jì)師」這個(gè)頭銜的原因了。
我喜歡它的點(diǎn)在于，它更聚焦于產(chǎn)品而不是用戶(hù)。它把我的工作放在了資本市場(chǎng)的背景之下。產(chǎn)品需要對(duì)顧客有用，但是也需要切實(shí)地有利可圖。
對(duì)我來(lái)說(shuō)，無(wú)論它是什么，聽(tīng)起來(lái)，「產(chǎn)品設(shè)計(jì)」比「用戶(hù)體驗(yàn)設(shè)計(jì)」都更加的落地。產(chǎn)品設(shè)計(jì)更容易被所有人理解，甚至你媽媽也能懂。它不需要太多解釋。用戶(hù)體驗(yàn)只是它的一部分，但是從另一方面講，比起想要解決世界上所有問(wèn)題的萬(wàn)能藥UX 來(lái)說(shuō)，產(chǎn)品設(shè)計(jì)這個(gè)說(shuō)法更加的謙虛。
現(xiàn)在我大部分時(shí)間依然是在做交互設(shè)計(jì)和信息架構(gòu)這種傳統(tǒng)工作。我大部分的精力也都是花在制定策略，進(jìn)程管理和設(shè)想概念的層面。但是我也正在帶上許多的帽子：決策者，界面設(shè)計(jì)師，架構(gòu)師，文案，創(chuàng)意總監(jiān)，項(xiàng)目經(jīng)理，產(chǎn)品需求方，用戶(hù)研究員，測(cè)試人員。總之，哪里有需要哪里就有我。
當(dāng)然我需要和很多人（他們是各自專(zhuān)業(yè)領(lǐng)域的專(zhuān)家）一起合作來(lái)實(shí)現(xiàn)我的愿景，然后把它迭代變得更好，更完善。技術(shù)專(zhuān)家，開(kāi)發(fā)者，圖形設(shè)計(jì)師，內(nèi)容設(shè)計(jì)師，項(xiàng)目經(jīng)理，甚至律師等等。最后的用戶(hù)體驗(yàn)其實(shí)是很多這些人的工作共同作用的結(jié)果。
用戶(hù)體驗(yàn)是很多人工作的結(jié)果，是一個(gè)產(chǎn)品或者服務(wù)生產(chǎn)出來(lái)的，并不是一個(gè)職位的描述。
我會(huì)把產(chǎn)品設(shè)計(jì)師定位為這樣一個(gè)角色：他們是那些為產(chǎn)品功能和形式的最終呈現(xiàn)負(fù)責(zé)，并能夠以任何可能的方式對(duì)設(shè)計(jì)流程以及產(chǎn)品的發(fā)布進(jìn)行規(guī)劃和優(yōu)化的人。（如果你還把產(chǎn)品設(shè)計(jì)僅僅看作是 UI/UX 的另一個(gè)名字，這對(duì)你毫無(wú)幫助）對(duì)于很多有經(jīng)驗(yàn)的 UX設(shè)計(jì)師來(lái)說(shuō)，并沒(méi)有什么新鮮的，但是產(chǎn)品設(shè)計(jì)確實(shí)和 UX 不同。
我看到如今，越來(lái)越多的有經(jīng)驗(yàn)的 UX設(shè)計(jì)師稱(chēng)自己是產(chǎn)品設(shè)計(jì)師了，所以，也許這是一個(gè)潮流吧。又或許是某種原因？
Andy Budd，一個(gè)有著很棒的見(jiàn)解的家伙，我一向很尊敬他，最近他發(fā)了一個(gè)推特說(shuō)：UX就像爵士樂(lè)，產(chǎn)品設(shè)計(jì)就像朋克樂(lè)。
好吧，我的看法跟他完全相反。打比方說(shuō)，如果你想成為一個(gè) UX設(shè)計(jì)師，你現(xiàn)在要做的只需要去上個(gè)周末課程，學(xué)習(xí)設(shè)計(jì)過(guò)程的5步法以及5個(gè)方法論，像用戶(hù)畫(huà)像，用戶(hù)體驗(yàn)地圖，愿景圖，你就可以開(kāi)始干活兒了。
但是成為一個(gè)產(chǎn)品設(shè)計(jì)者，你需要把產(chǎn)品交付給市場(chǎng)的實(shí)際經(jīng)驗(yàn)，這非常的難，因?yàn)榻?jīng)常是一團(tuán)混亂，復(fù)雜的過(guò)程。產(chǎn)品設(shè)計(jì)就像自由的爵士樂(lè)?？赡苈?tīng)起來(lái)混亂嘈雜，有一點(diǎn)像朋克樂(lè)，但是想要把它玩好，你需要很多的技能和經(jīng)驗(yàn)以及音樂(lè)理論的掌握，也需要一些即興創(chuàng)作的能力：改變規(guī)則甚至是反對(duì)它們。更不用說(shuō)，在團(tuán)隊(duì)中，你需要成為整個(gè)團(tuán)隊(duì)工作的主導(dǎo)。
無(wú)論你想叫自己什么，無(wú)論你有多大的夢(mèng)想，但，也要記得保持真實(shí)和謙卑
藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
現(xiàn)在讓我們關(guān)注最常見(jiàn)的設(shè)計(jì)專(zhuān)業(yè)：UI/UX設(shè)計(jì)師。
在進(jìn)行設(shè)計(jì)練習(xí)之前，你需要做的第一件事就是學(xué)習(xí)一些設(shè)計(jì)原則。這樣你才能夠進(jìn)入設(shè)計(jì)世界，并開(kāi)始進(jìn)行“創(chuàng)造性”的思考。你會(huì)學(xué)到心理學(xué)對(duì)設(shè)計(jì)方案的影響，例如：為什么它看起來(lái)不錯(cuò)，為什么會(huì)失敗。
下面是你應(yīng)該了解的一些設(shè)計(jì)基本原則。
1、顏色
色彩詞匯，色彩基礎(chǔ)和色彩心理學(xué)。
設(shè)計(jì)原則：色彩
2、平衡
對(duì)稱(chēng)性和不對(duì)稱(chēng)性。
設(shè)計(jì)原則：平衡
3、對(duì)比
使用對(duì)比來(lái)組織信息，構(gòu)建層次結(jié)構(gòu)和創(chuàng)建焦點(diǎn)。
設(shè)計(jì)原則：對(duì)比
4、 排版
選擇字體和在網(wǎng)絡(luò)上創(chuàng)建可讀的文本。
易讀性的10個(gè)原則與網(wǎng)頁(yè)排版
5、一致性
最重要的原則，創(chuàng)造直觀(guān)和實(shí)用的設(shè)計(jì)。
設(shè)計(jì)原則：一致性
下面是設(shè)計(jì)好的界面一些好的方法和需要注意的事項(xiàng)。
接下來(lái)要了解創(chuàng)作過(guò)程，UI / UX設(shè)計(jì)是設(shè)計(jì)都要經(jīng)歷的特定階段。它分為四個(gè)不同的階段，發(fā)現(xiàn)、定義、開(kāi)發(fā)和交付。
創(chuàng)作過(guò)程
發(fā)現(xiàn)
在項(xiàng)目的最開(kāi)始，設(shè)計(jì)師會(huì)開(kāi)始研究，獲取靈感并收集想法。
定義
在定義階段，設(shè)計(jì)人員定義從發(fā)現(xiàn)階段提取的想法。由此創(chuàng)建了一個(gè)清晰的創(chuàng)意設(shè)計(jì)方案。
開(kāi)發(fā)
在這里創(chuàng)建原型，測(cè)試和迭代解決方案或概念的地方。這種反復(fù)試驗(yàn)過(guò)程有助于設(shè)計(jì)師改進(jìn)和完善他們的想法。
交付
最后交付階段，項(xiàng)目會(huì)最終確定并且投入使用。
了解設(shè)計(jì)原則雖然有很大的幫助，但這是遠(yuǎn)遠(yuǎn)不夠的，還需要培養(yǎng)你的視野，知道什么是好的設(shè)計(jì)和壞的設(shè)計(jì)，并且能找到設(shè)計(jì)方案的優(yōu)缺點(diǎn)。
在打開(kāi)一張空白的畫(huà)布并盯著它看半個(gè)小時(shí)之前，你明白創(chuàng)新的唯一方法是通過(guò)研究。培養(yǎng)你的設(shè)計(jì)視野的最有效方式是通過(guò)看更多的設(shè)計(jì)方案來(lái)尋找靈感。尤其當(dāng)你是初學(xué)者的時(shí)候，有時(shí)候無(wú)法自己打開(kāi)腦洞，這時(shí)候你必須先看看其他人的設(shè)計(jì)。
瀏覽靈感類(lèi)網(wǎng)站
所以看看其他設(shè)計(jì)師在Dribbble上做了什么，每當(dāng)你遇到漂亮的設(shè)計(jì)或與你的項(xiàng)目相關(guān)的東西時(shí)，將它保存在筆記中并能說(shuō)出你為什么喜歡，你也可以截屏保存。通過(guò)這種方式，你將擁有一個(gè)豐富的設(shè)計(jì)素材庫(kù)，設(shè)計(jì)之路由此展開(kāi)。
為了讓自己盡快的熟悉設(shè)計(jì)，最好的方法是每天閱讀一些文章。讓閱讀設(shè)計(jì)新聞和博客成為日常習(xí)慣。我們有數(shù)百萬(wàn)篇在線(xiàn)文章可供我們了解新趨勢(shì)，設(shè)計(jì)方法和教程。我們所要做的就是找到它們，沒(méi)有比從其他人總結(jié)的經(jīng)驗(yàn)中學(xué)習(xí)更好的了。
讓閱讀文章成為日常習(xí)慣
在早上學(xué)習(xí)新事物會(huì)擴(kuò)充你的腦洞，并為白天創(chuàng)造騰出更多的空間。因此你早上可以在Medium或Smashing Magazine看一些優(yōu)秀的設(shè)計(jì)文章，開(kāi)始新的一天。
另外要注意勞逸結(jié)合，不時(shí)地休息一下，閱讀更多設(shè)計(jì)內(nèi)容。特別是當(dāng)你陷入困境并感到?jīng)]有想法的時(shí)候，更有停下來(lái)休息，休息對(duì)于創(chuàng)造力非常重要。你可以將您喜歡的網(wǎng)站收藏為書(shū)簽或訂閱設(shè)計(jì)博客。
實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)，并且我們清楚的知道，沒(méi)有設(shè)計(jì)經(jīng)驗(yàn)我們就無(wú)法獲得客戶(hù)/工作。但如果沒(méi)有客戶(hù)/工作我們就沒(méi)有辦法加強(qiáng)設(shè)計(jì)技能。所以我們可以通過(guò)自己的實(shí)踐來(lái)打破這個(gè)循環(huán)，進(jìn)行概念項(xiàng)目設(shè)計(jì)以獲得樂(lè)趣以及成長(zhǎng)！Dribbble上有很多的概念設(shè)計(jì)，他們都做的很棒。
Facebook Material Design by Kevin McCarthy
你可以花點(diǎn)時(shí)間選擇你感興趣的網(wǎng)站或App并重新設(shè)計(jì)它。你可以完全賦予它新的創(chuàng)意和意義，并且由此你將形成你的設(shè)計(jì)風(fēng)格和作品，獲得快速的成長(zhǎng)。
我們有很多的設(shè)計(jì)工具，但你不需要都了解。你只需要選擇你喜歡的并且適合你的工具即可，并隨時(shí)了解的功能和趨勢(shì)，以下是我在設(shè)計(jì)過(guò)程中使用的工具：
界面設(shè)計(jì)：Sketch
用于協(xié)作界面設(shè)計(jì)：Figma
用于低保真線(xiàn)框圖：Axure
用于界面設(shè)計(jì)和原型設(shè)計(jì)： Adobe XD
可交互動(dòng)態(tài)原型：Principle、Flinto
用于原型設(shè)計(jì)和協(xié)作：Invision App
學(xué)習(xí)設(shè)計(jì)的另一個(gè)好方法是找到愿意提供幫助的設(shè)計(jì)導(dǎo)師或設(shè)計(jì)師朋友。他們將幫助您加快學(xué)習(xí)進(jìn)程，導(dǎo)師或者設(shè)計(jì)師朋友會(huì)對(duì)你的設(shè)計(jì)方案會(huì)盡可能地發(fā)表意見(jiàn)。這就像一條捷徑，他們還會(huì)分享他們的經(jīng)驗(yàn)和方法論以及設(shè)計(jì)技巧。因此請(qǐng)向有經(jīng)驗(yàn)的設(shè)計(jì)師或者導(dǎo)師提出問(wèn)題并討論您的疑問(wèn)。
另外在我教授設(shè)計(jì)和前端的幾年時(shí)間里，我學(xué)到的東西比我教的要多很多。所以當(dāng)你準(zhǔn)備好如何與人們討論設(shè)計(jì)時(shí)，你可以指導(dǎo)或教育某人有關(guān)設(shè)計(jì)的知識(shí)。你將學(xué)習(xí)從不同的角度看待它，你將獲得你可能從未想過(guò)的反饋和問(wèn)題。
每當(dāng)你和其他人談?wù)撛O(shè)計(jì)時(shí)，你的思維將一直處于“頭腦風(fēng)暴”模式，你會(huì)發(fā)現(xiàn)自己越來(lái)越對(duì)設(shè)計(jì)產(chǎn)生興趣。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
天氣類(lèi)界面欣賞！
藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
響應(yīng)式已經(jīng)成為網(wǎng)頁(yè)設(shè)計(jì)的主流，目前已很多網(wǎng)站能兼容手機(jī)端 ，但是唯有 dashboard 的界面是相當(dāng)難在移動(dòng)端顯示，特別是數(shù)據(jù)復(fù)雜、內(nèi)容較多的后臺(tái)數(shù)據(jù)，是很難直接展示到移動(dòng)端的。
今天我們分享一系列 dashboard UI 設(shè)計(jì)作品，主要展示一些用戶(hù)數(shù)據(jù)、圖表的可視化組合設(shè)計(jì)。這些作品界面布局合理，層級(jí)分明，設(shè)計(jì)美觀(guān)，對(duì)要做這類(lèi) UI 的同學(xué)有很好的參考價(jià)值。
– 01 –
by limor.tabeka
– 02 –
卡路里消耗跟蹤器 by Cuberto
dribbble.com/cuberto
– 03 –
健身活動(dòng)追蹤 by Cuberto
– 04 –
醫(yī)院 APP 設(shè)計(jì) by Nicat Manafov
dribbble.com/nicatmanafovv
– 05 –
by Stelian Subotin
– 06 –
– 07 –
by Zoeyshen
dribbble.com/zoeyshen
– 08 –
by Gabe Becker
– 09 –
by Cedrica
dribbble.com/rddstudio
– 10 –
by Michal Parulski
http://dribbble.com/Shuma87
– 11 –
by Divan Raj
dribbble.com/divanraj
– 12 –
by Maciej Ka?aska
dribbble.com/themce
– 13 –
by Gregory Muryn-Mukha
dribbble.com/murynmukha
– 14 –
by Saepul Rohman
dribbble.com/SaepulRohman
– 15 –
by Dmitro Petrenko
dribbble.com/ortimd
– 16 –
健康生活 APP，by OKatarina
dribbble.com/OKatarina
– 17 –
暗色系移動(dòng)端后臺(tái) by ortimd
dribbble.com/ortimd
– 18 –
by Riko Sapto
dribbble.com/RikoSapto
– 19 –
by Taras Migulko
dribbble.com/migulko
– 20 –
電子單車(chē) APP 后臺(tái)設(shè)計(jì) by Arnar ólafsson
dribbble.com/pollur
– 21 –
by Cedrica
dribbble.com/cedrica
– 22 –
交易證券數(shù)據(jù)界面設(shè)計(jì) by Iftikhar Shaikh
dribbble.com/iftikharshaikh
– 23 –
記帳應(yīng)用統(tǒng)計(jì)界面 by Matt Koziorowski
dribbble.com/mattkoziorowski
– 24 –
by Matt Koziorowski
dribbble.com/mattkoziorowski
– 25 –
銀行 APP 數(shù)據(jù)界面 by Vlad Ermakov
dribbble.com/ermalength
– 26 –
比特幣交易界面設(shè)計(jì) by Pawel Kwasnik
dribbble.com/pawelkwasnik
– 27 –
醫(yī)療護(hù)理app用戶(hù)后臺(tái) by Masudur Rahman
dribbble.com/uigeek
– 28 –
by Manoj Rajput
dribbble.com/manojrajput
– 29 –
這個(gè)展開(kāi)菜單很好看呢 by Martin Mro?
dribbble.com/martinmroc
從收集的這些 Dashboard 界面來(lái)看，它的展示形式和PC 端有很大的區(qū)別，移動(dòng)端的后臺(tái)只能顯示少量或簡(jiǎn)化版的數(shù)據(jù)。比如 PC 一個(gè)頁(yè)面的功能，在移動(dòng)端可以分開(kāi)1-2個(gè)頁(yè)面來(lái)區(qū)分，或者使用類(lèi)似 Tab 的形式來(lái)展現(xiàn)。
如果是手機(jī) WEB 端可以用響應(yīng)式來(lái)解決，以節(jié)省成本，但這樣通常交互并不十分友好，如果時(shí)間和成本允許的話(huà)，建議產(chǎn)品和交互人員策劃新的后臺(tái)版本。
藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
在多人團(tuán)隊(duì)里，通常不同的設(shè)計(jì)師負(fù)責(zé)不同的流程，如果沒(méi)有UI設(shè)計(jì)規(guī)范，不同的設(shè)計(jì)師就會(huì)對(duì)相同的組件做出不同的方案。產(chǎn)生大量重復(fù)工作，效率比較低。而制作設(shè)計(jì)規(guī)范和UI KIT之后，則可以直接利用KIT里的組件快速搭建好頁(yè)面，把設(shè)計(jì)師從基礎(chǔ)工作中釋放出來(lái)，大大提升設(shè)計(jì)效率。
目錄
一、為什么要建立規(guī)范
二、規(guī)范的適用范圍
三、如何建立規(guī)范
1 利于多人協(xié)作，提率
2 增強(qiáng)一致性，塑造品牌感
制作和遵循設(shè)計(jì)規(guī)范，能夠保證整個(gè)產(chǎn)品的交互效果和視覺(jué)風(fēng)格、乃至文案的統(tǒng)一性，提升用戶(hù)的體驗(yàn)。
3 減少冗余內(nèi)容，方便維護(hù)和更新
同類(lèi)內(nèi)容使用一樣的組件，能夠降低輸出的內(nèi)容量，減少冗余的控件和代碼。同時(shí)也便于維護(hù)，在迭代時(shí)進(jìn)行統(tǒng)一的更新和應(yīng)用。
4 利于工作交接
方便設(shè)計(jì)團(tuán)隊(duì)和其他團(tuán)隊(duì)交接，如果團(tuán)隊(duì)有人員變動(dòng)，也方便后續(xù)入職的同事能夠通過(guò)規(guī)范迅速熟悉產(chǎn)品，快速上手。
前面的文章我提到過(guò)，如果產(chǎn)品處于啟動(dòng)期的話(huà)，這個(gè)時(shí)候最重要的事情是圈到第一波用戶(hù)，讓自己活下去。在這個(gè)階段產(chǎn)品會(huì)頻繁的改版、驗(yàn)證，迭代非?？?，整個(gè)團(tuán)隊(duì)可能都處于拼命加班的狀態(tài)。在這種情況下做設(shè)計(jì)規(guī)范文檔顯然事倍功半，一個(gè)是浪費(fèi)人力資源，另外就算做了，在頻繁更新的背景下也很難去執(zhí)行。
因此設(shè)計(jì)規(guī)范文檔更適合于那些跨越0-1階段的產(chǎn)品，這個(gè)時(shí)候產(chǎn)品已經(jīng)用有了一定的用戶(hù)，團(tuán)隊(duì)也會(huì)擴(kuò)張。這個(gè)時(shí)候我們可以選擇制作基礎(chǔ)的設(shè)計(jì)規(guī)范，比如柵格、配色、字體、圖標(biāo)規(guī)范等等。對(duì)于成熟期的產(chǎn)品來(lái)說(shuō)，大版本更新的周期是非常長(zhǎng)的，這個(gè)階段通常會(huì)制作更為詳細(xì)的設(shè)計(jì)指南、設(shè)計(jì)原則、do & don’t、品牌書(shū)、圖標(biāo)手冊(cè)等等。
電商類(lèi)的產(chǎn)品對(duì)于大家來(lái)說(shuō)都是比較熟悉的，就算不從事這個(gè)方面，日常使用也會(huì)很頻繁，所以此次案例我們以下面這個(gè)電商APP作為示范。
做規(guī)范時(shí)通常會(huì)有這兩種情況：
1、不打算進(jìn)行大版本更新的產(chǎn)品
對(duì)于小版本迭代的產(chǎn)品來(lái)說(shuō)，建立規(guī)范只需要在sketch里把所有設(shè)計(jì)稿進(jìn)行歸攏和分類(lèi)。直接根據(jù)現(xiàn)有的稿子梳理出規(guī)范，再對(duì)不符合規(guī)范的文件進(jìn)行調(diào)整即可。
2、新版本 新規(guī)范
而對(duì)于需要做新版本并且建立新版本規(guī)范的產(chǎn)品來(lái)說(shuō)，在做設(shè)計(jì)稿之前，我們就需要先統(tǒng)一一些基礎(chǔ)的內(nèi)容，比如顏色、字體、柵格等等，然后在設(shè)計(jì)過(guò)程中去制作KIT、對(duì)基礎(chǔ)的規(guī)范進(jìn)行補(bǔ)充。
1 制定統(tǒng)一的柵格系統(tǒng)
因?yàn)楝F(xiàn)在都是一稿適配多端，所以首先需要確定設(shè)計(jì)的基準(zhǔn)尺寸，是基于iphone8？還是iphone 8P？或者1080*1920等等……每個(gè)公司設(shè)計(jì)稿的基準(zhǔn)都不一樣，我們是以一倍圖為基準(zhǔn)進(jìn)行設(shè)計(jì)的，所以我這里的基準(zhǔn)尺寸就是375*667，單位為pt。
柵格一種情況是制定網(wǎng)格系統(tǒng)，網(wǎng)格系統(tǒng)的話(huà)首先要制定最小的設(shè)計(jì)單位，比如淘寶的最小單位是3，掌閱的最小單位是4，airbnb的最小單位是6……定好最小設(shè)計(jì)單位之后，界面中所有間距采用最小單位的倍數(shù)。
假定我們最小單位4的網(wǎng)格，排版時(shí)橫向和縱向的間距都是4的倍數(shù)，比如8、12、24。
第二種情況是可以直接建立橫向柵格系統(tǒng)，常用的是12柵格，12柵格比較好的地方是能夠同時(shí)被2、3、4整除，因此能夠根據(jù)具體需求靈活的設(shè)計(jì)各種模塊。當(dāng)然如果產(chǎn)品比較輕量化，是不需要這么復(fù)雜的柵格的，可以根據(jù)需求設(shè)置6、4甚至2柵格等等。
2 色彩規(guī)范
色彩規(guī)范主要表明色彩的色值和使用范圍，一般會(huì)從品牌色、輔助色、基礎(chǔ)色、狀態(tài)用色等等。如下圖所示。
如果產(chǎn)品常用到漸變的話(huà)，需要注明漸變的角度以及漸變色的色值。包括產(chǎn)品如果有夜間模式的話(huà)，要額外注明日間和夜間模式下各個(gè)顏色的對(duì)應(yīng)色值。當(dāng)然這里的夜間模式說(shuō)的是真·夜間，而不是微博那種直接加一個(gè)黑色透明度蒙層的偽·夜間。
額外提一句，重要內(nèi)容和正文內(nèi)容要保證文本的可識(shí)別度，WCAG指南中指出，文本和背景色的對(duì)比度需要達(dá)到3：1。大家可以通過(guò)
https://webaim.org/resources/contrastchecker/ 的顏色對(duì)比檢查器來(lái)核對(duì)顏色。我這里的品牌色和強(qiáng)調(diào)色對(duì)比度為3：1和6.3：1，而輔助顏色（比如標(biāo)簽）的對(duì)比度則在2-3之間。
3 字體
字體規(guī)范最需要注意的是提取出各個(gè)場(chǎng)景下需要用的字體和字號(hào)。
需要注意的是，要標(biāo)注上應(yīng)用場(chǎng)景方便其他人理解。不然其他成員也并不知道到底什么時(shí)候應(yīng)用一級(jí)標(biāo)題、什么時(shí)候用二級(jí)標(biāo)題。
4 圖標(biāo)
通常來(lái)說(shuō)圖標(biāo)分為兩種，功能性圖標(biāo)和展示性圖標(biāo)。
功能性圖標(biāo)是為了引導(dǎo)用戶(hù)理解和操作，需要表現(xiàn)和簡(jiǎn)介，方便用戶(hù)識(shí)別其含義。功能性圖標(biāo)常規(guī)狀態(tài)下為無(wú)彩色。
展示性圖標(biāo)通常為頁(yè)面入口，會(huì)有更多形狀、顏色、質(zhì)感的表達(dá)，吸引用戶(hù)的注意力和點(diǎn)擊欲望，強(qiáng)調(diào)差異性，比如各種品類(lèi)區(qū)的圖標(biāo)、徽章、等級(jí)圖標(biāo)等等。
圖標(biāo)規(guī)范通常來(lái)說(shuō)會(huì)先定一些基礎(chǔ)尺寸，梳理好各個(gè)頁(yè)面的圖標(biāo)尺寸，進(jìn)行整合，最后確定好幾個(gè)基礎(chǔ)尺寸，比如我這里的基礎(chǔ)尺寸是4個(gè)。功能層級(jí)一致的圖標(biāo)尺寸要一致。
為了保證不同形狀的圖標(biāo)在視覺(jué)上保持大小一致，會(huì)制作一個(gè)圖標(biāo)的基礎(chǔ)制作說(shuō)明。制作說(shuō)明里會(huì)統(tǒng)一圖標(biāo)的圓角、描邊的粗細(xì)；如果是涉及到展示性圖標(biāo)的話(huà)，還會(huì)有圖標(biāo)的視角選擇、配色的選擇、以及如何表現(xiàn)質(zhì)感等等等等
5 默認(rèn)圖
電商APP的話(huà)有大量的產(chǎn)品圖片，所以我們也把默認(rèn)的占位圖樣式進(jìn)行了統(tǒng)一。因?yàn)槲覀冞@里樣式都是一致的，所以采用了統(tǒng)一的規(guī)范，如果有多種默認(rèn)樣式，或者有其他類(lèi)型的占位圖，需要分別進(jìn)行說(shuō)明。
頁(yè)面組件通常包括導(dǎo)航欄、工具欄、彈框、列表、卡片、空狀態(tài)等等，按照原子設(shè)計(jì)理念來(lái)說(shuō)，還可以把組件拆分為原子、分子等更小的基礎(chǔ)設(shè)計(jì)組件，比如角標(biāo)、標(biāo)簽、按鈕、圖像、優(yōu)惠券、選擇器、進(jìn)度指示器等等
頁(yè)面組件除了梳理出規(guī)范之外，通常會(huì)整理成一整套UI KIT，保存為sketch文件日常拖拽使用，或者導(dǎo)入為L(zhǎng)ibraries直接調(diào)用。當(dāng)然，也可以直接在KIT上備注出規(guī)范和注意事項(xiàng)，具體輸出什么格式這個(gè)看團(tuán)隊(duì)的需求即可。
因?yàn)榻M件部分是一個(gè)比較龐大的內(nèi)容，需要根據(jù)具體產(chǎn)品
1按鈕
按鈕一般有懸浮按鈕、填充按鈕、線(xiàn)框按鈕和文本按鈕等類(lèi)型。其中懸浮按鈕具有最高的優(yōu)先級(jí)，屬于強(qiáng)引導(dǎo)型按鈕。
按鈕通常會(huì)有三種狀態(tài)，常規(guī)狀態(tài)、點(diǎn)擊狀態(tài)和不可用狀態(tài)。因此在規(guī)范中需要標(biāo)明按鈕在這三種狀態(tài)下的樣式，比如顏色、投影、圓角、文字大小等等
除此以外，也可能會(huì)有加載狀態(tài)，也就是在點(diǎn)擊按鈕后，如果有1S以上的數(shù)據(jù)延遲，通常會(huì)考慮觸發(fā)按鈕的加載狀態(tài)。加載狀態(tài)的按鈕樣式為按鈕上顯示進(jìn)度指示器。
2 導(dǎo)航
對(duì)現(xiàn)有頁(yè)面的導(dǎo)航進(jìn)行收攏和分類(lèi)，比如我這里分類(lèi)為常規(guī)標(biāo)題樣式、標(biāo)簽樣式、搜索框樣式、無(wú)標(biāo)題樣式、字母導(dǎo)航……
標(biāo)題需要注意文字的極限值，ICON尺寸和位置的話(huà)要考慮最小可點(diǎn)擊區(qū)域，我這里icon的尺寸設(shè)置為24pt，但是熱區(qū)是44pt，所以要注意間距的設(shè)置，熱區(qū)不能重疊。
3 標(biāo)簽
標(biāo)簽通常有多個(gè)使用場(chǎng)景，我們可以對(duì)標(biāo)簽進(jìn)行分組，比如運(yùn)營(yíng)類(lèi)標(biāo)簽、內(nèi)容屬性標(biāo)簽、篩選標(biāo)簽等等
然后對(duì)每類(lèi)的標(biāo)簽統(tǒng)一樣式、文字內(nèi)邊距以及說(shuō)明適用場(chǎng)景。
4 彈窗
彈窗是為了提示和通知用戶(hù)而位于頁(yè)面內(nèi)容之上的一種控件。它是引導(dǎo)用戶(hù)專(zhuān)注于某一項(xiàng)任務(wù)，用戶(hù)可以通過(guò)操作來(lái)關(guān)閉彈框。彈框包含模態(tài)（對(duì)話(huà)框、操作菜單）和非模態(tài)（toast、 snake bar等）兩種形式。
模態(tài)彈窗需要定義蒙層的樣式（顏色、透明度），以及彈框內(nèi)的文字說(shuō)明和按鈕。
我這里拿一個(gè)對(duì)話(huà)框的規(guī)范進(jìn)行舉例，這是一個(gè)無(wú)ICON的雙按鈕對(duì)話(huà)框，因此在這里我們需要說(shuō)明標(biāo)題、正文文本、按鈕以及背景遮罩的信息，還有字號(hào)、行距、文字極限值、文字色、按鈕的狀態(tài)等等……
除此之外，組件類(lèi)的規(guī)范可以配上常用案例、don’t&do，會(huì)更方便團(tuán)隊(duì)人員理解，防止錯(cuò)誤狀況。
5 列表
列表是由多個(gè)等寬的行組成的、按照一定規(guī)律排列的連續(xù)條目。列表在一些資訊類(lèi)產(chǎn)品里會(huì)有更多的組合形式。我這款產(chǎn)品里用到的列表主要是單行和雙行列表，那么我們就整理出對(duì)應(yīng)的列表類(lèi)型和需要說(shuō)明的事項(xiàng)。
寫(xiě)這篇文的初衷，是因?yàn)閺娜ツ甑孜医⒐娞?hào)，并且在站酷發(fā)表了一些文章，得到了很多人的認(rèn)可。很多粉絲私信我各種問(wèn)題，陸續(xù)有人問(wèn)我設(shè)計(jì)規(guī)范怎么做、交互規(guī)范什么樣之類(lèi)的問(wèn)題。但是公司內(nèi)部的文件確實(shí)沒(méi)有辦法公開(kāi)分享，所以我就想說(shuō)，那不如專(zhuān)門(mén)寫(xiě)一篇文章詳細(xì)教大家制作移動(dòng)UI設(shè)計(jì)規(guī)范吧。
這篇的基礎(chǔ)部分我做的比較詳細(xì)，組件部分寫(xiě)的有些概括，主要是因?yàn)榻M件部分不是通用的，要根據(jù)自己的稿子進(jìn)行整理和歸納，歸納好之后做好標(biāo)注和規(guī)范說(shuō)明即可，這部分是一個(gè)羅列的內(nèi)容，所以就不必展開(kāi)了……
當(dāng)然還有很多內(nèi)容沒(méi)有展開(kāi)說(shuō)，比如在Sketch里把KIT制作成Libraries統(tǒng)一使用，但是我想作為一篇設(shè)計(jì)規(guī)范入門(mén)教程目前應(yīng)該足夠了，更多的內(nèi)容我在后續(xù)開(kāi)新文去補(bǔ)充吧。
藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
排行榜干貨集合。
藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
今天分享軟件后臺(tái)界面設(shè)計(jì)，
藍(lán)設(shè)計(jì)( www.lanlanwork.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
迪士尼動(dòng)畫(huà)的12條原則是設(shè)計(jì)師必須要掌握的經(jīng)典指導(dǎo)性原則，是由Ollie Johnston和Frank Thomas在他們的書(shū)《The Illusion of Life》中提出來(lái)的觀(guān)點(diǎn)（譯者注：這本書(shū)在豆瓣的評(píng)分有9.3分，值得一看）。這些原則最初是用來(lái)為動(dòng)畫(huà)片這種傳統(tǒng)的形式設(shè)計(jì)的，然而，這些原則也同樣適用于UI設(shè)計(jì)。所以，我想在這里做一個(gè)有趣的嘗試，看能否將這些動(dòng)畫(huà)原則聯(lián)系起來(lái)。
在動(dòng)畫(huà)中，擠壓和拉伸代表了物體的重力，質(zhì)量，重量和靈活性。舉例來(lái)說(shuō)，當(dāng)一個(gè)彈球在它撞擊地面時(shí)會(huì)發(fā)生形態(tài)變化，就是擠壓和拉伸。
在界面中，擠壓和拉伸很容易就聯(lián)想到按鈕。當(dāng)一個(gè)按鈕被按下時(shí)，就可以理解為受到了擠壓，通過(guò)控制按鈕的擠壓和拉伸，我們可以很輕易的做好一個(gè)按鈕的交互動(dòng)畫(huà)。除了按鈕之外，這種原則也可以應(yīng)用于UI中的任何交互元素上。
按鈕在交互時(shí)的擠壓和拉伸
擠壓和拉伸被應(yīng)用于側(cè)邊欄
讓觀(guān)眾能預(yù)先知道接下來(lái)將會(huì)發(fā)生什么，它是先于下一步會(huì)發(fā)生的動(dòng)作。舉例來(lái)說(shuō)，迪士尼動(dòng)畫(huà)里經(jīng)常有從高空往下跳躍時(shí)會(huì)先彎曲膝蓋再跳、正在跑步的人要停止跑步前會(huì)逐漸變慢步伐等等。
在界面中，懸停狀態(tài)就是很好的例子。當(dāng)我們把鼠標(biāo)懸停在元素上時(shí)，元素會(huì)提供反饋，表明它是可以點(diǎn)擊的，并且在點(diǎn)擊時(shí)，又會(huì)有一些別的反饋。
懸停的交互通常會(huì)暗示這個(gè)按鈕是可以點(diǎn)的
在有水平滾動(dòng)界面里，通常在交互時(shí)會(huì)顯示下一個(gè)元素的部分內(nèi)容。這其實(shí)是一個(gè)很好的例子，因?yàn)樗窃诟嬷脩?hù)下一步的一些信息。
在傳統(tǒng)動(dòng)畫(huà)中，時(shí)間會(huì)決定關(guān)鍵幀的繪制方式。幀數(shù)越多，動(dòng)畫(huà)就越流暢，同時(shí)也更慢，時(shí)間能夠給動(dòng)畫(huà)賦予情緒和性格。
時(shí)間的節(jié)奏感是任何動(dòng)畫(huà)的基礎(chǔ)，速度在元素編排中起著非常重要的作用。速度太慢，用戶(hù)會(huì)不耐煩，速度太快，用戶(hù)又會(huì)錯(cuò)過(guò)一些內(nèi)容。一般來(lái)說(shuō)，大多數(shù)UI動(dòng)畫(huà)在200-600ms之間，其中懸停和反饋交互時(shí)長(zhǎng)大約為300ms，精細(xì)的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)大約在500ms。也可以去參考谷歌的動(dòng)畫(huà)規(guī)范（https://material.io/design/motion/speed.html#duration），里面非常詳細(xì)的解釋了每種動(dòng)畫(huà)類(lèi)型的持續(xù)時(shí)間。
一些設(shè)計(jì)系統(tǒng)，如Carbon（https://www.carbondesignsystem.com/guidelines/motion/）、Lightning（https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/）都把運(yùn)動(dòng)的節(jié)奏感視為一個(gè)很重要的方面，并為每種類(lèi)型的過(guò)渡都制定了嚴(yán)格的規(guī)范。
右邊的過(guò)渡動(dòng)畫(huà)顯得太過(guò)于漫長(zhǎng)，繁瑣。
在現(xiàn)實(shí)世界中，大多數(shù)物體都遵循著緩動(dòng)運(yùn)動(dòng)規(guī)律。也就是說(shuō)，物體的運(yùn)動(dòng)并不會(huì)瞬間開(kāi)始或瞬間結(jié)束，就像一個(gè)物體自由落體，也是一開(kāi)始很慢后面才變會(huì)變快。
左側(cè)的卡片是沒(méi)有緩動(dòng)的，右側(cè)的是帶有緩動(dòng)的，看起來(lái)會(huì)自然很多。
給UI中的元素加上緩動(dòng)會(huì)讓它看起來(lái)更加自然，緩動(dòng)和節(jié)奏感都是可以有效的提升動(dòng)畫(huà)的品質(zhì)。
舞臺(tái)中的表演需要合適的編排才會(huì)精彩。也就是說(shuō)，對(duì)象在場(chǎng)景中如何擺放，每個(gè)動(dòng)畫(huà)又如何出現(xiàn)，關(guān)乎演出的質(zhì)量。通過(guò)這種編排，能夠?qū)⒆⒁饬σ蜃钪匾慕巧?
在界面中，呈現(xiàn)方式能夠決定元素的位置，以及在交互時(shí)，它應(yīng)該如何編排才能將用戶(hù)的注意力引向預(yù)期的元素。
比如現(xiàn)在有一個(gè)基于興趣的音樂(lè)APP，對(duì)這個(gè)應(yīng)用來(lái)說(shuō)，最重要的事就是讓動(dòng)畫(huà)引導(dǎo)用戶(hù)選擇他們所喜歡的音樂(lè)。因此，有必要將類(lèi)似的操作與其他元素分開(kāi)編排，有目的的引導(dǎo)用戶(hù)。
一個(gè)從高處拋出的小球，運(yùn)動(dòng)軌跡會(huì)做拋物線(xiàn)軌跡運(yùn)動(dòng)，弧線(xiàn)能使物體的運(yùn)動(dòng)更加自然。
在界面中，沿著對(duì)角線(xiàn)的元素沿著弧線(xiàn)軌跡將會(huì)使運(yùn)動(dòng)變得更加自然。當(dāng)需要凸顯出元素的運(yùn)動(dòng)路徑時(shí)，多嘗試使用弧線(xiàn)軌跡。
通過(guò)對(duì)比，能夠發(fā)現(xiàn)右側(cè)的弧線(xiàn)運(yùn)動(dòng)軌跡會(huì)比左側(cè)的直線(xiàn)運(yùn)動(dòng)軌跡顯得更加自然。
在動(dòng)畫(huà)中，次要?jiǎng)幼髂軌蚱鸬胶嫱兄饕獎(jiǎng)幼?，比如?dòng)畫(huà)中的角色在走路時(shí)，頭部的晃動(dòng)就是次要?jiǎng)幼?，卻能夠讓角色行走顯得更加自然。
在界面中，次要操作能夠起到強(qiáng)化關(guān)鍵動(dòng)作，當(dāng)元素需要向用戶(hù)提供反饋時(shí)，這個(gè)方法非常管用。所有的微交互都是基于這個(gè)附屬動(dòng)作原理。
按鈕邊上的粒子效果強(qiáng)化了主按鈕的點(diǎn)擊效果
場(chǎng)景中的重要角色通常會(huì)采用一些比較夸張的動(dòng)作來(lái)獲得更多的注意力。
在界面中，重要的交互也會(huì)通過(guò)一些夸張的動(dòng)畫(huà)來(lái)引起用戶(hù)的注意。谷歌設(shè)計(jì)規(guī)范中的FAB按鈕就是一個(gè)很好的例子，F(xiàn)AB按鈕在不動(dòng)的時(shí)候也比較能引起注意，因?yàn)樗ǔ?huì)帶有比較鮮明的顏色，并且是獨(dú)立懸浮在界面元素之上的。當(dāng)它被點(diǎn)擊時(shí)，F(xiàn)AB的動(dòng)畫(huà)被放大，把整個(gè)界面都占滿(mǎn)，使得它完全占據(jù)用戶(hù)的注意力。
FAB 夸張的交互形式
對(duì)于支付這么重要功能的按鈕，通過(guò)夸張的動(dòng)效引起用戶(hù)的注意
想象一只兔子從高處跳下來(lái)，當(dāng)兔子開(kāi)始起跳時(shí)，它的耳朵動(dòng)作會(huì)與身體動(dòng)作發(fā)生錯(cuò)位。然后當(dāng)它著陸時(shí)，它的身體停下來(lái)了，但是耳朵還在動(dòng)。前者稱(chēng)之為跟隨動(dòng)作，后者被稱(chēng)為重疊動(dòng)作。其原理說(shuō)的就是：沒(méi)有任何一種物體會(huì)突然停止，物體的運(yùn)動(dòng)是一個(gè)部分接著另一個(gè)部分的。
在界面中，可以使元素在停止之前超過(guò)它們?cè)镜奈恢?，使得元素運(yùn)動(dòng)更加自然。（譯者注：大白話(huà)就是我們常說(shuō)的回彈效果。）
界面有一定的回彈，會(huì)顯得更加自然。
當(dāng)界面滾動(dòng)時(shí)，文字會(huì)跟隨圖片的運(yùn)動(dòng)，圖片與文字以不同的速度運(yùn)動(dòng)會(huì)更加自然。（譯者注：像是被拖著走的那種感覺(jué)）
界面中的每一次交互都必須在適當(dāng)?shù)膱?chǎng)景中精心設(shè)計(jì)，讓整個(gè)體驗(yàn)更具沉靜感。在正確的地方使用這些原則能夠確保產(chǎn)品中的交互體驗(yàn)更加協(xié)調(diào)自然。
這些原則正在以不同的形式應(yīng)用于當(dāng)今的數(shù)字產(chǎn)品中，值得敬畏的是，30年前設(shè)計(jì)的一套規(guī)則到今天仍然適用。
藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn