本文轉(zhuǎn)載自我的個人博客 閱讀原文
很榮幸能在今年的“第六屆“發(fā)現(xiàn)杯”全國大學(xué)生互聯(lián)網(wǎng)軟件設(shè)計(jì)大獎賽“中獲得“藝術(shù)設(shè)計(jì)”項(xiàng)目全國第一名。賽后很多人好奇习劫，非設(shè)計(jì)專業(yè)的我們到底是怎么做到的虽风。于是決定寫下這篇文章棒口，分享我們的作品創(chuàng)作過程寄月。
概要介紹
“藝術(shù)設(shè)計(jì)”賽項(xiàng)要求如下：
我們組里包括我在內(nèi)一共三名隊(duì)員，兩個軟件開發(fā)專業(yè)一個商務(wù)專業(yè)无牵，除了我之前因?yàn)樽鲞^海報(bào)設(shè)計(jì)漾肮，自學(xué)過一點(diǎn)PS。除此之外茎毁，沒有任何優(yōu)勢克懊。但即使這樣，還能在3個月準(zhǔn)備出作品并獲得一等獎的原因七蜘，我覺得如下：
在短時間內(nèi)獲得一等獎的關(guān)鍵點(diǎn)
- 選題：緊繞時下熱門谭溉，有市場需求和發(fā)展?jié)摿?/strong>
- 定位：制作定位用戶畫像及梳理APP結(jié)構(gòu)
- 資料收集：妙用抖音，精準(zhǔn)搜索
- 設(shè)計(jì)：頁面設(shè)計(jì)遵循設(shè)計(jì)規(guī)范橡卤，不標(biāo)新立異
- 答辯：提供真機(jī)演示扮念，加深評委印象
- 工具：選對工具，事半功倍
在具體介紹上面幾個點(diǎn)之前碧库，先介紹一下我們的整個準(zhǔn)備流程：
定主題→用戶畫像→基調(diào)選擇→案例搜集→原型和效果圖制作→交互制作→展示策略
其中在 “原型制作”和“交互制作”上花費(fèi)的時間最久柜与。“原型制作”涉及到對頁面的布局構(gòu)思嵌灰，以及整體風(fēng)格的掌握弄匕，各個頁面不能風(fēng)格差異過大。所以需要花費(fèi)很多的時間去構(gòu)思和準(zhǔn)備沽瞭。對于“交互制作”迁匠，因?yàn)槲覀兪褂玫氖侵皼]接觸過的軟件，所以磨合時間會比較長秕脓。因此柒瓣，建議為這兩個階段留出豐富的準(zhǔn)備時間。
下面給大家展示一下我們在創(chuàng)作過程中的幾張中間產(chǎn)物吠架。
下面就給大家具體介紹一下之前提到的幾個關(guān)鍵點(diǎn)芙贫，文末還有我自己整理的資料哦
選題：緊繞時下熱門，有市場需求和發(fā)展?jié)摿?/h2>
我當(dāng)時在選題的時候傍药，花了近1天的時間磺平，考慮點(diǎn)圍繞當(dāng)下流行的熱門技術(shù)，如人工智能拐辽、機(jī)器學(xué)習(xí)拣挪、5G等。但是俱诸，選好一個方向后必須有一個自己熟悉的應(yīng)用場景菠劝，同時要去了解這個應(yīng)用場景的市場價(jià)值，盡量是那種沒被完全開發(fā)的睁搭，有很大發(fā)展空間的赶诊，沒有行業(yè)巨頭的笼平。
最后，幾番權(quán)衡下舔痪，我選擇了5G應(yīng)用場景下的物聯(lián)網(wǎng)設(shè)備寓调，而這個物聯(lián)網(wǎng)設(shè)備不是針對人的，是針對寵物的锄码。因?yàn)槲宜私獾蕉嵊ⅲ鶕?jù)《2018年中國寵物行業(yè)白皮書》數(shù)據(jù)顯示，貓狗市場的經(jīng)濟(jì)規(guī)模接近1708億滋捶，而其中的寵物智能用品大約只占到10%痛悯，還有很大的發(fā)展空間。因此重窟，最后敲定灸蟆，做一款寵物智能設(shè)備管理的APP界面設(shè)計(jì)。
定位：制作定位用戶畫像及梳理APP結(jié)構(gòu)
這是確定選題之后首先面臨的問題亲族，我們該如何去構(gòu)思這個頁面和APP整體結(jié)構(gòu)？作為一名非UI設(shè)計(jì)師可缚，又沒有任何UI設(shè)計(jì)項(xiàng)目經(jīng)驗(yàn)的我來說是個很頭疼的問題霎迫。著名的物理學(xué)家牛頓說過：“我之所以能成功，是因?yàn)槲艺驹诰奕说募缟稀绷泵摇Ｒ虼酥鉀Q問題的第一步就是去找市場上存在的競品APP，它能給你在自己的APP結(jié)構(gòu)設(shè)計(jì)和頁面構(gòu)思上帶來靈感描姚。
- 用戶畫像：根據(jù)《2018年中國寵物行業(yè)白皮書》統(tǒng)計(jì)涩赢，貓狗消費(fèi)市場的消費(fèi)人群畫像以高學(xué)歷、女性轩勘、白領(lǐng)為主筒扒。這也是我們這款A(yù)PP的用戶畫像。
- 主題風(fēng)格：在對UI風(fēng)格的選取上绊寻，我們采用清新花墩、簡約、扁平化澄步、卡片化的設(shè)計(jì)冰蘑，默認(rèn)主題色選取以粉色漸變?yōu)橹鳎杂嫌脩舢嬒瘛?/li>
-
用戶劃分：同時我把我們這款A(yù)PP的用戶群體劃分為兩種：小白用戶和發(fā)燒級用戶村缸。
- 小白用戶：盡可能直觀的展現(xiàn)寵物各個階段數(shù)據(jù)可視化結(jié)果祠肥，因此頁面設(shè)計(jì)的要更加簡約。
- 發(fā)燒級用戶：更加細(xì)致呈現(xiàn)各個時間段數(shù)據(jù)報(bào)表梯皿，來體現(xiàn)我們的結(jié)果數(shù)據(jù)是真實(shí)產(chǎn)生的仇箱，不是隨機(jī)生成县恕。引導(dǎo)發(fā)燒級用戶更加精準(zhǔn)確定寵物健康狀態(tài)。
-
商業(yè)考量：此外考慮到APP需要盈利的因素工碾，必須要加入商城頁面弱睦，達(dá)到廠商合作盈利的目的。 考慮了以上幾點(diǎn)渊额，我們確定了APP的兩大特色：
階段性評分系統(tǒng)和數(shù)據(jù)可視化系統(tǒng)况木。并確定了APP的整體結(jié)構(gòu)，如下圖所示
APP導(dǎo)航欄結(jié)構(gòu)
資料收集：妙用抖音旬迹，精準(zhǔn)搜索
這里不得不提到一個工具——抖音火惊。也許很多人都很疑惑，抖音不就是個看網(wǎng)紅的小視頻軟件嗎奔垦？也能有素材屹耐？
用這種想法去看抖音是很片面的，在我理解上椿猎，抖音的最最核心的東西惶岭，是它的那套基于機(jī)器學(xué)習(xí)的智能推薦算法。如果你在抖音上經(jīng)常搜索或觀看和移動UI設(shè)計(jì)有關(guān)的東西犯眠，那么它就會給你推送這類的視頻按灶。久而久之，你的抖音就被你訓(xùn)練成UI設(shè)計(jì)師素材庫筐咧。并且在它的推薦池里鸯旁，會根據(jù)熱度加權(quán)推薦。所以你獲取到的其它設(shè)計(jì)師發(fā)的小視頻相對來說質(zhì)量還是比較高的量蕊。而且抖音還有一個特點(diǎn)铺罢，大部分人發(fā)的一個視頻都是15秒，所以很多設(shè)計(jì)師發(fā)視頻會把自己最最精華的介紹或工具推薦在15秒內(nèi)呈現(xiàn)残炮，避免拖泥帶水韭赘，這也給我們在找素材和構(gòu)思上省了很多時間。
用這方法势就，我找到了很多國內(nèi)的設(shè)計(jì)素材網(wǎng)站像千圖網(wǎng)辞居、花瓣、站酷蛋勺、UI中國等瓦灶，國外的Pinterest、Dribble抱完、Behance等（需要梯子）贼陶。如果是設(shè)計(jì)專業(yè)的同學(xué)，對這幾個網(wǎng)站應(yīng)該并不陌生。
具體的素材網(wǎng)站分享碉怔，我會整理并在文章的結(jié)尾給出烘贴。這里推薦幾個我在創(chuàng)作過程中關(guān)注的幾個抖音號：AbleSlide、活力占撮胧、才華側(cè)漏的孔老濕桨踪。
搜索國外素材網(wǎng)站的時候，就不能用中文了芹啥，必須用英文關(guān)鍵字去搜锻离，而且不能直譯。比如需要找引導(dǎo)頁墓怀，則搜“onboarding”而不是拿百度翻譯等翻譯工具直譯的“Boot page”汽纠。這些英文關(guān)鍵字得自己去積累或百度、知乎傀履、谷歌等上去搜虱朵。
| 英文 | 中文 |
|---|---|
| Flat illustration | 扁平類極簡插畫 |
| Noise texture illustration | 噪點(diǎn)紋理風(fēng)格插畫 |
| 2.5D axonometric | 2.5D軸測圖 |
| MBE | 斷電式錯位填充插畫 |
| Dooble | 涂鴉式漫畫 |
| Gradient poster | 漸變類海報(bào) |
| Brand identity | 品牌識別logo |
| Animation | 動效 |
| Onboarding | 引導(dǎo)頁 |
| Empty state | 空頁面 |
| Pull-to-refresh | 下拉刷新 |
| Landing page | 落地頁 |
| SaaS或dashboard | 后臺儀表盤式頁面 |
設(shè)計(jì)：頁面設(shè)計(jì)遵循設(shè)計(jì)規(guī)范，不標(biāo)新立異
安卓端和蘋果的設(shè)計(jì)還是很不一樣钓账，時間原因我們把目標(biāo)集中在了安卓端碴犬。而設(shè)計(jì)規(guī)范也是參考安卓上的。首先想到的是看的是谷歌的Material Design設(shè)計(jì)規(guī)范梆暮，之后又參考了微信小程序的設(shè)計(jì)規(guī)范翅敌。這里給出了一部分安卓設(shè)計(jì)規(guī)范參考，如圖所示惕蹄。
答辯：提供真機(jī)演示，加深評委印象
比賽一共有三輪治专，區(qū)域賽和省賽時第三卖陵，而全國決賽卻取得了第一。這要?dú)w功于我們對答辯策略的大調(diào)整张峰。
決賽的評委更加注重作品本身的市場價(jià)值泪蔫，而不是單單側(cè)重UI。于是在老師的建議下喘批，決賽演講8分鐘的時間里撩荣，接近一半的時間用于介紹市場背景和競品分析，突出產(chǎn)品的市場應(yīng)用前景和怎么去創(chuàng)造營收饶深。但隨之而來的一個問題：剩下的4分鐘時間餐曹，又要講UI又要講交互，時間根本不夠敌厘。那么我們是怎么解決的呢？
給出真機(jī)演示
答辯一開始就要遞給評委真機(jī)（和答辯材料一起），這樣評委就能有充足時間去了解這個作品鉴裹。而且真機(jī)演示比起播放視頻，更加促進(jìn)了評委對整個APP的理解曹步。
選擇這樣的策略，有一個很大的前提休讳，就是要對自己的作品UI部分足夠自信讲婚，并且交互邏輯要完整，更加接近一個真實(shí)的APP俊柔。誰也不知道評委會點(diǎn)哪里進(jìn)入到下一頁筹麸，而不同的進(jìn)入方法，需要對應(yīng)不同的頁面狀態(tài)婆咸。把交互邏輯做成閉環(huán)竹捉，才能避免弄巧成拙，給評委留下好印象尚骄。
順便提一句块差，在對答辯材料的制作上，建議選用彩色提案的形式倔丈，摒棄軟件工程文檔那種大篇幅陳述的思維憨闰，頁數(shù)控制在10頁以內(nèi)。
可以參考我推薦的這個站酷上設(shè)計(jì)的比較好的提案——提案樣式推薦
工具：選對工具需五，事半功倍
因?yàn)殛?duì)員所有的電腦都是Windows端鹉动，并且在確定完選題后離海選作品提交僅剩1個半月。因此宏邮，我們選取工具的原則就是：
1. 支持windows端
2. 學(xué)習(xí)成本低
3. 保真度高（高到什么程度泽示？可以制作頁面跳轉(zhuǎn)就行）
4. 效率高
百度之后，結(jié)合自身情況蜜氨，我們把每個領(lǐng)域的工具做了一個對比械筛。
最后確定的工具是：
原型工具：墨刀（學(xué)習(xí)成本低）
效果圖工具：PS（之前已學(xué)過部分工具的使用，上手快飒炎，高保真）
交互工具：ProtoPie（支持XD文件導(dǎo)入埋哟，學(xué)習(xí)成本低，高保真）
以上就是我在賽后對獲獎的幾個關(guān)鍵點(diǎn)的總結(jié)郎汪。
因?yàn)槲覀兪鞘状谓佑|APP原型設(shè)計(jì)赤赊，在摸著石頭過河的過程中肯定會遇到許多問題，這里列舉幾個我遇到的針對性問題煞赢。
遇到的問題
-
PS文件導(dǎo)入XD的問題
雖然PS和XD都是一個公司旗下的軟件抛计，但是他們有著各自的應(yīng)用場景。把PSD文件導(dǎo)入到XD時照筑，部分效果會不一致爷辱。針對此問題官方也給了一個表格（https://helpx.adobe.com/xd/kb/open-photoshop-files-in-xd.html）录豺。
所以在PS里制作的時候，如要用PS特有的功能饭弓，用完之后記得把圖片柵格化或其他操作双饥，以保持文件樣式在XD中的兼容性。 -
原型分辨率的選取問題
由于一開始在原型分辨率上沒有太多的考量弟断，直接就選用了360*640這種分辨率咏花。而目前市場上安卓設(shè)備大多是劉海屏或水滴屏為主，屏幕比例約為18:9阀趴。在后期套模板制作AE宣傳視頻和展示圖的時候昏翰，新的樣機(jī)模板都是以18:9的屏幕比例來制作。這也就導(dǎo)致我在替換圖片的時候就非常麻煩刘急，比例不協(xié)調(diào)棚菊。
在原型分辨率的選取上，應(yīng)盡量迎合主流市場的用戶或根據(jù)項(xiàng)目需求叔汁。 -
配色問題
畢竟我們不是專業(yè)的設(shè)計(jì)師统求，對色彩的感覺不是非常敏感。在配色的處理上据块，我們只能盡量借助工具和自己的感覺码邻。配色工具我們使用了Color Scheme Designer(網(wǎng)頁版)、WebGradients（漸變色）以及千圖網(wǎng)提供的配色工具另假。 -
素材導(dǎo)入問題
我們找素材的時候像屋，可能會遇到各種格式的圖，比如常見的eps边篮、ai己莺、psd、cdr等戈轿。這就需要知道每個格式分別對應(yīng)哪些軟件去打開凌受，自己的電腦里得裝上這些軟件。你可以不會用所有的這些軟件作圖凶杖，但是你得知道怎么把這些格式的圖取出來為自己所用。并且如果原圖是矢量的款筑，就盡量拿出矢量的圖智蝠，保證放大后不會失真。比如奈梳，把矢量圖從ai轉(zhuǎn)入ps中杈湾，從ai復(fù)制后，到ps粘貼時應(yīng)選擇為“智能對象”攘须。
| 格式 | 軟件名 |
|---|---|
| psd | Adobe Photoshop |
| ai | Adobe illustrator |
| eps | Adobe illustrator |
| cdr | CorelDRAW |
總結(jié)
3個月時間漆撞，讓我學(xué)會的并不只是APP原型的制作本身，而是每當(dāng)我遇到一個問題，應(yīng)該用怎樣的思路解決浮驳。俗話說悍汛，授人以魚不如授人以漁。我是希望各位讀者在看這篇文章的時候能去學(xué)習(xí)那種分析并解決問題的方法至会。先確定目標(biāo)离咐，大化小，分而治之奉件。
面對陌生的問題宵蛀，每個人第一眼都是無從下手的狀態(tài)。當(dāng)你冷靜下來第二眼再看這個問題的時候县貌，你就要馬上想到我手上有什么資源术陶，哪些資源能嘗試解決這個問題，哪怕解決一部分或理出這個問題的線頭煤痕。
善用搜索引擎進(jìn)行精準(zhǔn)搜索梧宫。這不僅是在這次比賽中頻繁用到，包括在我們之后的學(xué)習(xí)和工作過程中杭攻，會遇到各種問題祟敛。要學(xué)會去精準(zhǔn)搜索，嘗試解決問題兆解。
希望這篇文章可以幫助大家在之后的設(shè)計(jì)比賽中能繞過我所踩過的坑或完善我所走過的路馆铁。
答謝
感謝在APP創(chuàng)作過程中各個隊(duì)員夜以繼日的努力，
感謝張文勝和王艷君老師在制作和答辯技巧上給出的指導(dǎo)意見锅睛，
最后還要感謝在交互上提供軟件及技術(shù)支持的ProtoPie的韓學(xué)穎老師埠巨。
附件
參賽作品：https://share.protopie.io/ZTeK6N6Snrz
設(shè)計(jì)類網(wǎng)站分享
| 網(wǎng)址 | 作用 | 是否需要VPN |
|---|---|---|
| UI類 | ||
| https://www.58pic.com/ | 千圖網(wǎng)（設(shè)計(jì)素材下載） | 否 |
| https://huaban.com/ | 花瓣網(wǎng)（設(shè)計(jì)師靈感采集） | 否 |
| https://www.zcool.com.cn/ | 站酷網(wǎng)（設(shè)計(jì)師互動平臺） | 否 |
| https://www.ui.cn/ | UI中國（專業(yè)用戶體驗(yàn)設(shè)計(jì)平臺） | 否 |
| http://app.reeoo.com/ | App Inspiration（UI設(shè)計(jì)分享） | 否 |
| https://www.behance.net/ | Behance（創(chuàng)意作品分享） | 是 |
| https://www.pinterest.com/ | Pinterest（設(shè)計(jì)師靈感采集） | 是 |
| https://dribbble.com/ | Dribbble（設(shè)計(jì)作品分享） | 是 |
| 插畫類 | ||
| https://undraw.co/illustrations | UnDraw（插件源文件素材） | 否 |
| 教程類 | ||
| http://meia.me/ | 美啊（創(chuàng)意設(shè)計(jì)與時尚美學(xué)在線教育平臺） | 否 |
| https://uiiiuiii.com/ | 優(yōu)優(yōu)教程網(wǎng)（設(shè)計(jì)師教程學(xué)習(xí)平臺） | 否 |
| https://www.bilibili.com/ | 嗶哩嗶哩（無廣告现拒，搜索教程） | 否 |
| 配色類 | ||
| https://www.58pic.com/zhinengpeise/ | 千圖網(wǎng)配色工具（智能配色） | 否 |
| http://www.peise.net/tools/web/ | 配色網(wǎng)（色環(huán)配色） | 否 |
| https://webgradients.com/ | WebGradients（漸變色） | 否 |
| 圖標(biāo)類 | ||
| https://www.iconfont.cn/ | 阿里巴巴矢量圖標(biāo)庫 | 否 |
| https://www.easyicon.net/ | Easyicon | 否 |
| 模板類 | ||
| http://dunnnk.com/ | Dunnnk（樣機(jī)場景） | 建議是 |
| https://www.newcger.com/ | 新CG（AE宣傳片模板） | 否 |
