大家好，我不是設(shè)計師，我是設(shè)計師中的卡卡西，我既不是名牌大學(xué)設(shè)計系畢業(yè)也不是美院科班出身，我就是一名高級美工，在互聯(lián)網(wǎng)設(shè)計行業(yè)做著搬運工的工作。

 

好，廢話不多說了，時間不多，大家趕緊上車，我要開車了，咱們進入正題，本次我向大家分享的內(nèi)容是官網(wǎng)的設(shè)計過程和經(jīng)驗。這次分享的內(nèi)容呢主要是讓大家了解一下大家看到的效果圖我們設(shè)計人員是如何制作出來的（并不是簡單的PS一下就可以的，如果如此簡單豈不是人人都說設(shè)計師），順帶給UI同學(xué)分享一下我曾跳過的坑。

 

設(shè)計官網(wǎng)的過程主要分為以下幾個階段。

 

1.了解產(chǎn)品

2.著手準備工作

3.開始設(shè)計（規(guī)范）

4.要點總結(jié)

 

第一步了解產(chǎn)品：

 

我們從以下三點去了解，一產(chǎn)品行業(yè)、產(chǎn)品特點，產(chǎn)品目標用戶群體，像小白一樣的去體驗產(chǎn)品。我是這么做的，更直接的辦法就是纏著你們的產(chǎn)品經(jīng)理問，什么業(yè)務(wù)流程啊之類的我覺得沒必要了解的那么透徹（畢竟不能搶產(chǎn)品經(jīng)理的飯碗--認真臉），你只需要從產(chǎn)品經(jīng)理的口中得知你們產(chǎn)品的特點，目標用戶就可以了，剩下的就是自己再去了解一下產(chǎn)品。

 

第二步著手準備工作：

 

在簡單了解了產(chǎn)品后，我們就可以著手準備工作了，準備工作我分為兩個部分：

 

一個是畫原型；

一個是師夷長技以制夷、拿來主義；

 

畫原型呢是為了確定頁面元素及大致展現(xiàn)形式，減少返工，快速完工。

 

好，原型有了，我們進行下一步，清朝的大思想家魏源魏大人曾經(jīng)說過一句話：“師夷長技以制夷”，用在這里就是競品分析，我看了一下其他同行的官網(wǎng)首頁，最后用兩個字總結(jié)“呵呵”，都長得不怎么樣，所以我就放棄了，魏大人不靈了，沒關(guān)系，我們還有周先生，周樹人先生寫過一篇文章叫《拿來主義》，這篇文章中有一句話說的很好，一切好的東西都是人類的共同財富，但要有選擇的拿，為我所用的拿，不卑不亢的拿。用在設(shè)計上極為貼切。這時候我就去花瓣找靈感，去搜一些覺得用的著的頁面保存下來，在搜集參考素材的時候呢，我們要帶著問題找答案，什么意思呢，就是說，在經(jīng)過了解產(chǎn)品和出原型后，腦子里有個大體的概念，布局怎么布，風格怎么樣的，根據(jù)這些去有針對性的收集一些素材。但是用的時候不能全部照搬，就跟我們上學(xué)考試的時候有很多同學(xué)抄卷子直接連名字都抄了，這樣就很尷尬了。得有所改變，當然不是為了改變而改變，是為了符合我們的整體風格而改變，如果風格很搭那完全可以不去做改動，直接拿來主義。

 

第三步開始設(shè)計：

 

原型有了，準備工作也已經(jīng)就緒了，我們就開始干吧！開始做的時候我們要注意以下三點

 

風格定位；

統(tǒng)一的用戶體驗；

盯緊前端。

 

第一風格定位，我們在設(shè)計的時候要根據(jù)行業(yè)特性去定位風格，包括布局排版風格，圖標元素風格，字體風格等。舉個例子，比如說我之前在支持手機銀行的工作，做的全是銀行的項目，銀行給人的感覺是什么，第一要安全，第二要嚴肅，那么我們這時候為銀行做設(shè)計的時候就不能用一些可愛卡通之類的圖標，提示語也要嚴肅不能用類似“親，您還沒設(shè)置密碼哦！”這樣的預(yù)期，這種讓用戶看起來就沒有安全感，一般人不會往這種銀行里存錢的。

根據(jù)產(chǎn)品行業(yè)定風格，風格定位不對的話那感覺就是喝咖啡放了蔥花。

 

總之一句話，什么產(chǎn)品套什么殼，喝咖啡不能放蔥花，香菜更不行。

 

說完風格的事，我們來說說現(xiàn)在人們張口閉口的用戶體驗，生活中用戶體驗無處不在，不只是在互聯(lián)網(wǎng)行業(yè)，任何地方都存在用戶體驗，有一次我去星光大道那邊的那個優(yōu)衣庫買衣服（不要污），我看上了一件衣服，然后拿去試衣間準備試一下，然后排了半天隊終于到我了，試衣間門口的工作人員跟我說不好意思先生，這件衣服不能試的，我說為什么，他說這是淺色的，我說不能試為什么不在放衣服的地方放個牌子告訴顧客不能試呢，等我拿過來排了半天的隊你才告訴我不能試？當時我瞬間就失去了買這件衣服的興趣了。

 

這個事情充分體現(xiàn)了用戶體驗的重要性，做的東西不好自然就會有用戶流失，所以說在官網(wǎng)設(shè)計的過程中，一定要高度保持界面的統(tǒng)一性，統(tǒng)一的布局方式，統(tǒng)一的顏色、統(tǒng)一的圖標風格、統(tǒng)一的字體，統(tǒng)一的按鈕規(guī)范、圖片規(guī)范、列表規(guī)范、控件規(guī)范、彈出浮層等等。千萬別讓用戶點擊頁面跳轉(zhuǎn)的時候產(chǎn)生了我這是在哪兒的感覺。

 

最后咱們說說幫我們把效果圖轉(zhuǎn)換成代碼的這一環(huán)節(jié)，效果圖出來后千萬別放松警惕，因為前面還有坑等著你，我之前公司有個同事就是被前端坑了，有一次開會老總點名批評，當然不是點人名，點的是我那個同事做的一個項目的名字，當眾批評設(shè)計做的不好，當時我那個同事那臉唰一下就紅了，因為當時我們都是做自己負責的項目，彼此也沒什么交集，我也并不知道他設(shè)計的效果圖怎么樣，后來我偶然一次看到了當初沒轉(zhuǎn)化成代碼的效果圖，我發(fā)現(xiàn)并不是很爛啊，該符合規(guī)范的地方都很規(guī)范，包括配色、布局等，敗就敗在給他切圖的那個前端身上。（前端同學(xué)別對好入座，只是特指并不是泛指）

 

第四要點總結(jié)：

 

1.設(shè)計之后咱們說一下脫坑注意事項，做設(shè)計千萬別一口氣做完再去確認，這個一般設(shè)計的老油子都知道，出個首頁確認整體風格在大刀闊斧的擼袖子干。別做無用功。

 

2.最好的細節(jié)就是沒有細節(jié)。能簡則簡，別逮著什么東西都往頁面上放，物極必反，東西多了問題自然就多。

 

3.在不違背自己的設(shè)計理念的情況下搞定客戶（領(lǐng)導(dǎo)）才是王道，我想大多數(shù)設(shè)計人員都經(jīng)歷過效果圖一出來，參加評審的人坐滿了整個會議室，各種意見，各種問題，但是記住，再好的東西也有槽點也有人去吐槽，不可能讓所有人都喜歡你的設(shè)計，讓重要的人，主要的人，大部分的人喜歡就可以了。當然如果有好的建議的話還是要聽取的。并不一概而論。

 

4.不該背的鍋的設(shè)計人員不背，設(shè)計圖出來后第一時間召集領(lǐng)導(dǎo)（客戶）及前端進行評審，第一是看有些設(shè)計效果前端能不能實現(xiàn)等一些問題，第二是告訴領(lǐng)導(dǎo)（客戶），你設(shè)計圖出來是這樣的效果，經(jīng)過前端加工后什么效果那就不是你的問題了。這并不是推卸責任，這是明確責任。

 

最后一點，我個人認為很重要的一點，PSD文件也要規(guī)范，不要做出來的東西很漂亮，PSD文件一片亂七八糟各種圖層不命名也不分組。

 

作為一個項目文件一個復(fù)雜的PSD源文件里可能存在200-300個圖層，作為最直面客戶和老板的開發(fā)環(huán)節(jié)，以及存在對視覺表現(xiàn)的個體認同差異，你可能會遭遇最多的需求變動、修改建議，需求反復(fù)……。

 

作為開發(fā)協(xié)作中的一員，你的源文件會被其他設(shè)計師或開發(fā)者使用或修改。

 

作為開發(fā)文檔中的一部分，你的源文件會面臨移交、繼承和重用。圖層命名無法辨識，幾百個圖層沒有分組、元件難以修改、被調(diào)用的原始素材被處理地面目全非，修改版本無法回溯、設(shè)計樣式無法復(fù)用，同組的psd文件風格或布局無法統(tǒng)一……如果你正在修改這樣一份psd源文件，會不會抓狂?

 

作為一個UI設(shè)計師，建立文檔管理和文檔規(guī)范意識，不僅能便于團隊協(xié)助和工程文件的移交，更重要的是能快速顯著地提升自己的工作效率。

 

其實UI設(shè)計過程展開來講的話還有很多內(nèi)容的，我今天主要是給大家簡單的分享一下我個人的設(shè)計過程，希望我今天的分享能讓大家對我們UI設(shè)計師的工作過程有個大致的了解。