UI實(shí)戰(zhàn)案例!一個(gè)完整的App是如何從零開始做出來的?

資訊頻道 - 設(shè)計(jì)技 來源:中國設(shè)計(jì)在線 作者:cdo 2016-12-06


今天這篇是一個(gè)完整的App 產(chǎn)出過程,從構(gòu)思,畫原型,到定視覺風(fēng)格和規(guī)范,再到出視覺稿和動(dòng)效,都是由一個(gè)人完成的,本篇就此次作品的流程講解一下。

01/

(構(gòu)思部分):想和看

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

看什么?

   1.互聯(lián)網(wǎng)熱點(diǎn)新聞、黑科技等前沿科技報(bào)告。

   2.國外設(shè)計(jì)資源網(wǎng)站(behance、dribbble)。

   3.看自己對什么比較感興趣,興趣是支撐你一直堅(jiān)持設(shè)計(jì)下去的動(dòng)力。雖然我自己也不是很喜歡騎單車,蛋疼。

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

02/

(交互部分)畫和寫

構(gòu)思和畫框架,因?yàn)闀r(shí)間有限我做出了主要的一些功能和說明。來看一下我寫的結(jié)構(gòu)圖:



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

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

好,下面再來看一下我畫的紙質(zhì)原型,字丑多擔(dān)待:


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

03/

(視覺)除了磨就是磨

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

1. 配色;

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

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

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

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

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

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

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

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

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

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

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

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

   1.字體:通常我會在一倍尺寸下使用18,16,14,12,10的字體大小,18用于頂部標(biāo)題,16用作標(biāo)題或正文,14號可以用作說明,12號可以用做提示,10號字用作小標(biāo)簽。

   2.字色:字體顏色通常使用3個(gè)層次深淺即可,切忌不能使用純黑色。

   3.線條:1倍圖我用的是#dddddd,0.5px。這個(gè)其實(shí)不用那么死板,就像每臺電視機(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),不在這里多說,大家可以去百度一下。

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

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

04/

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

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

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

UI實(shí)戰(zhàn)案例!一個(gè)完整的App是如何從零開始做出來的?

UI實(shí)戰(zhàn)案例!一個(gè)完整的App是如何從零開始做出來的?

UI實(shí)戰(zhàn)案例!一個(gè)完整的App是如何從零開始做出來的?


聲明:站內(nèi)網(wǎng)友所發(fā)表的所有內(nèi)容及言論僅代表其本人,并不反映任何網(wǎng)站意見及觀點(diǎn)。

全部評論

暫無相關(guān)推薦