今天作者從構(gòu)思、交互、視覺(jué)、包裝四個(gè)步驟手把手教你做個(gè)產(chǎn)品。

hi，盟友們大家好！已經(jīng)快兩周沒(méi)有發(fā)文了，因?yàn)槎荚谧鲎髌?，從?gòu)思，畫(huà)原型，到定視覺(jué)風(fēng)格和規(guī)范，再到出視覺(jué)稿和動(dòng)效。說(shuō)實(shí)話中間過(guò)程比較艱辛，因?yàn)闀r(shí)間太短，同時(shí)這也是我給自己的一個(gè)訓(xùn)練。今天下午終于上了期盼已久的站酷首頁(yè)，離明年的目標(biāo)又近了一步。

好了，廢話就說(shuō)這么多，接下去我就此次作品的流程或者說(shuō)做法，講解一下。

第一步（構(gòu)思部分）：想和看

想什么？呢，當(dāng)然是想我們要?jiǎng)?chuàng)作出一個(gè)什么樣的作品，可以是自己喜歡的產(chǎn)品，做個(gè)redesign什么的。也可以是一個(gè)大雜燴功能整合，但是盡量不要做差異太大的兩種產(chǎn)品，比如佛學(xué)類(lèi)和陌生人社交（yuepao）這兩類(lèi)的結(jié)合就有點(diǎn)坑爹了：D 總不能和尚約和尚我們出來(lái)一起念經(jīng)對(duì)吧。

看什么？

1. 互聯(lián)網(wǎng)熱點(diǎn)新聞、黑科技等前沿科技報(bào)告。
2. 國(guó)外設(shè)計(jì)資源網(wǎng)站（我主要還是上上追波、比漢子、站酷、UI中國(guó)）。
3. 看自己對(duì)什么比較感興趣，興趣是支撐你一直堅(jiān)持設(shè)計(jì)下去的動(dòng)力。雖然我自己也不是很喜歡騎單車(chē)，蛋疼。

經(jīng)過(guò)前兩步應(yīng)該有一點(diǎn)小想法了吧，那么我們可以開(kāi)始考慮整一個(gè)產(chǎn)品的框架還有風(fēng)格的走向。在看的過(guò)程中你可能對(duì)這兩點(diǎn)已經(jīng)有了方向，但是沒(méi)有落地依然還是很虛的。好那么我們就要拿起你的手中的紙和筆，將你的想法都寫(xiě)下來(lái)。無(wú)論是什么想法都要寫(xiě)，創(chuàng)意點(diǎn)，功能，交互，風(fēng)格，目標(biāo)人群，色彩，等等。這里我們不需要考慮商業(yè)問(wèn)題，因?yàn)槲覀儾皇窃趧?chuàng)業(yè)，而是在創(chuàng)作。但是邏輯一定要清晰。

第二步（交互部分）畫(huà)和寫(xiě)

構(gòu)思和畫(huà)框架，因?yàn)闀r(shí)間有限我做出了主要的一些功能和說(shuō)明。來(lái)看一下我寫(xiě)的結(jié)構(gòu)圖：

其實(shí)功能不多對(duì)不對(duì)，嗯千萬(wàn)不要給自己挖坑，做一個(gè)輕量型的就行了，除非你打算做一年。

理清頁(yè)面的邏輯這邊也是非常重要的一個(gè)環(huán)節(jié)，因?yàn)榧幢氵@次我們不考慮商業(yè)問(wèn)題，但是用戶界面是基于用戶操作的，如果連邏輯都梳理不通，那真的就是一個(gè)花架子，做UI的朋友這點(diǎn)要注意喔。

好，下面再來(lái)看一下我畫(huà)的紙質(zhì)原型，字丑多擔(dān)待：

其實(shí)看上去頁(yè)面很多其實(shí)只做了幾個(gè)一級(jí)頁(yè)面，紙質(zhì)原型的好處就是想到哪就可以改到哪，草稿部分我就不發(fā)出來(lái)了，辣眼睛。

第三步：（視覺(jué)）除了磨就是磨

視覺(jué)部分占了這次設(shè)計(jì)的大頭，雖然只是短短十幾個(gè)頁(yè)面，但是有一半的頁(yè)面是花了1，2個(gè)小時(shí)才設(shè)計(jì)出來(lái)的，經(jīng)常遇到的問(wèn)題就是花大半個(gè)小時(shí)設(shè)計(jì)出一張，不滿意重新推翻再設(shè)計(jì)，反復(fù)修改。那么我們?cè)谧鲰?yè)面的時(shí)候通常需要考慮一下幾點(diǎn)：

1. 配色

一個(gè)產(chǎn)品的色彩，大致能反映出該產(chǎn)品的性格、品味、氣質(zhì)。一款優(yōu)秀的產(chǎn)品，在配色上他也是具有這些特質(zhì)的。使用的顏色將決定了我們的產(chǎn)品將是一種什么樣的風(fēng)格，是熱情，是低調(diào)，還是歡樂(lè)。那么這次我用了飽和度不高的深藍(lán)色為背景色，搭配一種飽和度不高的亮藍(lán)色和桃色作為產(chǎn)品的主色和輔色，目的是為了讓用戶感知到有藍(lán)色的運(yùn)動(dòng)、科技感，深色的低調(diào)收斂感，還有桃色的跳躍，驚喜感。當(dāng)我們?cè)谑褂眠@3種色彩的時(shí)候，不是肆無(wú)忌憚的亂用，而是需要恰如其分的使用。比如亮藍(lán)色和桃色我們不能大面積的使用這樣會(huì)破壞整個(gè)頁(yè)面的氛圍。

我通常使用，也是很多畫(huà)原畫(huà)朋友用的一種方法，就是設(shè)計(jì)完一張頁(yè)面，我會(huì)縮小的去看整張頁(yè)面大致的色彩分布情況，亮藍(lán)色和桃色作為引導(dǎo)和提醒使用是最好不過(guò)。

2. 信息布局和層次的展現(xiàn)

說(shuō)完了配色，說(shuō)一下信息布局和層次展現(xiàn)的小技巧。思考場(chǎng)景是我們需要先想到的，用戶在導(dǎo)航時(shí)候的場(chǎng)景，和在添加路線時(shí)候的場(chǎng)景是不一樣的，操作方式也是不同的，一般信息布局首先我會(huì)將相關(guān)聯(lián)的內(nèi)容靠近擺放，或者沿著視覺(jué)流順序擺放。層次展現(xiàn)一般是控制元素的大小，顏色深淺，粗細(xì)，遠(yuǎn)近等幾個(gè)因素來(lái)區(qū)分。

3.是否符合用戶操作習(xí)慣

思考用戶手指的操作熱力圖，和使用場(chǎng)景，將重點(diǎn)操作功能置于下部分，信息展現(xiàn)置于上部分、返回在右上角、左滑刪除，長(zhǎng)按刪除等等。

4.交互的連貫性和合理性等等

比如通常頁(yè)面的返回是在左上角用箭頭的形式展現(xiàn)，如果其中一個(gè)頁(yè)面的返回跑到了右上角用文字展現(xiàn)，這樣的方式就是不連貫的，也是違背了用戶的操作習(xí)慣的設(shè)計(jì)。

再比如一個(gè)箭頭給用戶的感覺(jué)是下拉，但是如果操作結(jié)果是跳轉(zhuǎn)頁(yè)面，那就違背了用戶的預(yù)期，是不好的體驗(yàn)，就是不合理的。

5.各種狀態(tài)和極值

這次練習(xí)不考慮開(kāi)發(fā)，所以這條就不寫(xiě)了。但是在我們?nèi)粘ｍ?xiàng)目當(dāng)中，這些是需要畫(huà)，并且畫(huà)的更全面的。

還有每次做設(shè)計(jì)練習(xí)都會(huì)先定好一個(gè)視覺(jué)規(guī)范，舉幾個(gè)例子（當(dāng)然不止這4點(diǎn)）：

1. 字體：通常我會(huì)在一倍尺寸下使用18，16，14，12，10的字體大小，18用于頂部標(biāo)題，16用作標(biāo)題或正文，14號(hào)可以用作說(shuō)明，12號(hào)可以用做提示，10號(hào)字用作小標(biāo)簽。
2. 字色：字體顏色通常使用3個(gè)層次深淺即可，切忌不能使用純黑色。
3. 線條：1倍圖我用的是#dddddd，0.5px。這個(gè)其實(shí)不用那么死板，就像每臺(tái)電視機(jī)適合自己的參數(shù)都是不同的，可能你家產(chǎn)品適合用1px，或者別的顏色。
4. 柵格：柵格的用處可是非常大，柵格系統(tǒng)應(yīng)用于設(shè)計(jì)領(lǐng)域已經(jīng)至少50年了。柵格化讓眼睛瀏覽信息更加愉悅。從報(bào)紙、雜志，到手機(jī)界面，柵格系統(tǒng)全面滲透到各種信息傳達(dá)的界面當(dāng)中。具體什么是柵格系統(tǒng)，不在這里多說(shuō)，大家可以去百度一下。

還有每次做設(shè)計(jì)練習(xí)都會(huì)先定好一個(gè)視覺(jué)規(guī)范，比如用什么字體，用幾種字體大小和顏色，線條粗細(xì)顏色，主色輔色點(diǎn)睛色的敲定，柵格的排列等等，盡量使所有頁(yè)面看起來(lái)統(tǒng)一有格調(diào)。

等等，你問(wèn)我顏色是怎么搭配的？我又要安利dribbble了，追波每一個(gè)作品邊上會(huì)有一張?jiān)撟髌返呐渖珬l，很多優(yōu)秀的作品的配色都可以做參考。但是這次我選擇的配色倒是自己瞎選選出來(lái)的，本身做東西喜歡藍(lán)色系，再加上顏色和產(chǎn)品的調(diào)性比較搭，然后配上一個(gè)桃色，哈哈。

第四步（包裝/動(dòng)效）考驗(yàn)排版的時(shí)候到了

其實(shí)每一步都很讓我糾結(jié)，有一天我頁(yè)面做完了打算做長(zhǎng)圖，想了一天都沒(méi)想出來(lái)，索性放棄了。第二天晚上做了兩三個(gè)小時(shí)就做完了長(zhǎng)圖。然后開(kāi)始磨動(dòng)效，這邊使用了principle和ae兩個(gè)軟件，真的灰常好用。

在最后展示作品之前我想說(shuō)：創(chuàng)意是羽毛，想法是皮膚，工具是肌肉，思維是骨骼，缺一不可。

作者：應(yīng)駿，微信公眾號(hào)：「shejishiyj」UI設(shè)計(jì)獅聯(lián)盟

本文由 @應(yīng)駿 ?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。