從零到壹，讓思路更穩妥

摘要： 前言 近期有一位朋友問我“什麼是設計風格？”，在溝通了解之下，原來是他承接了一款全新的移動端專案，不知該從何設計。這位朋友是剛入行的新人，從0-1的設計對他來說是很難把控的，但是對他卻是一次不錯的經歷。 正好我承擔的主要專案是從0-1，今年3月份還經歷了一次2.0設計大改版。這款產...

前言

近期有一位朋友問我“什麼是設計風格？”，在溝通了解之下，原來是他承接了一款全新的移動端專案，不知該從何設計。這位朋友是剛入行的新人，從0-1的設計對他來說是很難把控的，但是對他卻是一次不錯的經歷。

正好我承擔的主要專案是從0-1，今年3月份還經歷了一次2.0設計大改版。這款產品是我獨立設計，基本是全棧負責，所以把整個設計過程的思考總結出來分享出來，一起學習一起共勉。

進入流程

l 瞭解業務

l 設計思考

設計的操作，不僅侷限於介面的內容，在設計的前期準備中，結合前期對業務的瞭解，在現有不足的需求內容裡，可以先進行風暴式設計(前期飛機稿)，有準備的設計，在進入到正式設計後，能夠有備無患，更快的進行調整。設計的前期準備我們可以從3個點入手：

一、顏色

顏色是整個產品的靈魂，是與使用者最直接的溝通物件，恰當的使用顏色，能夠更準確的引導使用者的操作。

在制定顏色的時候，首先考慮的是品牌色，就是產品最主要的代表色。內容色或者其他輔助色，可以在設計中，進行新增或者調整。

·  品牌色

2、無品牌色
品牌色是被賦予意義的，一期制定後，將會被長期沿用，運用到所有與企業相關的衍生內容，未來基本不會有很大跨色系變化，所以在制定品牌色要很慎重。每個顏色代表的意義是不一樣的，有些顏色也是某些行業的代表色，所以品牌色可以根據 行業型別 去制定：

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

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

我在專案中遇到的用色問題和思路：

問題：
品牌logo的代表色來自某戒網比賽提供，品牌調性不規範，無衍生產品，個人對專案瞭解不透徹，根據自我喜好，定下深紅色。
思路：
其實遇到這種型別的問題，應該同時考慮平面方面的知識，顏色是否適合該產品，未來的線下物料是否適合承載物。
我負責的專案目標使用者是卡車司機，為了平臺宣傳，卡車上會貼一些車貼，卡車的顏色有很多，深紅色和藍色是很常見的。但是第一版的專案代表色是深紅色，在同是紅色系的衝突下，則需要調整多種車色同時適用的代表色，所以在專案1-2的設計改版中，我調整了品牌色。

·  內容色

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

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

在根據互動設計稿設計頁面的時候，要理解內容的層級，合理的使用顏色。標題／主要內容／提示文字／icon等用色，都會對使用者產生不同的視覺指引，找了幾家社群的介面設計，可以看到不同內容的顏色深淺都是不一樣的，整個視覺是有層次的，所表達的內容也清晰明瞭， 突出重點，弱化次要內容 。

iMac+MacBookPro11%2C3+OSX+OSX+10.14+build(18A391)&version=12010310&nettype=WIFI&lang=zh_CN&fontScale=100&pass_ticket=J3F%2Bi6owrHNguBvOfy7F9CXpdzxlkL5aKL9gE8ESMEVtPnkz797WGA9gslPVfVce" rel="nofollow,noindex" target="_blank"> 顏色參考學習文獻-- 《 甲方竟敢說你的配色醜！ 我來教你懟回去》

二、 風格

近年來，大量留白的極簡平面風格流行於各大網際網路平臺，我們需要在趨於一致的風格中找到自己的設計風格，可以從這幾個點進行思考：

1、瀏覽競品的設計，有助於區分自己的設計想法，從競品設計中 脫離 。 
2、多看其他產品的介面風格，激發設計 靈感 。
3、運用網格系統，創造合適的視覺樣式， 規範 設計原則。
4、帶入品牌元素，有助於品牌的 宣傳 。
5、加入 情感 化設計，拉近產品與使用者之間的距離。
從0-1的設計任務量是很大的，需要規劃設計節點，可以先從底部tab的幾個主要內容先行設計，在設計中，需要從3個主要視覺層入手：

·  圖示

介面設計中的icon的設計會提高整個介面的視覺和使用者好感度，iocn的風格有剪影圖示、輕擬物圖示、輕質感圖示、文字圖示、疊加圖示、插畫圖示、擬物化圖示。

其中，剪影圖示、輕質感圖示、插畫圖示比較常見，插畫圖示多用於節日型別的宣傳、遊戲類app。擬物化、輕擬物圖示的流行趨勢比較早年了，個人認為輕質感是擬物簡化的樣式。疊加類圖示，實際屬於一種創新類樣式設計，不同顏色、線條、或透明度疊加的視覺樣式。

icon設計的風格最終還是由設計師自己最終決定的，如果在時間充裕的情況下，設計師可以運用常用的圖示樣式結合產品特點設計出2-3版的飛機稿和團隊人員進行討論，圖示的設計風格上要保持統一性原則。

舉例：

三大外賣美食類產品的設計都具備自己的設計風格，從產品的首頁的功能區域就很好能區分出來，專案的功能區是核心區域，通常佔據螢幕的22%~25%，該板塊是各類子板塊的入口，為子板塊引導流量，從使用者的視覺來講，該位置是黃金區域，所以業內也有稱為“金剛區”。

·  規範

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

網格參考學習文獻--《如何利用網格系統科學地打造APP介面》

為了便於組織設計元件規範，在設計過程中，逐步把字型、圖片、icon等顏色尺寸，內容之間的距離，列表的高度等設計樣式單獨列出來，如果一開始就製作規範，後續的頁面很容易無法沿用。設計圖可以用1@的圖設計(375*667)，匯出的圖示是2@、3@，當然也可以使用2@圖設計，這個看設計師的習慣和團隊的設計規則。

制定規範不僅是讓設計師使用，它更大的作用是方便整個設計團隊和開發團隊之間的溝通，協助開發人員撰寫統一的元件庫，未來開發的時候能夠直接呼叫。現在UI設計師設計介面的軟體大多都用sketch了，sketch中的symbol的功能能夠更方便設計呼叫元件，提高使用的效率。

symbol參考學習文獻--《這樣使用Sketch的Symbol功能，能極大提高你的工作效率！》

安裝步驟：

1、將元件都分類命名，間隔的符號都用“ / ” (如list/...) ，sketch對其他符號可能會無法識別。

2、將元件庫檔案放在一個固定的位置，桌面或者其他資料夾中，點選“Add Library”找到元件庫檔案，千萬不要刪除，每一次元件庫檔案更新都需要重新再安裝一次。

元件參考學習文獻-- 《螞蟻金服設計平臺》 《ant design》

設計制定元件之間的距離大小，組成的介面給使用者的感覺是不一樣的，距離大，留白多的介面，給人的感覺會很高階簡潔，但是整個頁面的內容展示相對就會減少。

這兩款產品都屬於資訊類，資訊類設計在我們的印象裡是一個頁面儘可能多展示幾條內容。第一款產品輕芒雜誌使用卡片式的設計，卡片內的標題、內容、操作的距離都是比較大的，整個設計風格比較高階，除去頂部狀態和底部導航，在1334px寬度裡，展示內容不滿3條。

網易新聞加上頂部狀態、導航和底部導航，整個整個可視內容還能達到三條半。網易的多內容展示，讓使用者感覺到資訊內容豐富，更有閱讀和翻閱的慾望。

輕芒的視覺很有自己的風格，設計很小眾，與同類產品形成明顯的對比，它的設計風格也是根據使用者特性去定製的。輕芒雜誌以興趣來組織內容，而你看到的內容都是經過有品位的人挑選出來的，所以輕芒的大部分使用者是高階有品位人群，這類人群對性冷淡風格很是care。

我們在設計的時候，不能一味的為了好看而好看，但也不能因為使用者接地氣就做的很low，我們應該在他們的審美中找到平衡，在未來改版中，逐漸的加入更多的美學元素，冷不丁的提高著他們的審美。

·  情感

建議APP內的插畫部分在功能頁面完成後設計，先提供主要的設計流程稿，讓前端人員更早的進入開發。
插畫部分有金剛區、引導頁、啟動頁、空白頁提示、底部tab等，啟動頁、引導頁、空白頁提示則是能加入更多情感元素設計的頁面。有很多UI設計師的視覺插畫能力是不足的，作為設計師，我們的主要職責是更應該重視視覺層，它不僅是產品設計中重要的一部分，也是設計師個人能力的體現。
1、啟動頁

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

企鵝FM和鹹魚將吉祥物運用到設計當中，擬人化的動作表情和可愛的模樣，使人印象深刻。吉祥物是企業品牌的化身和象徵，被賦予美好的意義，在資訊傳播中不僅吸引使用者的目光，也拉近與使用者的距離，更有助於企業品牌文化的宣傳。

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

2、引導頁

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

文字

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

但並不是所有的專案都是這種高大尚走心的產品，比如金融類、教育類、醫療類等，引導頁的文字很多會從使用者痛點出發，擊中癢點，告訴使用者你在這裡能解決什麼問題，平臺能給你帶來什麼。
文案不是設計師提供，但是設計師也要對文案有所理解，也需要站在使用者的角度體驗文案能否讓你產生共鳴。在時間充足的情況下，可以協助產品，與團隊一起腦暴。

設計

如何設計？設計什麼風格？這些問題就跟設計師的個人經驗和能力有關了。設計的元素要與所提供的文案環境一致，這樣更便於使用者的理解，即使不用看文字，觀看畫面就知道所要表達的內容，要讓你的設計會講話。 
我們可以從一款金融APP去解析，從第一張引導圖設計中，有秒鐘、儲蓄罐、錢幣，它告訴我們在該平臺投資能夠更快的賺錢。第二張圖有上升的標尺、錢幣、保險櫃，它告訴我們在該平臺投資是安全的，他們有嚴謹的安保功能。第三張圖，就是暢想生活安逸的畫面。圖的含義跟文字的含義也很貼近，很清晰給使用者表達了想要表達的意思。

3、空白頁

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

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

小結

底部tab的幾個主要頁面設計出來後，整個APP的視覺風格就出來了，圖示樣式也是整個視覺的影響因素。從iphone6介面恢復圓角設計以來，很多APP的設計風格就開始改版成圓角風，擁有大量級使用者的淘寶，是最快發現樣式改變的。

當然，總會有些產品是特立獨行的，百度錢包就是最好的例子，直角橫行，它屬於金融類產品，使用直角的設計樣式，給使用者嚴謹、認真的感受，這種感受，也應該是金融行業所秉承的態度和目標。

三、 體驗

很多剛入門的UI設計師不知道該體驗哪些產品，沒有方向，推薦大家，可以在設計網站看優秀設計師的UI類分享，對應文章中被舉例的APP，與優秀設計師共同思考。

總結

學習是日積月累的事情，從0-1是很好的歷程。在上述的分享中，我是以全站的設計思維思考的，全站設計師已成為主流，深處網際網路行業的我們，不能只低頭看到自己的一兩畝小田，要多研究資料和使用者的真實場景，當然也要研究跟自己未來發展息息相關的行業變化。

從0-1的設計，我也是第一次經歷，設計中也有過很多問題，因為經歷了2.0的設計改版，所以結合兩次經歷，得出自己的設計思路。

第一次寫那麼長的文章，會有很多不足，希望我的分享能夠對大家有所幫助:heart:

。

。

。