從零開始做出的完整APP的詳細步驟

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

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

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

看什么?

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

2.國外設(shè)計資源網(wǎng)站(我主要還是上上追波、比漢子、站酷、UI中國)。

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

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

第二步(交互部分)畫和寫

構(gòu)思和畫框架，因為時間有限我做出了主要的一些功能和說明。來看一下我寫的結(jié)構(gòu)圖：

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

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

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

第三步：(視覺)除了磨就是磨)

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

1. 配色;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第四步(包裝/動效)考驗排版的時候到了

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

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

網(wǎng)站標(biāo)題：從零開始做出的完整APP的詳細步驟
網(wǎng)站URL：http://muchs.cn/news27/167477.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站收錄、云服務(wù)器、虛擬主機、微信小程序、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)