近期有一位朋友問我「什么是設(shè)計風格？」在溝通后了解到，原來是他承接了一款全新的移動端項目，不知該從何設(shè)計。這位朋友是剛?cè)胄械男氯?，從零到一的設(shè)計對他來說是很難把控的，但卻是一次不錯的經(jīng)歷。

正好我承擔的主要項目是從零到一，今年3月份還經(jīng)歷了一次2.0設(shè)計大改版。這款產(chǎn)品是我獨立設(shè)計，基本是全棧負責，所以把整個設(shè)計過程的思考總結(jié)分享出來，一起學習一起共勉。

了解業(yè)務(wù)

在設(shè)計之前，一定要給自己爭取時間進行設(shè)計準備工作，而不是一拿到交互就上手設(shè)計，無思考的設(shè)計是沒有靈魂的。

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

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

如果你的項目有競品，那這個資源真的是得天獨厚，它能夠讓你迅速了解產(chǎn)品的商業(yè)規(guī)劃。當然，最好對競品進行分析，不光從設(shè)計，也要從它的體驗和頁面之間的跳轉(zhuǎn)進行思考。這些過程的積累，能夠幫助你更好的了解交互的內(nèi)容，在交互中發(fā)現(xiàn)問題，提出自己的觀點。（這里不是說讓你去找交互的茬，而是在設(shè)計過程中，你能夠?qū)换サ脑O(shè)計有疑問，多與交互進行討論，這樣能夠擴展設(shè)計思維，聯(lián)想更多的用戶使用場景）。

設(shè)計思考

設(shè)計的操作，不僅局限于界面的內(nèi)容，在設(shè)計的前期準備中，結(jié)合前期對業(yè)務(wù)的了解，在現(xiàn)有不足的需求內(nèi)容里，可以先進行風暴式設(shè)計（前期飛機稿），有準備的設(shè)計，在進入到正式設(shè)計后，能夠有備無患，更快的進行調(diào)整。設(shè)計的前期準備我們可以從3個點入手：

顏色

顏色是整個產(chǎn)品的靈魂，是與用戶最直接的溝通對象，恰當?shù)氖褂妙伾?，能夠更準確的引導用戶的操作。

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

1. 品牌色

有品牌色

已有品牌色，是可以直接運用到設(shè)計中，除了原有的品牌色，還可以根據(jù)頁面的整體視覺需求，制定合適的輔助色，輔助色一般是用于區(qū)分不同標簽、icon、內(nèi)容等。

無品牌色

品牌色是被賦予意義的，一旦制定后，將會被長期沿用，運用到所有與企業(yè)相關(guān)的衍生內(nèi)容，未來基本不會有很大跨色系變化，所以在制定品牌色時要很慎重。每個顏色代表的意義是不一樣的，有些顏色也是某些行業(yè)的代表色，所以品牌色可以根據(jù)行業(yè)類型去制定。

也可以根據(jù)用戶類型制定品牌色，OFO小黃車就是典型的例子，打造年輕陽光時尚的騎行平臺，而黃色就是給人輕快，充滿希望和活力的感覺。

還可以根據(jù)平臺想給用戶帶去什么樣的感覺制定，這種方式最好是能夠有很多用戶進行體驗驗證，因為顏色是最直接的視覺體驗傳達，所以這種方式制定，要更為嚴謹。

我在項目中遇到的用色問題和思路：

• 問題：品牌Logo 的代表色來自某戒網(wǎng)比賽提供，品牌調(diào)性不規(guī)范，無衍生產(chǎn)品，個人對項目了解不透徹，根據(jù)自我喜好，定下深紅色。
• 思路：其實遇到這種類型的問題，應(yīng)該同時考慮平面方面的知識，顏色是否適合該產(chǎn)品，未來的線下物料是否適合承載物。

我負責的項目目標用戶是卡車司機，為了平臺宣傳，卡車上會貼一些車貼，卡車的顏色有很多，深紅色和藍色是很常見的。但是第一版的項目代表色是深紅色，在同是紅色系的沖突下，則需要調(diào)整多種車色同時適用的代表色，所以在項目1-2的設(shè)計改版中，我調(diào)整了品牌色。

有人會有疑問，為什么定個品牌色還需要考慮線下使用場景？前蘋果設(shè)計總監(jiān)曾舉過一個列子：當初他在黑莓任職，需要開始創(chuàng)建一個新的手機操作系統(tǒng)，從他們最開始的第一天就把工業(yè)設(shè)計、包裝設(shè)計、用戶界面以及市場等全部的核心整合在一起，來創(chuàng)造一套全新的用戶體驗。這是一個很好的例子，要永遠將設(shè)計看作企業(yè)品牌的一部分。

我們在著手界面設(shè)計的時候，需要考慮你所能想到一切的使用場景，顏色是影響用戶的第一元素，形成的產(chǎn)品形象是一直影響品牌形象的，所以在制定代表色時一定要考慮的更全面。

2. 內(nèi)容色

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

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

在根據(jù)交互設(shè)計稿設(shè)計頁面的時候，要理解內(nèi)容的層級，合理的使用顏色。標題、主要內(nèi)容、提示文字、icon等用色，都會對用戶產(chǎn)生不同的視覺指引，找了幾家社區(qū)的界面設(shè)計，可以看到不同內(nèi)容的顏色深淺都是不一樣的，整個視覺是有層次的，所表達的內(nèi)容也清晰明了，突出重點，弱化次要內(nèi)容。

風格

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

• 瀏覽競品的設(shè)計，有助于區(qū)分自己的設(shè)計想法，從競品設(shè)計中脫離。
• 多看其他產(chǎn)品的界面風格，激發(fā)設(shè)計靈感。
• 運用網(wǎng)格系統(tǒng)，創(chuàng)造合適的視覺樣式，規(guī)范設(shè)計原則。
• 帶入品牌元素，有助于品牌的宣傳。
• 加入情感化設(shè)計，拉近產(chǎn)品與用戶之間的距離。

從零到一的設(shè)計任務(wù)量是很大的，需要規(guī)劃設(shè)計節(jié)點，可以先從底部tab 的幾個主要內(nèi)容先行設(shè)計，在設(shè)計中，需要從3個主要視覺層入手：

1. 圖標

界面設(shè)計中的 icon設(shè)計會提高整個界面的視覺和用戶好感度，icon 的風格有剪影圖標、輕擬物圖標、輕質(zhì)感圖標、文字圖標、疊加圖標、插畫圖標和擬物化圖標。

其中，剪影圖標、輕質(zhì)感圖標、插畫圖標比較常見，插畫圖標多用于節(jié)日類型的宣傳，游戲類app。擬物化、輕擬物圖標的流行趨勢比較早年了，個人認為輕質(zhì)感是擬物簡化的樣式。疊加類圖標，實際屬于一種創(chuàng)新類樣式設(shè)計，不同顏色、線條、或透明度疊加的視覺樣式。

icon設(shè)計的風格最終還是由設(shè)計師自己來決定，在時間充裕的情況下，設(shè)計師可以運用常用的圖標樣式結(jié)合產(chǎn)品特點設(shè)計出2~3版的飛機稿和團隊人員進行討論，圖標的設(shè)計風格上要保持統(tǒng)一性原則。

舉例：三大外賣美食類產(chǎn)品的設(shè)計都具備自己的設(shè)計風格，從產(chǎn)品首頁的功能區(qū)域就能區(qū)分出來，項目的功能區(qū)是核心區(qū)域，通常占據(jù)屏幕的22%~25%，該板塊是各類子板塊的入口，為子板塊引導流量，從用戶的視覺來講，該位置是黃金區(qū)域，所以業(yè)內(nèi)也有稱為「金剛區(qū)」。

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

大眾點評的設(shè)計是后來新改版的，第一感覺就是時尚，年輕。首頁剛出來的時候，有人說過，首頁的設(shè)計顏色艷麗過于喧賓奪主，其實從首頁的每塊內(nèi)容區(qū)域去分析，現(xiàn)有的圖片尺寸是750*1334的尺寸，金剛區(qū)、運營區(qū)、推薦區(qū)基本平均占有內(nèi)容區(qū)的1/3，在大屏幕的情況下，推薦區(qū)可視內(nèi)容會變大，并且大眾的用戶使用目的性很強（查看推薦內(nèi)容、搜索店鋪付款等），所以金剛區(qū)需要新穎的視覺為其他子功能引流。

美團的 icon設(shè)計個人認為是比較普遍的，設(shè)計穩(wěn)妥，相對于其他兩款設(shè)計，圖標記憶和識別度上相對較弱。

對于從零到一的設(shè)計過程，金剛區(qū)的設(shè)計可以先使用普遍的設(shè)計方式，因為金剛區(qū)一般都是可配置的（ icon可換），上線后，可以再更深入的思考創(chuàng)新。

2. 規(guī)范

設(shè)計界面時，一定要量化設(shè)計規(guī)范，了解所承擔的產(chǎn)品適合哪種設(shè)計風格。在設(shè)計過程中，可以利用網(wǎng)格系統(tǒng)科學的設(shè)計界面，很多設(shè)計師都會忽略網(wǎng)格的使用，網(wǎng)格系統(tǒng)是設(shè)計的骨架，將界面中的元素有序的組織，使整個頁面的設(shè)計更加的規(guī)范、視覺一致，提高了工作效率。

為了便于組織設(shè)計組件規(guī)范，在設(shè)計過程中，逐步把字體、圖片、icon等顏色尺寸，內(nèi)容之間的距離，列表的高度等設(shè)計樣式單獨列出來，如果一開始就制作規(guī)范，后續(xù)的頁面很容易無法沿用。設(shè)計圖可以用1@的圖設(shè)計（375*667），導出的圖標是2@、3@，當然也可以使用2@圖設(shè)計，這個看設(shè)計師的習慣和團隊的設(shè)計規(guī)則。

制定規(guī)范不僅是讓設(shè)計師使用，它更大的作用是方便整個設(shè)計團隊和開發(fā)團隊之間的溝通，協(xié)助開發(fā)人員撰寫統(tǒng)一的組件庫，未來開發(fā)的時候能夠直接調(diào)用?，F(xiàn)在 UI設(shè)計師設(shè)計界面的軟件大多都用 sketch了，sketch 中的 symbol 的功能能夠更方便設(shè)計調(diào)用組件，提高使用的效率。

安裝步驟：

將組件都分類命名，間隔的符號都用「 / 」（如 list/…），sketch 對其他符號可能會無法識別。

將組件庫文件放在一個固定的位置，桌面或者其他文件夾中，點擊「Add Library」找到組件庫文件，千萬不要刪除，每一次組件庫文件更新都需要重新再安裝一次。

設(shè)計制定組件之間的距離大小，組成的界面給用戶的感覺是不一樣的，距離大，留白多的界面，給人的感覺會很高端簡潔，但是整個頁面的內(nèi)容展示相對就會減少。

這兩款產(chǎn)品都屬于資訊類，資訊類設(shè)計在我們的印象里是一個頁面盡可能多展示幾條內(nèi)容。第一款產(chǎn)品輕芒雜志使用卡片式的設(shè)計，卡片內(nèi)的標題、內(nèi)容、操作的距離都是比較大的，整個設(shè)計風格比較高端，除去頂部狀態(tài)和底部導航，在1334px寬度里，展示內(nèi)容不滿3條。

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

輕芒的視覺很有自己的風格，設(shè)計很小眾，與同類產(chǎn)品形成明顯的對比，它的設(shè)計風格也是根據(jù)用戶特性去定制的。輕芒雜志以興趣來組織內(nèi)容，而你看到的內(nèi)容都是經(jīng)過有品位的人挑選出來的，所以輕芒的大部分用戶是高端有品位人群，這類人群對性冷淡風格很是喜愛。

我們在設(shè)計的時候，不能一味的為了好看而好看，但也不能因為用戶接地氣就做的很低端，我們應(yīng)該在他們的審美中找到平衡，在未來改版中，逐漸的加入更多的美學元素，提高他們的審美。

3. 情感

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

插畫部分有金剛區(qū)、引導頁、啟動頁、空白頁提示、底部tab等，啟動頁、引導頁、空白頁提示則是能加入更多情感元素設(shè)計的頁面。有很多 UI設(shè)計師的視覺插畫能力是不足的，作為設(shè)計師，我們的主要職責是更應(yīng)該重視視覺層，它不僅是產(chǎn)品設(shè)計中重要的一部分，也是設(shè)計師個人能力的體現(xiàn)。

啟動頁

啟動頁是 APP 啟動過程中第一個見到的頁面，這是啟動過程中必然存在的一個頁面，所以需要放一張圖替代啟動中的空白。作為與用戶第一個照面的內(nèi)容，最好就是宣傳企業(yè)文化，logo和宣傳標語，就是給用戶最好的自我介紹。

企鵝FM和閑魚將吉祥物運用到設(shè)計當中，擬人化的動作表情和可愛的模樣，使人印象深刻。吉祥物是企業(yè)品牌的化身和象征，被賦予美好的意義，在信息傳播中不僅吸引用戶的目光，也拉近與用戶的距離，更有助于企業(yè)品牌文化的宣傳。

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

引導頁

引導頁的內(nèi)容一般是整個項目的簡介或重要功能的描述，頁數(shù)在3-5張，引導頁上的文案要簡單易懂，每頁的文案都要取其精髓。引導頁的設(shè)計樣式是很自由的，那我們該如何加入情感化內(nèi)容？

文字：好的文字是能戳人內(nèi)心帶來情感的，百度閱讀的文案，讓我覺得讀書是一件文藝舒心，能夠改變生活的事，配合清新的插圖，很有代入感，讓人產(chǎn)生共鳴。

但并不是所有的項目都是這種高大上走心的產(chǎn)品，比如金融類、教育類、醫(yī)療類等，引導頁的文字很多會從用戶痛點出發(fā)，擊中癢點，告訴用戶你在這里能解決什么問題，平臺能給你帶來什么。

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

設(shè)計：如何設(shè)計？設(shè)計什么風格？這些問題就跟設(shè)計師的個人經(jīng)驗和能力有關(guān)了。設(shè)計的元素要與所提供的文案環(huán)境一致，這樣更便于用戶的理解，即使不用看文字，觀看畫面就知道所要表達的內(nèi)容，要讓你的設(shè)計會說話。

我們可以從一款金融APP 去解析，從第一張引導圖設(shè)計中，有秒鐘、儲蓄罐、錢幣，它告訴我們在該平臺投資能夠更快的賺錢。第二張圖有上升的標尺、錢幣、保險柜，它告訴我們在該平臺投資是安全的，他們有嚴謹?shù)陌脖９δ?。第三張圖，就是暢想生活安逸的畫面。圖的含義跟文字的含義也很貼近，很清晰給用戶表達了想要表達的意思。

空白頁

提示是在頁面沒有內(nèi)容的情況下，所展示的提示內(nèi)容。該頁可以單純的文字提示（易缺少情感），也可以插圖配文字。

空白頁的插圖風格需要保持視覺一致性，若有吉祥物，建議多使用吉祥物作為插畫元素，不僅達到情感化目的，也宣傳了品牌文化。若沒有吉祥物，設(shè)計中則可以加一些人物元素，同樣也能夠達到目的。

小結(jié)

底部tab 的幾個主要頁面設(shè)計出來后，整個 APP 的視覺風格就出來了，圖標樣式也是整個視覺的影響因素。從 iphone6 界面恢復圓角設(shè)計以來，很多 APP 的設(shè)計風格就開始改版成圓角風，擁有大量級用戶的淘寶，是最快發(fā)現(xiàn)樣式改變的。

當然，總會有些產(chǎn)品是特立獨行的，百度錢包就是最好的例子，直角橫行，它屬于金融類產(chǎn)品，使用直角的設(shè)計樣式，給用戶嚴謹、認真的感受，這種感受，也應(yīng)該是金融行業(yè)所秉承的態(tài)度和目標。

體驗

這一步是輔助思考，當然這也是成為優(yōu)秀 UI設(shè)計師的必經(jīng)之路。

我們在看競品或其他產(chǎn)品時，建議體驗整個 APP 流程，體驗每個界面的視覺影響，思考為什么有些元素會引導你點擊？為什么主要功能模塊要按該種方式排版？作為用戶，你覺得有哪些不合理的地方？為什么同類產(chǎn)品，在業(yè)務(wù)發(fā)展上會有所不同？等等。

多面的疑問和自行解決的鍛煉，在未來設(shè)計想法上會更專業(yè)，也能更好的描述自己的設(shè)計想法。

很多剛?cè)腴T的 UI設(shè)計師不知道該體驗哪些產(chǎn)品，沒有方向，推薦大家，可以在設(shè)計網(wǎng)站看優(yōu)秀設(shè)計師的 UI 類分享，對應(yīng)文章中被舉例的 APP，與優(yōu)秀設(shè)計師共同思考。

總結(jié)

學習是日積月累的事情，從0-1是很好的歷程。在上述的分享中，我是以全棧的設(shè)計思維思考的，全棧設(shè)計師已成為主流，深處互聯(lián)網(wǎng)行業(yè)的我們，不能只低頭看到自己的一畝三分地，要多研究數(shù)據(jù)和用戶的真實場景，當然也要研究跟自己未來發(fā)展息息相關(guān)的行業(yè)變化。

從零到一的設(shè)計，我也是第一次經(jīng)歷，設(shè)計中也有過很多問題，因為經(jīng)歷了2.0的設(shè)計改版，所以結(jié)合兩次經(jīng)歷，得出自己的設(shè)計思路。希望對大家有所幫助。

原文公眾號「小阿田的設(shè)計筆記」