2016-12-4 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
編者按:制作UI 設(shè)計(jì)規(guī)范的大體思路應(yīng)該是怎樣的?制作規(guī)范時(shí)容易遇到哪些瓶頸?今天這篇好文是華為設(shè)計(jì)師總結(jié)的經(jīng)驗(yàn),幫你一次性搞定這兩個(gè)問(wèn)題!
2016已經(jīng)接近尾聲,上兩天剛參加完比賽,利用這幾天空閑時(shí)間,把最近沉淀下來(lái)的東西分享出來(lái)。
上個(gè)月團(tuán)隊(duì)幾個(gè)小組進(jìn)行友誼比賽,命題是“郵件”。規(guī)定大家以產(chǎn)品思維去設(shè)計(jì)一款全新的產(chǎn)品,形式不限。很難得的是所有人都參加了產(chǎn)品設(shè)計(jì)的每一個(gè)環(huán)節(jié)。我們秉著發(fā)現(xiàn)問(wèn)題、解決問(wèn)題的態(tài)度開(kāi)始了這次友誼比賽。
通過(guò)不停的嘗試與否定后,我們鎖定目標(biāo)人群為威客群體,針對(duì)威客群體接私單的特定場(chǎng)景,通過(guò)用戶問(wèn)卷、訪談、旅程圖,最后得到以下幾個(gè)痛點(diǎn):
針對(duì)這幾個(gè)痛點(diǎn),我們的解決方案是:
最后我們的產(chǎn)品定位是:威客人群的無(wú)紙化溝通簽約工具。
通過(guò)這次嘗試,大家都參與了所有流程——信息收集、競(jìng)品分析、確定目標(biāo)人群、場(chǎng)景梳理、用戶旅程圖、尋找痛點(diǎn)和機(jī)會(huì)點(diǎn)、信息架構(gòu)、交互稿、視覺(jué)稿。這對(duì)于我們每一個(gè)人都有很大的幫助。
所以我決定乘勝追擊,把設(shè)計(jì)規(guī)范也做出一份,但由于是概念稿,所以規(guī)范做的不算全面,每個(gè)產(chǎn)品也有各自的規(guī)范思路和維度,沒(méi)有絕對(duì)的對(duì)與錯(cuò),這里只是提供一個(gè)大體方向,疏漏之處,希望給予批評(píng)指正。
至于為什么叫“核桃”,有三個(gè)維度的寓意:
1.與合同諧音,首字母都是HT
2.威客就是用智慧在互聯(lián)網(wǎng)上賺錢的人,而核桃補(bǔ)腦,形狀又像大腦,所以寓意恰巧吻合。
3.核桃的外殼是堅(jiān)硬的,給人一種受保護(hù)的安全感,而郵件、合同也正是如此。
界面設(shè)計(jì):林佳娜、蔡鑫
logo設(shè)計(jì):蘇桂
交互設(shè)計(jì):李祖松、丁明艷、蔡鑫
規(guī)范設(shè)計(jì):蔡鑫
上面是給大家提供一個(gè)制作UI設(shè)計(jì)規(guī)范的大體思路,現(xiàn)在準(zhǔn)備來(lái)聊聊我們?cè)诰唧w執(zhí)行過(guò)程中遇到的最大問(wèn)題、瓶頸是什么!
適讀人群:想進(jìn)階的初級(jí)UI設(shè)計(jì)師、有追求的初級(jí)交互設(shè)計(jì)師。
前期做規(guī)范的過(guò)程是十分痛苦的,每做一個(gè)板塊都要花很多時(shí)間去思考怎么表達(dá)、展示才能讓其他設(shè)計(jì)師和程序員都一目了,然而隨著內(nèi)容的增加,發(fā)現(xiàn)很多地方無(wú)法深入的執(zhí)行下去,只能含糊其辭,給我們制作規(guī)范的人員帶來(lái)了很大苦惱。
為什么有如此大的執(zhí)行阻礙呢?帶著問(wèn)題我們找到團(tuán)隊(duì)的一位設(shè)計(jì)前輩請(qǐng)教了一番,在前輩的指點(diǎn)下,終于發(fā)現(xiàn)了問(wèn)題所在:我們對(duì)于前端如何實(shí)現(xiàn)設(shè)計(jì)稿其實(shí)并沒(méi)有很好的了解。
大家要明白,如果你沒(méi)有徹底了解你做的界面,那么做規(guī)范就會(huì)十分艱難,因?yàn)槟阒皇亲隽吮韺拥囊曈X(jué)設(shè)計(jì),換句話來(lái)說(shuō)就是你根本不明白界面是怎么用代碼實(shí)現(xiàn)出來(lái)的。我就是因?yàn)橛龅搅诉@樣的問(wèn)題,所以在做規(guī)范的時(shí)候,經(jīng)常無(wú)從下手。
了解原因之后,我們決定如果后期再發(fā)生執(zhí)行困難的情況,我們就會(huì)向設(shè)計(jì)前輩或者前端程序員咨詢一些簡(jiǎn)單的實(shí)現(xiàn)方法,慢慢了解他們的思維模式,讓設(shè)計(jì)執(zhí)行變得越來(lái)越順暢。
其實(shí)遇到困惑的地方還是蠻多的,這里就拿二級(jí)導(dǎo)航來(lái)舉例,希望大家能舉一反三,多多思考與實(shí)踐。
圖1-1是XX項(xiàng)目的所有關(guān)于二級(jí)導(dǎo)航的樣式,因?yàn)檫@一塊的界面不是我做的(都是借口),所以規(guī)范不太了解,導(dǎo)致在做整個(gè)項(xiàng)目的規(guī)范時(shí),遇到了極大的阻礙。
最初看這幾個(gè)二級(jí)導(dǎo)航時(shí),我的第一感覺(jué)是4個(gè)樣式遵循相同規(guī)則:整條導(dǎo)航欄平均N等分后,文字在每個(gè)等分區(qū)域內(nèi)居中,但是仔細(xì)查看間距后發(fā)現(xiàn)只有2、3的樣式遵循這樣的規(guī)律,1和4并不遵循,那1和4的樣式到底是什么呢?
導(dǎo)航1,如下圖
標(biāo)明顏色后,我們可以清晰看出,原來(lái)這個(gè)導(dǎo)航是平均分成了3等分(紅綠藍(lán)),只不過(guò)將綠色分割成兩半放在左右兩邊,這樣我們就可以根據(jù)整條導(dǎo)航的長(zhǎng)度計(jì)算出每塊區(qū)域的長(zhǎng)度,不論是開(kāi)發(fā)還是設(shè)計(jì)師都可以一目了然并且明白其中的設(shè)計(jì)規(guī)則。
導(dǎo)航4,如下圖
首先我們先來(lái)認(rèn)識(shí)一個(gè)單詞:auto(自動(dòng)的意思),就是指數(shù)值可以變化、不固定。
再來(lái)看這個(gè)導(dǎo)航樣式,在程序員眼中這個(gè)導(dǎo)航其實(shí)是由兩個(gè)容器組成的,一個(gè)容器是:綠色區(qū)域+紅色區(qū)域+藍(lán)色區(qū)域,另一個(gè)容器是:黃色區(qū)域(不可滑動(dòng),大小固定)。
而第一個(gè)容器內(nèi)的綠色和藍(lán)色部分(間距)也是固定的,所以只有紅色區(qū)域是可變化的,因?yàn)榧t色區(qū)域的文字個(gè)數(shù)是可以變化的,我們只要給出字體大小即可。
所以對(duì)于導(dǎo)航4的規(guī)范,我們要給出綠色、藍(lán)色、黃色區(qū)域的寬度;文字(選中、未選中)的大小及顏色;黃色區(qū)域內(nèi)圖標(biāo)的大小、間距以及滑動(dòng)規(guī)則就基本可以高度還原出視覺(jué)稿的樣式了。
了解了這些前端知識(shí)之后,我們發(fā)現(xiàn)再次制做二級(jí)導(dǎo)航的規(guī)范時(shí),過(guò)程順暢很多。
先來(lái)總結(jié)一下當(dāng)設(shè)計(jì)師擁有一定開(kāi)發(fā)思維后的好處有哪些?
1.減少與開(kāi)發(fā)哥哥不必要的溝通,推進(jìn)工作的順利進(jìn)行。
2.對(duì)于設(shè)計(jì)師自身管理設(shè)計(jì)文件、規(guī)范化作圖、規(guī)范的制定、頁(yè)面標(biāo)注都有極大的幫助。
3.避免設(shè)計(jì)很多無(wú)法落地的設(shè)計(jì)方案,省時(shí)省力,提高工作效率。
任何事情都有其內(nèi)在的套路與規(guī)律,我們必須要了解事物的本質(zhì),才能幫助我們更好的執(zhí)行;所有的苦惱與迷茫都是源自你對(duì)事物的理解不夠透徹,所以讓我們從現(xiàn)在開(kāi)始,鍛煉透過(guò)事物看本質(zhì)的思維能力,就算以后你不做設(shè)計(jì)了,這種能力也可以伴隨著你,讓你受益終身!
歡迎關(guān)注作者的微信公眾號(hào):菜心設(shè)計(jì)鋪
藍(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