??首發(fā)于微信公眾號(hào)：小阿田的設(shè)計(jì)筆記~

作者：我叫小夢(mèng)婷

地址：http://www.ui.cn/detail/414900.html（歡迎關(guān)注）

本文已獲得作者授權(quán)原創(chuàng)發(fā)布于公眾號(hào)「小阿田的設(shè)計(jì)筆記」前方，未經(jīng)許可镇饮，禁止轉(zhuǎn)載际歼。

寫(xiě)在前言

近期有一位朋友問(wèn)我“什么是設(shè)計(jì)風(fēng)格术羔？”，在溝通了解之下寞焙，原來(lái)是他承接了一款全新的移動(dòng)端項(xiàng)目储狭，不知該從何設(shè)計(jì)。這位朋友是剛?cè)胄械男氯说方迹瑥?-1的設(shè)計(jì)對(duì)他來(lái)說(shuō)是很難把控的辽狈，但是對(duì)他卻是一次不錯(cuò)的經(jīng)歷。

正好我承擔(dān)的主要項(xiàng)目是從0-1呛牲，今年3月份還經(jīng)歷了一次2.0設(shè)計(jì)大改版刮萌。這款產(chǎn)品是我獨(dú)立設(shè)計(jì)，基本是全棧負(fù)責(zé)娘扩，所以把整個(gè)設(shè)計(jì)過(guò)程的思考總結(jié)出來(lái)分享出來(lái)着茸，一起學(xué)習(xí)一起共勉僧凤。

一、進(jìn)入流程

1元扔、了解業(yè)務(wù)

在設(shè)計(jì)之前躯保，一定要給自己爭(zhēng)取時(shí)間進(jìn)行設(shè)計(jì)準(zhǔn)備工作，而不是一拿到交互就上手設(shè)計(jì)澎语，無(wú)思考的設(shè)計(jì)是沒(méi)有靈魂的途事。

在接到任務(wù)后就要立馬了解業(yè)務(wù)，知曉產(chǎn)品方向擅羞，熟悉用戶畫(huà)像等相關(guān)信息尸变，了解這些信息后，在后來(lái)的設(shè)計(jì)中减俏，更能站在用戶的角度去看待和總結(jié)設(shè)計(jì)問(wèn)題召烂。

能最快了解到業(yè)務(wù)動(dòng)向的產(chǎn)品經(jīng)理那里，當(dāng)產(chǎn)品經(jīng)理和交互對(duì)接需求的時(shí)候娃承，設(shè)計(jì)師盡量參與到討論當(dāng)中奏夫，而不要等到交互評(píng)審的時(shí)候才去了解業(yè)務(wù)。

如果你的項(xiàng)目有競(jìng)品历筝，那這個(gè)資源真的是得天獨(dú)厚酗昼，它能夠讓你迅速了解產(chǎn)品的商業(yè)規(guī)劃。當(dāng)然梳猪，最好對(duì)競(jìng)品進(jìn)行分析麻削，不光從設(shè)計(jì)，也要從它的體驗(yàn)和頁(yè)面之間的跳轉(zhuǎn)進(jìn)行思考春弥。這些過(guò)程的積累呛哟，能夠幫助你更好的了解交互的內(nèi)容，在交互中發(fā)現(xiàn)問(wèn)題匿沛，提出自己的觀點(diǎn)扫责。(這里不是說(shuō)讓你去找交互的茬，而是在設(shè)計(jì)過(guò)程中俺祠，你能夠?qū)换サ脑O(shè)計(jì)有疑問(wèn)公给，多與交互進(jìn)行討論，這樣能夠擴(kuò)展設(shè)計(jì)思維蜘渣，聯(lián)想更多的用戶使用場(chǎng)景)。

2肺然、設(shè)計(jì)思考

設(shè)計(jì)的操作蔫缸，不僅局限于界面的內(nèi)容，在設(shè)計(jì)的前期準(zhǔn)備中际起，結(jié)合前期對(duì)業(yè)務(wù)的了解拾碌，在現(xiàn)有不足的需求內(nèi)容里吐葱，可以先進(jìn)行風(fēng)暴式設(shè)計(jì)(前期飛機(jī)稿)，有準(zhǔn)備的設(shè)計(jì)校翔，在進(jìn)入到正式設(shè)計(jì)后弟跑，能夠有備無(wú)患，更快的進(jìn)行調(diào)整防症。設(shè)計(jì)的前期準(zhǔn)備我們可以從3個(gè)點(diǎn)入手：

二孟辑、顏色

顏色是整個(gè)產(chǎn)品的靈魂，是與用戶最直接的溝通對(duì)象蔫敲，恰當(dāng)?shù)氖褂妙伾撬裕軌蚋鼫?zhǔn)確的引導(dǎo)用戶的操作。

在制定顏色的時(shí)候奈嘿，首先考慮的是品牌色貌虾，就是產(chǎn)品最主要的代表色。內(nèi)容色或者其他輔助色裙犹，可以在設(shè)計(jì)中尽狠，進(jìn)行添加或者調(diào)整。

· 品牌色

1叶圃、有品牌色

已有品牌色晚唇，是可以直接運(yùn)用到設(shè)計(jì)中，除了原有的品牌色盗似，還可以根據(jù)頁(yè)面的整體視覺(jué)需求哩陕，制定合適的輔助色，輔助色一般是用于區(qū)分不同標(biāo)簽赫舒、icon悍及、內(nèi)容等。

2接癌、無(wú)品牌色

品牌色是被賦予意義的心赶，一期制定后，將會(huì)被長(zhǎng)期沿用缺猛，運(yùn)用到所有與企業(yè)相關(guān)的衍生內(nèi)容缨叫，未來(lái)基本不會(huì)有很大跨色系變化，所以在制定品牌色要很慎重荔燎。每個(gè)顏色代表的意義是不一樣的耻姥，有些顏色也是某些行業(yè)的代表色，所以品牌色可以根據(jù)行業(yè)類(lèi)型去制定

也可以根據(jù)用戶類(lèi)型制定品牌色有咨，OFO小黃車(chē)就是典型的例子琐簇，打造年輕陽(yáng)光時(shí)尚的騎行平臺(tái)，而黃色就是給人輕快座享，充滿希望和活力的感覺(jué)婉商。

還可以根據(jù)平臺(tái)自己想給用戶帶去什么樣的感覺(jué)制定似忧，這種方式最好是能夠有很多用戶進(jìn)行體驗(yàn)驗(yàn)證，因?yàn)轭伾亲钪苯拥囊曈X(jué)體驗(yàn)傳達(dá)丈秩，所以這種方式制定盯捌，要更為嚴(yán)謹(jǐn)。

我在項(xiàng)目中遇到的用色問(wèn)題和思路：

問(wèn)題：

品牌logo的代表色來(lái)自某戒網(wǎng)比賽提供蘑秽，品牌調(diào)性不規(guī)范饺著，無(wú)衍生產(chǎn)品，個(gè)人對(duì)項(xiàng)目了解不透徹筷狼，根據(jù)自我喜好瓶籽，定下深紅色茫孔。

思路：

其實(shí)遇到這種類(lèi)型的問(wèn)題告抄，應(yīng)該同時(shí)考慮平面方面的知識(shí)，顏色是否適合該產(chǎn)品畅哑，未來(lái)的線下物料是否適合承載物俏险。

我負(fù)責(zé)的項(xiàng)目目標(biāo)用戶是卡車(chē)司機(jī)严拒，為了平臺(tái)宣傳，卡車(chē)上會(huì)貼一些車(chē)貼竖独，卡車(chē)的顏色有很多裤唠，深紅色和藍(lán)色是很常見(jiàn)的。但是第一版的項(xiàng)目代表色是深紅色莹痢，在同是紅色系的沖突下种蘸，則需要調(diào)整多種車(chē)色同時(shí)適用的代表色，所以在項(xiàng)目1-2的設(shè)計(jì)改版中竞膳，我調(diào)整了品牌色航瞭。

有人會(huì)有疑問(wèn)，為什么定個(gè)品牌色還需要考慮線下使用場(chǎng)景坦辟？前蘋(píng)果設(shè)計(jì)總監(jiān)曾舉過(guò)一個(gè)列子：當(dāng)初他在黑莓任職刊侯，需要開(kāi)始創(chuàng)建一個(gè)新的手機(jī)操作系統(tǒng)，從他們最開(kāi)始的第一天就把工業(yè)設(shè)計(jì)锉走、包裝設(shè)計(jì)滨彻、用戶界面以及市場(chǎng)等全部的核心整合在一起，來(lái)創(chuàng)造一套全新的用戶體驗(yàn)挪蹭。這是一個(gè)很好的例子亭饵，要永遠(yuǎn)將設(shè)計(jì)看作企業(yè)品牌的一部分。

我們?cè)谥纸缑嬖O(shè)計(jì)的時(shí)候嚣潜，需要考慮你所能想到一切的使用場(chǎng)景冬骚，顏色是影響用戶第一元素，形成的產(chǎn)品形象是一直影響品牌形象的懂算，所以在制定代表色一定要考慮的更全面只冻。

· ?內(nèi)容色

我一般把字體、背景计技、分割線等用色分為一類(lèi)喜德，這類(lèi)顏色用的比較多的是白到黑色之間色。我定義的顏色都是100%純色垮媒，直接使用顏色的數(shù)值舍悯。

也有設(shè)計(jì)師喜歡從#000000純黑色，調(diào)整不同的透明度使用睡雇，有透明度的顏色在不同顏色背景上會(huì)有不同的視覺(jué)效果萌衬，所以色值在提供給前端人員的時(shí)候，還需要進(jìn)行調(diào)整它抱。內(nèi)容色的制定方法就看設(shè)計(jì)師的個(gè)人習(xí)慣來(lái)調(diào)整了秕豫，只要能正常進(jìn)行開(kāi)發(fā)，視覺(jué)效果保持一致即可观蓄。

在根據(jù)交互設(shè)計(jì)稿設(shè)計(jì)頁(yè)面的時(shí)候混移，要理解內(nèi)容的層級(jí)，合理的使用顏色侮穿。標(biāo)題／主要內(nèi)容／提示文字／icon等用色歌径，都會(huì)對(duì)用戶產(chǎn)生不同的視覺(jué)指引，找了幾家社區(qū)的界面設(shè)計(jì)亲茅，可以看到不同內(nèi)容的顏色深淺都是不一樣的回铛，整個(gè)視覺(jué)是有層次的，所表達(dá)的內(nèi)容也清晰明了克锣，突出重點(diǎn)茵肃，弱化次要內(nèi)容。

三娶耍、 風(fēng)格

近年來(lái)免姿，大量留白的極簡(jiǎn)平面風(fēng)格流行于各大互聯(lián)網(wǎng)平臺(tái)，我們需要在趨于一致的風(fēng)格中找到自己的設(shè)計(jì)風(fēng)格榕酒，可以從這幾個(gè)點(diǎn)進(jìn)行思考：

1胚膊、瀏覽競(jìng)品的設(shè)計(jì)，有助于區(qū)分自己的設(shè)計(jì)想法想鹰，從競(jìng)品設(shè)計(jì)中脫離紊婉。

2、多看其他產(chǎn)品的界面風(fēng)格辑舷，激發(fā)設(shè)計(jì)靈感喻犁。

3、運(yùn)用網(wǎng)格系統(tǒng)，創(chuàng)造合適的視覺(jué)樣式肢础，規(guī)范設(shè)計(jì)原則还栓。

4、帶入品牌元素传轰，有助于品牌的宣傳剩盒。

5、加入情感化設(shè)計(jì)慨蛙，拉近產(chǎn)品與用戶之間的距離辽聊。

從0-1的設(shè)計(jì)任務(wù)量是很大的，需要規(guī)劃設(shè)計(jì)節(jié)點(diǎn)期贫，可以先從底部tab的幾個(gè)主要內(nèi)容先行設(shè)計(jì)跟匆，在設(shè)計(jì)中，需要從3個(gè)主要視覺(jué)層入手：

· ?圖標(biāo)

界面設(shè)計(jì)中的icon的設(shè)計(jì)會(huì)提高整個(gè)界面的視覺(jué)和用戶好感度通砍，iocn的風(fēng)格有剪影圖標(biāo)玛臂、輕擬物圖標(biāo)、輕質(zhì)感圖標(biāo)埠帕、文字圖標(biāo)垢揩、疊加圖標(biāo)、插畫(huà)圖標(biāo)敛瓷、擬物化圖標(biāo)叁巨。

其中，剪影圖標(biāo)呐籽、輕質(zhì)感圖標(biāo)锋勺、插畫(huà)圖標(biāo)比較常見(jiàn)，插畫(huà)圖標(biāo)多用于節(jié)日類(lèi)型的宣傳狡蝶、游戲類(lèi)app庶橱。擬物化、輕擬物圖標(biāo)的流行趨勢(shì)比較早年了贪惹，個(gè)人認(rèn)為輕質(zhì)感是擬物簡(jiǎn)化的樣式苏章。疊加類(lèi)圖標(biāo)，實(shí)際屬于一種創(chuàng)新類(lèi)樣式設(shè)計(jì)奏瞬，不同顏色枫绅、線條、或透明度疊加的視覺(jué)樣式硼端。

icon設(shè)計(jì)的風(fēng)格最終還是由設(shè)計(jì)師自己最終決定的并淋，如果在時(shí)間充裕的情況下，設(shè)計(jì)師可以運(yùn)用常用的圖標(biāo)樣式結(jié)合產(chǎn)品特點(diǎn)設(shè)計(jì)出2-3版的飛機(jī)稿和團(tuán)隊(duì)人員進(jìn)行討論珍昨，圖標(biāo)的設(shè)計(jì)風(fēng)格上要保持統(tǒng)一性原則县耽。

舉例：

三大外賣(mài)美食類(lèi)產(chǎn)品的設(shè)計(jì)都具備自己的設(shè)計(jì)風(fēng)格句喷，從產(chǎn)品的首頁(yè)的功能區(qū)域就很好能區(qū)分出來(lái)，項(xiàng)目的功能區(qū)是核心區(qū)域兔毙，通常占據(jù)屏幕的22%~25%唾琼，該板塊是各類(lèi)子板塊的入口，為子板塊引導(dǎo)流量瞒御，從用戶的視覺(jué)來(lái)講父叙，該位置是黃金區(qū)域神郊，所以業(yè)內(nèi)也有稱(chēng)為“金剛區(qū)”肴裙。

三款產(chǎn)品的用色總體都是鮮艷明亮的，餓了么用2.5D的設(shè)計(jì)涌乳，貼近擬物設(shè)計(jì)蜻懦，增加了細(xì)節(jié)，能影響著用戶的潛意識(shí)夕晓，聯(lián)想到實(shí)際的畫(huà)面宛乃。

大眾點(diǎn)評(píng)的設(shè)計(jì)是后來(lái)新改版的，第一感覺(jué)就是時(shí)尚蒸辆，年輕征炼。當(dāng)時(shí)首頁(yè)剛出來(lái)的時(shí)候，在某網(wǎng)有人說(shuō)過(guò)躬贡，首頁(yè)的設(shè)計(jì)顏色艷麗過(guò)于喧賓奪主谆奥，其實(shí)從首頁(yè)的每塊內(nèi)容區(qū)域去分析，現(xiàn)有的圖片尺寸是750*1334的尺寸拂玻，金剛區(qū)酸些、運(yùn)營(yíng)區(qū)、推薦區(qū)基本平均占有內(nèi)容區(qū)的1/3檐蚜，在大屏幕的情況下魄懂，推薦區(qū)可視內(nèi)容會(huì)變大，并且大眾的用戶使用目的性很強(qiáng)(查看推薦內(nèi)容闯第、搜索店鋪付款等）市栗，所以金剛區(qū)需要新穎的視覺(jué)為其他子功能引流。

美團(tuán)的icon設(shè)計(jì)個(gè)人認(rèn)為是比較普遍的了咳短，設(shè)計(jì)穩(wěn)妥填帽，相對(duì)于其他兩款設(shè)計(jì)，圖標(biāo)記憶和識(shí)別度上相對(duì)較弱诲泌。

對(duì)于從0-1的設(shè)計(jì)過(guò)程盲赊，金剛區(qū)的設(shè)計(jì)可以先使用普遍的設(shè)計(jì)方式，因?yàn)榻饎倕^(qū)一般都是可配置的(icon可換)敷扫，上線后哀蘑，可以再更深入的思考創(chuàng)新诚卸。

· ?規(guī)范

設(shè)計(jì)界面時(shí)，一定要量化設(shè)計(jì)規(guī)范绘迁，了解所承擔(dān)的產(chǎn)品適合哪種設(shè)計(jì)風(fēng)格合溺。在設(shè)計(jì)過(guò)程中，可以利用網(wǎng)格系統(tǒng)科學(xué)的設(shè)計(jì)界面缀台，很多設(shè)計(jì)師都會(huì)忽略網(wǎng)格的使用棠赛，網(wǎng)格系統(tǒng)是設(shè)計(jì)的骨架，將界面中的元素有序的組織膛腐，使整個(gè)頁(yè)面的設(shè)計(jì)更加的規(guī)范睛约、視覺(jué)一致，提高了工作效率哲身。

為了便于組織設(shè)計(jì)組件規(guī)范辩涝，在設(shè)計(jì)過(guò)程中，逐步把字體勘天、圖片怔揩、icon等顏色尺寸，內(nèi)容之間的距離脯丝，列表的高度等設(shè)計(jì)樣式單獨(dú)列出來(lái)商膊，如果一開(kāi)始就制作規(guī)范，后續(xù)的頁(yè)面很容易無(wú)法沿用宠进。設(shè)計(jì)圖可以用1@的圖設(shè)計(jì)(375*667)晕拆，導(dǎo)出的圖標(biāo)是2@、3@砰苍，當(dāng)然也可以使用2@圖設(shè)計(jì)潦匈，這個(gè)看設(shè)計(jì)師的習(xí)慣和團(tuán)隊(duì)的設(shè)計(jì)規(guī)則。

制定規(guī)范不僅是讓設(shè)計(jì)師使用赚导，它更大的作用是方便整個(gè)設(shè)計(jì)團(tuán)隊(duì)和開(kāi)發(fā)團(tuán)隊(duì)之間的溝通茬缩，協(xié)助開(kāi)發(fā)人員撰寫(xiě)統(tǒng)一的組件庫(kù)，未來(lái)開(kāi)發(fā)的時(shí)候能夠直接調(diào)用『鹁桑現(xiàn)在UI設(shè)計(jì)師設(shè)計(jì)界面的軟件大多都用sketch了凰锡，sketch中的symbol的功能能夠更方便設(shè)計(jì)調(diào)用組件，提高使用的效率圈暗。

symbol參考學(xué)習(xí)文獻(xiàn)--《這樣使用Sketch的Symbol功能掂为，能極大提高你的工作效率！》

安裝步驟：

1员串、將組件都分類(lèi)命名勇哗，間隔的符號(hào)都用“ / ” (如list/...) ，sketch對(duì)其他符號(hào)可能會(huì)無(wú)法識(shí)別

2寸齐、將組件庫(kù)文件放在一個(gè)固定的位置欲诺，桌面或者其他文件夾中抄谐，點(diǎn)擊“Add Library”找到組件庫(kù)文件，千萬(wàn)不要?jiǎng)h除扰法，每一次組件庫(kù)文件更新都需要重新再安裝一次蛹含。

組件參考學(xué)習(xí)文獻(xiàn)--《螞蟻金服設(shè)計(jì)平臺(tái)》??《ant design》

設(shè)計(jì)制定組件之間的距離大小，組成的界面給用戶的感覺(jué)是不一樣的塞颁，距離大浦箱，留白多的界面，給人的感覺(jué)會(huì)很高端簡(jiǎn)潔祠锣，但是整個(gè)頁(yè)面的內(nèi)容展示相對(duì)就會(huì)減少酷窥。

這兩款產(chǎn)品都屬于資訊類(lèi)，資訊類(lèi)設(shè)計(jì)在我們的印象里是一個(gè)頁(yè)面盡可能多展示幾條內(nèi)容锤岸。第一款產(chǎn)品輕芒雜志使用卡片式的設(shè)計(jì)竖幔，卡片內(nèi)的標(biāo)題、內(nèi)容是偷、操作的距離都是比較大的，整個(gè)設(shè)計(jì)風(fēng)格比較高端募逞，除去頂部狀態(tài)和底部導(dǎo)航蛋铆，在1334px寬度里，展示內(nèi)容不滿3條放接。

網(wǎng)易新聞加上頂部狀態(tài)刺啦、導(dǎo)航和底部導(dǎo)航，整個(gè)整個(gè)可視內(nèi)容還能達(dá)到三條半纠脾。網(wǎng)易的多內(nèi)容展示玛瘸，讓用戶感覺(jué)到資訊內(nèi)容豐富，更有閱讀和翻閱的欲望苟蹈。

輕芒的視覺(jué)很有自己的風(fēng)格糊渊，設(shè)計(jì)很小眾，與同類(lèi)產(chǎn)品形成明顯的對(duì)比慧脱，它的設(shè)計(jì)風(fēng)格也是根據(jù)用戶特性去定制的渺绒。輕芒雜志以興趣來(lái)組織內(nèi)容，而你看到的內(nèi)容都是經(jīng)過(guò)有品位的人挑選出來(lái)的菱鸥，所以輕芒的大部分用戶是高端有品位人群宗兼，這類(lèi)人群對(duì)性冷淡風(fēng)格很是care。

我們?cè)谠O(shè)計(jì)的時(shí)候氮采，不能一味的為了好看而好看殷绍，但也不能因?yàn)橛脩艚拥貧饩妥龅暮躭ow，我們應(yīng)該在他們的審美中找到平衡鹊漠，在未來(lái)改版中主到，逐漸的加入更多的美學(xué)元素殖侵，冷不丁的提高著他們的審美。

· ?情感

建議APP內(nèi)的插畫(huà)部分在功能頁(yè)面完成后設(shè)計(jì)镰烧，先提供主要的設(shè)計(jì)流程稿拢军，讓前端人員更早的進(jìn)入開(kāi)發(fā)。

插畫(huà)部分有金剛區(qū)怔鳖、引導(dǎo)頁(yè)茉唉、啟動(dòng)頁(yè)、空白頁(yè)提示结执、底部tab等度陆，啟動(dòng)頁(yè)、引導(dǎo)頁(yè)献幔、空白頁(yè)提示則是能加入更多情感元素設(shè)計(jì)的頁(yè)面懂傀。有很多UI設(shè)計(jì)師的視覺(jué)插畫(huà)能力是不足的，作為設(shè)計(jì)師蜡感，我們的主要職責(zé)是更應(yīng)該重視視覺(jué)層蹬蚁，它不僅是產(chǎn)品設(shè)計(jì)中重要的一部分，也是設(shè)計(jì)師個(gè)人能力的體現(xiàn)郑兴。

1犀斋、啟動(dòng)頁(yè)

啟動(dòng)頁(yè)是APP啟動(dòng)過(guò)程中第一個(gè)見(jiàn)到的頁(yè)面，這是啟動(dòng)過(guò)程中必然存在的一個(gè)頁(yè)面情连，所以需要放一張圖替代啟動(dòng)中的空白叽粹。作為與用戶第一個(gè)照面的內(nèi)容，最好就是宣傳企業(yè)文化却舀，logo和宣傳標(biāo)語(yǔ)虫几，就是給用戶最好的自我介紹。

企鵝FM和咸魚(yú)將吉祥物運(yùn)用到設(shè)計(jì)當(dāng)中挽拔，擬人化的動(dòng)作表情和可愛(ài)的模樣辆脸，使人印象深刻。吉祥物是企業(yè)品牌的化身和象征篱昔，被賦予美好的意義每强，在信息傳播中不僅吸引用戶的目光，也拉近與用戶的距離州刽，更有助于企業(yè)品牌文化的宣傳空执。

百度閱讀則用一盞燈的形象，一句貼心的話穗椅，很是應(yīng)景辨绊；百度閱讀的啟動(dòng)頁(yè)還有其他的場(chǎng)景，每一次啟動(dòng)都讓人眼前一亮匹表，使人內(nèi)心平靜门坷。

2宣鄙、引導(dǎo)頁(yè)

引導(dǎo)頁(yè)的內(nèi)容一般是整個(gè)項(xiàng)目的簡(jiǎn)介或重要功能的描述，頁(yè)數(shù)在3-5張默蚌，用在引導(dǎo)頁(yè)上文案要簡(jiǎn)單易懂冻晤，每頁(yè)的文案都要取其精髓。引導(dǎo)頁(yè)的設(shè)計(jì)樣式是很自由的绸吸，那我們?cè)撊绾渭尤肭楦谢瘍?nèi)容鼻弧？

3、文字

好的文字是能戳人內(nèi)心帶來(lái)情感的锦茁，百度閱讀的文案攘轩，讓我覺(jué)得讀書(shū)是一件文藝舒心，能夠改變生活的事码俩，配合清新的插圖度帮，很有代入感，讓人產(chǎn)生共鳴稿存。

但并不是所有的項(xiàng)目都是這種高大尚走心的產(chǎn)品笨篷，比如金融類(lèi)、教育類(lèi)挠铲、醫(yī)療類(lèi)等冕屯，引導(dǎo)頁(yè)的文字很多會(huì)從用戶痛點(diǎn)出發(fā)，擊中癢點(diǎn)拂苹，告訴用戶你在這里能解決什么問(wèn)題，平臺(tái)能給你帶來(lái)什么痰洒。

文案不是設(shè)計(jì)師提供瓢棒，但是設(shè)計(jì)師也要對(duì)文案有所理解，也需要站在用戶的角度體驗(yàn)文案能否讓你產(chǎn)生共鳴丘喻。在時(shí)間充足的情況下脯宿，可以協(xié)助產(chǎn)品，與團(tuán)隊(duì)一起腦暴泉粉。

4连霉、設(shè)計(jì)

如何設(shè)計(jì)？設(shè)計(jì)什么風(fēng)格嗡靡？這些問(wèn)題就跟設(shè)計(jì)師的個(gè)人經(jīng)驗(yàn)和能力有關(guān)了跺撼。設(shè)計(jì)的元素要與所提供的文案環(huán)境一致，這樣更便于用戶的理解讨彼，即使不用看文字歉井，觀看畫(huà)面就知道所要表達(dá)的內(nèi)容，要讓你的設(shè)計(jì)會(huì)講話哈误。

我們可以從一款金融APP去解析哩至，從第一張引導(dǎo)圖設(shè)計(jì)中躏嚎，有秒鐘、儲(chǔ)蓄罐菩貌、錢(qián)幣卢佣，它告訴我們?cè)谠撈脚_(tái)投資能夠更快的賺錢(qián)。第二張圖有上升的標(biāo)尺箭阶、錢(qián)幣虚茶、保險(xiǎn)柜，它告訴我們?cè)谠撈脚_(tái)投資是安全的尾膊，他們有嚴(yán)謹(jǐn)?shù)陌脖９δ芟蔽！５谌龔垐D，就是暢想生活安逸的畫(huà)面冈敛。圖的含義跟文字的含義也很貼近待笑，很清晰給用戶表達(dá)了想要表達(dá)的意思。

5抓谴、空白頁(yè)

提示是在頁(yè)面沒(méi)有內(nèi)容的情況下暮蹂，所展示的提示內(nèi)容。該頁(yè)可以單純的文字提示(易缺少情感)癌压，也可以插圖配文字仰泻。

空白頁(yè)的插圖風(fēng)格需要保持視覺(jué)一致性，若有吉祥物滩届，建議多使用吉祥物作為插畫(huà)元素集侯，不僅達(dá)到情感化目的，也宣傳了品牌文化帜消。若沒(méi)有吉祥物棠枉，設(shè)計(jì)中則可以加一些人物元素，同樣也能夠達(dá)到目的泡挺。

小結(jié)

底部tab的幾個(gè)主要頁(yè)面設(shè)計(jì)出來(lái)后辈讶，整個(gè)APP的視覺(jué)風(fēng)格就出來(lái)了，圖標(biāo)樣式也是整個(gè)視覺(jué)的影響因素娄猫。從iphone6界面恢復(fù)圓角設(shè)計(jì)以來(lái)贱除，很多APP的設(shè)計(jì)風(fēng)格就開(kāi)始改版成圓角風(fēng)，擁有大量級(jí)用戶的淘寶媳溺，是最快發(fā)現(xiàn)樣式改變的月幌。

當(dāng)然，總會(huì)有些產(chǎn)品是特立獨(dú)行的褂删，百度錢(qián)包就是最好的例子飞醉，直角橫行，它屬于金融類(lèi)產(chǎn)品，使用直角的設(shè)計(jì)樣式缅帘，給用戶嚴(yán)謹(jǐn)轴术、認(rèn)真的感受，這種感受钦无，也應(yīng)該是金融行業(yè)所秉承的態(tài)度和目標(biāo)逗栽。

三、 體驗(yàn)

這一步是輔助思考失暂，當(dāng)然這也是成為優(yōu)秀UI設(shè)計(jì)師的必經(jīng)之路彼宠。我們?cè)诳锤?jìng)品或其他產(chǎn)品時(shí)，建議體驗(yàn)整個(gè)APP流程弟塞，體驗(yàn)每個(gè)界面的視覺(jué)影響凭峡，思考為什么有些元素會(huì)引導(dǎo)你點(diǎn)擊？為什么主要功能模塊要按該種方式排版决记？作為用戶摧冀，你覺(jué)得有哪些不合理的地方？為什么同類(lèi)產(chǎn)品系宫，在業(yè)務(wù)發(fā)展上會(huì)有所不同索昂？...

多面的疑問(wèn)和自行解決的鍛煉，在未來(lái)設(shè)計(jì)想法上會(huì)更專(zhuān)業(yè)扩借，也能更好的描述自己的設(shè)計(jì)想法椒惨。很多剛?cè)腴T(mén)的UI設(shè)計(jì)師不知道該體驗(yàn)?zāi)男┊a(chǎn)品，沒(méi)有方向潮罪，推薦大家康谆，可以在設(shè)計(jì)網(wǎng)站看優(yōu)秀設(shè)計(jì)師的UI類(lèi)分享，對(duì)應(yīng)文章中被舉例的APP嫉到，與優(yōu)秀設(shè)計(jì)師共同思考秉宿。

寫(xiě)在最后

學(xué)習(xí)是日積月累的事情，從0-1是很好的歷程屯碴。在上述的分享中，我是以全站的設(shè)計(jì)思維思考的膊存，全站設(shè)計(jì)師已成為主流导而，深處互聯(lián)網(wǎng)行業(yè)的我們，不能只低頭看到自己的一兩畝小田隔崎，要多研究數(shù)據(jù)和用戶的真實(shí)場(chǎng)景今艺，當(dāng)然也要研究跟自己未來(lái)發(fā)展息息相關(guān)的行業(yè)變化。

從0-1的設(shè)計(jì)爵卒，我也是第一次經(jīng)歷虚缎，設(shè)計(jì)中也有過(guò)很多問(wèn)題，因?yàn)榻?jīng)歷了2.0的設(shè)計(jì)改版，所以結(jié)合兩次經(jīng)歷实牡，得出自己的設(shè)計(jì)思路陌僵。