如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

1. 以白色和淺色為主的配色方案

雖然以白色和淺色為主的配色方案似乎哪里都有，但是在最近，這種趨勢體現的非常的明顯。

色彩的運用一直都是諸多設計趨勢當中，最為醒目的組成部分。這種以白色和淺色為主的色彩美學，似乎在和之前所流行的高飽和度霓虹色的流行做對抗，柔和的灰色，相對清冷的色調，甚至是顯得沒有足夠溫度的粉色，這些色彩都在力圖淡化之前配色方案中濃稠的情感和激蕩的氛圍。

Verho

以白色和淺色為主的配色方案，相對而言是沒有那么醒目的，設計師在采用這種配色方案的時候，常常會結合其他的元素，來豐富整個設計的視覺感，這樣就避免了出現「過于普通」的視覺感受。這種配色設計還包括了使用片拍的圖片素材，就像 Verho 這個網站。

Omega Yeast

Alexandra Elise

不過圖片和色塊并不是唯一的實現這種配色的方案，采用視頻或者插畫元素同樣可以做到，比如 Omega Yeast 和 Alexandra Elise 這兩個網站，它們同樣足夠吸引人。

這一設計趨勢可以搭配風格相對清爽、情緒比較清淺的網站主題，在炎熱的夏季顯得尤為有感覺。頁面中的文本內容只需要采用相對較深色彩的字體，即可確保良好的可讀性。

在按鈕和為數不多最為重要的元素上，可以采用明亮的色彩，以示強調，整體風格則可以保持極簡。

如果你喜歡極簡主義的設計，并且打算運用這一趨勢，這篇文章別錯過了：

2. 數據可視化

數據可視化將數據的直觀性提到了一個全新的層次，它使得跨行業的數據展示和信息呈現變得更加有價值，也更加可靠，而大規模的可視化的數據呈現并不是奇怪的事情。

不過也正是因為數據可視化讓數據變得更加親民，設計師開始更多地將圖表和數據加入到日常的設計當中來，結合交互式動畫，讓數據在整個網頁設計當中，開始發揮更多的作用。借助可視化的設計，數據信息更輕松地為用戶所理解，整體設計也開始顯得更加富有吸引力。

而這種設計趨勢需要設計師花費更多的精力來處理數據，盡量多借助現成的數據可視化的工具來進行設計。

在網頁設計當中，將數據以可視化的方式嵌入進去有很多不同的方式，而這一趨勢最吸引人的地方也是交互式的動態信息展現。

Tree Tree Tree

Tree Tree Tree 這個網站就很好的利用了數據可視化來展示天氣，當你輸入你感興趣的地方的時候，它會使用可視化的樹木來呈現當地風力大小。此外，你還能和底部的交互式的地圖進行互動。

Tomorrow’s World

Tomorrow’s World 這個網站則始于一項調研，而網站最終會將一系列的調查使用可視化的方式呈現出來，幫助用戶了解周圍的世界。

Qravity

Qravity 在網站中加入了多個數據輸入點，用戶可以通過滾動交互來調整時間軸，信息的呈現也會隨之發生改變（比如日期和事件），這比起簡單的列表要好懂得多。

3. 多邊形2.0

多邊形元素從2017年開始成為設計師們的心頭好，作為一種持續流行的、泛用型的設計趨勢，一直流行到現在。有意思的是，多邊形元素也不再維持以往常見的樣子，開始在外觀和視覺上發生改變。現如今的多邊形不再是以往小巧玲瓏、成群結隊的樣子，設計師開始有意識地挑選一些多邊形，賦予它們超大的外觀造型，而不再是簡單的點綴和堆砌。

這些超大的多邊形元素可以在不同的設計風格之下良好地運作，結合不同的樣式和色彩，發揮作用。它們可以作為整個設計模式中的一員，作為裝飾元素也可以用來作為強調特定內容的容器（比如圖片和文本）。

多邊形元素的有點在于，它們造型多變，可以區別于常見的原型和矩形，更容易吸引用戶的注意力。這種不同的使用方式，我們姑且稱之為 多邊形 2.0。

The Alan Turing Institute

多邊形的特征、角度可以隨著你的設計需求來靈活選擇，比如 The Alan Turing Institute 這個網站會在右側露出三角形的一部分，Evoluted 這個網站則將簡單的線條和多邊形搭配在一起，互相疊加營造出聚合的感覺，而 Iqor 這個網站則更加傾向于使用多邊形來承載內容。

Evoluted

iqor

多邊形和不同的色彩搭配，所帶來的視覺體驗和強調效果都是非常突出的。不過要將內容和多邊形結合起來，設計師還是得花點心思。

更多多邊形元素的玩法看這里：

結語

對于設計趨勢而言，它是存在時效性的，它之所以在特定的階段流行有諸多因素的影響。當你在設計的時候沒有想法的時候，設計趨勢能夠給你的不僅僅是當下設計方向上的選取，也為你提供了一個可供參考的選擇。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

之前一直覺得色彩，圖形，字體是 UI設計的三大構成，任何設計都是從這三大元素開始的，所有的 UI設計都是由這些構成的，但是卻忽略了界面中空間的運用，也就是我們常說的間距。今天我想分享下幾年前從 Google 的 Material Design 以及 8 pt grid 中學到的關于間距相關的教程，這篇分享有助于我們處理好界面間距一致性問題，讓設計更加統一，同時定義規范里面的原子設計方法，能完美融合。

間距無處不在，界面中的邊距，距離上邊，左邊，右邊，頂部等各種屬性。因此作為一名設計師，我們需要很好的掌握各種間距規律，通過間距規律很好的組織好內容。

一、為什么要統一間距？

是否大家和其他設計師在合作過程中，經常打開一個設計師源文件時候，發現各種間距大小，各種不一致地方，明明同一個頁面，已經定義好規范，但是每個人使用的間距大小不一致?？赡苣銈円幏兑呀浂x好了，最小單位是5，按照5的倍數去做設計，但是還是會出現各種奇葩的間距，10，12，18等等。或者說有的設計師是按照5來說的，間距會出現10，15，20，25，30，很難解釋清楚哪種場景下用什么樣間距規則。

不止是設計師，估計研發打開我們標注稿都是崩潰的。所以我們需要去統一間距規則，它的優點是能很好的讓設計師之間合理的了解我們間距系統規則，同時開發在做設計開發時候，不需要每次都重復開發不同間距，導致整個 APP 風格混亂，那么我們如何去做呢？

二、它的價值是什么？

對于設計師：效率上，減少決策和思考，當我做一個需求時候，我不需要考慮到底用多大間距，同時能保持元素之間的節奏。

對于團隊：設計師和開發之間溝通更加簡單，開發人員能很好的按照最小單位按照增量遞增去寫間距，而不必每次都進行測量。

對于用戶：他們信任的品牌有一致性的美感，在設備上沒有模糊的像素偏移等，就和微信一樣，說不出哪里好，但就是最好的。

三、站在巨人肩膀上思考

△ Material Design 在他的布局中有講過，他們的間距，所有間距規則都是在8的倍數上進行遞增，而且并不是毫無頭緒的遞增，只定義了幾種增量關系，克制的有序的間距彈性，最小的是8，16，24，32，48，56，72。

△ 同樣在 iPad端，間距規則也是有序的，克制的間距彈性，而不會出現我們日常設計中經常間距隨意任選的使用，毫無規則亂用。

△ 在 Airbnb 的規范中，PC 和無線所有設計間距規范原則只定義了5種，8，16，24，48，64讓規則更加簡單，更好的統一了整個風格的一致性。

這些原則除了在元素和元素中運用，其實在按鈕中，在按鈕里面文字和上下左右的距離，都是有序的，我特別喜歡一句話，設計語言只有在有序的遵循和重復使用下才有用。

四、怎么做？

1. 定最小原子單位

這個最小間距規則可以是3的倍數，像蘑菇街、豆瓣一樣，如果你希望產品留白比較多，也可以是5的倍數，例如 pinterest、亞馬遜等，這個沒有絕對的，一切根據你們產品內容豐富程度決定。

△ 亞馬遜和 AliExpress 都是按照5為倍數來做間距增量

2. 確認間距彈性

大家都買過衣服或者鞋子，一般鞋子尺碼，只會有固定幾個（36，37，38，39，40，41，42，43）如果你需要的鞋子特別大，可能需要訂制，包括衣服也是同樣（XS,S.M.L.XL）。

在定義間距上同理，以往做設計規范的經驗，在上一步定義好最小單位就完啦，然后設計師按照增量去設計就 ok，這樣只是完成一半，如果按照4的增量（4，8，12，16，20，24，28，32，36，40….）這種帶來問題就是任何間距都不可預測，提供的選擇過于接近了，在什么情況下使用24，什么情況下使用28，我們很難去決策，如何去做。

之前在團隊做過一個調研，我們問了設計師，也看了很多設計源文件，包括國外也有一個類似調查，就是在用4作為設計原子間距做設計時候，設計師使用最多的間距有哪些？結果很有意思，使用16的占一半，8和32的占一半，所以定義太多間距其實毫無意義，只會帶來設計時候的不確定元素。

3. 根據業務場景，定義間距

正如前面所說，過多間距規則，只會帶來設計師困惑，徒增界面復雜性，對開發，對設計師都是一種負擔，所以我們在定義間距時候，一定要少，要讓我們間距原則覆蓋到絕大多數場景?？梢詮?XS，S，M，L，XL 為參考，小，中，大為緯度。

△ Airbnb 的間距規則 XS，S，M，L，XL 是最小為8，常用8，16，24，48，64，Airbnb 則更加克制，給設計師選擇更少，反而更能保持設計次序。

△ quickbooks 的間距規則 XS，S，M，L，XL 是最小為4，常用8，16，20，40，60能很好滿足各種業務場景，包括各種的間距場景都是在此基礎上去拓展。

△ 那么界面中所有的間距地方，全部運用8，16，20，40，60這幾個原則來做設計，保證頁面統一性。

△ 包括頁面中的元素高度，比如 banner 高度也是按照間距增量去設計高度，那么整個頁面就更加有系統性和科學性。

△ 這也是我們在做系統設計時候經常用到的，通過增量來做設計。

△ 同理，在國外很多優秀產品中，我們不難發現這種規律的使用，更好的提升了設計效率。

總結

統一簡化間距規則，通過這些規則，構建一致性界面，所有邊距，元素空間都遵循規則時候，對于視覺設計和開發人員來說，都能很好解決一致性和效率問題。

在我們剛開始設計時候，可能會覺得沒有真正的好處，但是當項目越來越復雜時候，團隊規模越來越大，每天處理各種設計原子和設計分子時候，你會發現，當你使用固定的間距，它會比之前隨意的間距規則有更好的效果。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

在今天的 UI設計中，投影使用的范圍和頻次越來越高。打開手機APP，或是看追波上的練習稿，都可以看見無數投影使用的案例。

掌握好投影的使用，是必備的 UI 視覺設計基礎。投影遠沒有大家想象的那么簡單，即使軟件中可以設置的參數并不多，在我的教學過程中，很多學員始終沒辦法很好的應用投影來提升自己的設計質感。

所以，這篇文章就會詳細講解投影的正確設計方法。

一、投影的基本介紹

在了解投影和設計的關系前，我們要先知道投影是什么。用專業點的方式解釋，即：

投影指的是用一組光線將物體的形狀投射到一個平面上去，稱為「投影」。

有了光源，才有投影。光影是美術和攝影最核心的基礎。那么投影有什么特征呢，先看看下面的這張靜物攝影。

圖中有很清晰的向右延伸的投影。距離主體越遠的投影，也就越模糊，越淡。通過這樣的投影我們還可以很輕易的分析出，光源在左側，且物體是放置在地面上的。

投影可以帶給我們非常多隱藏的信息，而這些往往被我們所忽略。再看看下方的案例，當背景無法直觀的提供物體所處高度時，投影就能起到關鍵的作用。

在平面畫布中，投影的做法直接影響我們對元素的認識。 例如下圖中，投影可以讓我們了解按鈕本身是有厚度（遮擋了光線）或是離開了水平面處于懸浮狀態。

當然，投影除了對物理信息的暗示，還涉及到對視覺效果的表現。上面的白鞋投影很重，且輪廓清晰，這樣能塑造更強烈的沖突，增加鞋子的立體感。但是不是所有攝影都需要有這樣雕刻版的投影效果呢？答案是否定的，例如下面這張圖片。

主體物和背景色彩能很好的結合，創造出有趣歡快的視覺氛圍，所以只需要柔和的投影即可。在 UI 的設計中，對于陰投影參數的定義，也會直接影響我們畫面的視覺效果。

成熟的攝影作品，會根據對投影的需要再去調節打光的方式，這是個非常復雜而且繁瑣的過程，需要經年累月的學習。而在設計的過程中，創造投影卻非常容易，所以我們更該重視的是，如何正確的設計投影。

即先構思出元素的物理特性，再給予它正確美觀投影樣式。

二、UI設計中的投影

在進入了扁平化的設計環境后，投影有很長一段時間被抹除，因為大家認為那是擬物的遺毒，就怕設計里用到擬物元素顯得不夠時髦。

到了 Material Design 發布以后，谷歌在規范中增加了 Z 軸的概念，也就是為平面預設了立體的空間，設計元素可以定義與空間中水平面的距離。

下圖中，Z 軸數字越大，代表和水平面的距離越遠，上升得越多。而帶給我們這種感受的原因，就是投影的暗示，元素本身的坐標并沒有任何改變。

既然增加了投影，那么谷歌的專業設計團隊，肯定不會很隨意的制定其參數。當我們打開谷歌的官方 UI KITS 源文件進行查看時，就能發現其中的不同。

可以看見，元素疊加了多層的投影，這是違反新手對于投影定義的直覺的。原因在與，一般軟件中定義的投影，其深淺與元素的距離是線性等比的，而現實世界中，深淺與距離是非線性的函數關系。

在 UI設計師接觸的平面類軟件中，只有 PS 具備完美復現這種投影的能力，即控制投影的等高線。

而 Sketch、XD 這些軟件都不具備這樣的功能，且手機系統的投影渲染機制也是線性的，所以谷歌就通過使用 TopShadow、BottomShadow 疊加的方式，去模擬真實的投影效果，讓它們看起來更和諧自然，這就是多層投影的奧秘。

上面出現的投影都是黑白灰，但在現在流行的設計作品中，最常見的是應用了彩色的投影，攝影中也經常會應用彩色的投影渲染氛圍。

但是，投影中的這些彩色區域，并不完全都是投影，還包含了折射和漫反射的原理等。為了簡化，我們可以認為是光線穿透物體從而投射出帶有物體本身顏色的投影。就像撐起一把綠色的陽傘，傘下的人頭頂也會彌漫著草原的芬芳……

三、投影設計演示

在開始展示具體的設計案例前，我們要先明確一個原則，即：

優雅的投影是讓你感受到它的存在，但不會吸引你去關注它！

一般的設計軟件中，元素的陰影即是在元素的背后添加了一個相同輪廓的純色矢量圖形，我們可以通過 XY 軸移動它的位置，并使用模糊的參數來設置它的模糊度。

當元素的距離水平面越近，陰影距離元素也就越近，即 XY 軸越小，模糊也越小，如果離得遠則相反。

1. 常規投影類型

第一種投影的類型，即光源從元素的上方投射下來，可以參考谷歌提供的投影方案疊加兩層投影。第一層是 XY 軸坐標為0，只添加模糊的參數，透明度較低。第二層陰影使用相同的模糊參數，增加 Y 軸坐標，透明度較高。

在非 MD 設計中，它濃郁的投影參數會讓整個界面變「臟」，變擁擠。我們要做的是要降低投影的透明度，這樣才能讓投影的表現更自然舒適。要牢記的是，當使用純黑色做陰影時，透明度無論如何都不應該高于 20%，正常區間在 5%-15%。

既然知道陰影屬性的規律，我們還可以復制個矢量圖層做模糊效果也可以得到一樣的效果，這種方法可以支持我們設計出更真實的投影。即將 BottomShadow 獨立出來，縮小并向下移動。

如果想要得到彩色的投影，那么只要切換投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我們要憑感覺去調整它們的透明度。

如果感覺不得勁，陰影太少了，那么我們就讓元素的 Z 軸上升。

既然前面提到彩色投影是由于光線穿透了元素，那么當使用了漸變色或者是圖片的投影，我們在上一步復制出的那層投影，就可以不使用填充色，而是直接用漸變或者是原圖進行模糊和透明度調整。

2. 非常規投影類型

光有垂直于平面的關系，那么發揮想象力，我們還可以更改光與面的位置，如下圖所示。

在這個場景中，投影就作用在圖片下方的地面，只有地面處于透視狀態時，才能可以看見它的投影，所以，我們就可以得到下方的效果。

當然，我們還可以結合光源的類型，比如使用聚光燈等，那么陰影的輪廓就會發生變化。

我們甚至可以預設元素本身產生有一定的變形，如邊緣翹起，那么就會產生獨特的陰影類型。

我們可以從日常生活中的觀察將各種不同的投影形式引用進我們的設計中，讓我們的設計視覺更豐富有趣。

總結

學會正確的投影設計方式，并不是僅僅讓我們局限在對 UI 元素的設計上。它還能給我們帶來很多意想不到的幫助，例如做設計的包裝。

通過前面講解的知識點，上方展示案例中應用的陰影方式相信你們已經可以看出端倪了，如果使用基礎的陰影設置去創建展示的陰影，就會發現效果遠遠不如案例的高級，自然也難以帶給別人良好的視覺體驗。

最后，在項目中，想要將設計出來的陰影交付給開發，真正落地實現出來，無論安卓或是 iOS ，陰影的渲染和設計軟件的參數是不一致的，這就需要大家自己鉆研了。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、網頁設計是什么？

網頁設計也被稱為 Web Design、網站設計、Website design、WUI 等。它的本質就是網站的圖形界面設計。雖然現在我們常使用移動端上的 APP 來獲取資訊，但是顯然基于個人電腦平臺的網站上網方式陪伴我們的歷史要比手機久很多：從1987年錢天白教授向德國發出第一封電子郵件到2000年搜狐、新浪、網易在美國納斯達克掛牌上市，再到現在網站遍地；中國的網站高速發展了近三十年。我是在小學開始去網吧「上網沖浪」的，那時的電腦屏幕非常小，分辨率只有800×600像素（對比一下，iPhone8的分辨率是750x1334px），網速也很慢，經常掉線或者加載失敗。那時的網站性能和體驗都不好，而現在網站設計和過去已經有了巨大的變化：注重用戶體驗、注重頁面動效、富媒體等設計讓如今的網站體驗并不比軟件和手機 APP 差。加上個人電腦的普及，網站仍然是人機交互中非常重要的平臺之一。那么作為 UI設計師我們就必須掌握網站設計的規范和理解網站運行的原理，才能更好地駕馭這個平臺。今天就向您好好說道一下網站必須懂得的那些事兒。

二、工作流程

首先讓我們來看一下網站設計的工作流程吧，除了之前介紹過的用戶研究、撰寫產品需求文檔、市場文檔、做競品調研等工作之外，與設計師密切相關的網站項目流程可以分為原型圖階段、視覺稿階段、設計規范階段、切圖階段、前端代碼階段、項目走查階段六個階段。每個階段都需要設計師參與和了解，千萬不要只在意視覺稿這個階段，有很多前期與后期工作同樣需要得到我們的重視。好，讓我們一個一個來了解它們吧。

1. 原型圖階段

原型圖階段中設計師需要和產品經理溝通需求，這時要注意，并不是產品經理向設計師下發需求，而是需要相互就自己擅長的方面進行溝通。視覺方面具體呈現也許設計師會有更好的方式，這時需要在設計之前與產品經理達成一致。

△ 構建網站原型圖（工具：Axure RP）

2. 視覺稿階段

視覺稿階段就是我們要根據原型圖確定的內容和大體版式完成網站的界面設計了，在設計網站的時候，我們需要一些圖像和靈感的素材。比如做世界杯專題時，我們除了收集很多素材之外，也可以設計一個「情緒板」（Mood Board）。簡單說情緒板就是將一些與主題相關的資料和素材拼貼在一起，這樣可以更好地指引我們整個需求的設計主題和大體感覺。另外，很多網站的頭部通常需要主視覺來抓人眼球，這時可能會使用到需求方提供的明星照片、主題素材、LOGO、主視覺PSD等，那么用素材和這些需求方提供的資料進行混合并拼出讓人覺得震撼的頭部視覺就是我們的目標了。主視覺下面的信息排布更強調合理性，這時也需要和產品經理溝通從后臺調取的圖片尺寸、標題字段長度等，然后根據這些要求完成頁面信息部分的設計?？傊?，設計過程中需要我們不斷思考和溝通才可以完成一個比較棒的視覺稿。

△ 視覺稿設計階段（工具：Photoshop）

3. 設計規范

當視覺稿通過后，很多設計師可能不會主動去做設計規范。其實每一個可迭代的產品都需要設計師來總結設計規范，設計規范就是所有頁面中共性的東西，比如說字體不同的大小、圖片的尺寸、按鈕的樣式等，這些共性也是用戶訪問網站時會理解成固定概念的憑證。比如同樣的分享功能如果采用兩種截然不同的樣式就會讓用戶困惑。那么設計規范主要也是在約束設計師我們自己，在用戶有限的記憶力中減少思考的成本。同時，設計規范也可以保證同一個項目的不同設計師都能輸出一樣風格的設計來。最后，設計規范對于設計師個人來說也是對項目影響的一個佐證，可以證明你的思考和你在項目中的地位。所以我認為設計師應該主動去做設計規范和項目總結。設計規范如何去做？其實設計規范就是把主要頁面的元素固定成統一元素即可。具體來說一個產品的設計規范應該有：字體規范、主體色規范、圖表規范、圖片規范等不同分類。

△ 視覺規范（工具：Photoshop）

4. 切圖

網頁設計師通常不需要為前端工程師切圖。因為前端工程師通常需要掌握 PS 軟件技能。如果遇到特殊情況需要我們切圖時，我們可以使用諸如 Cutterman、Zeplin 等切圖插件中的 Web 選項為前端切出網站所使用的圖片。

△ 從PSD中提取出來的切圖（插件：cutterman）

5. 前端代碼

前端工程師會用代碼重構我們設計的頁面，把圖紙變為靜態頁面。然后和后端工程師對接調取數據接口，一個網站就活了起來。工程師們為了方便了解網站是不是達到了我們要求的數據，也會進行埋點。埋點就是在頁面代碼里插入一些統計代碼，方便我們之后確定哪些頁面訪問量高，哪些沒有達到預期。在此后其實還會有測試工程師介入來發現編譯完的網站是否存在一些漏洞等。

△ 前端工程師代碼編譯（工具：Notepad +）

6. 項目走查

網頁設計完成后還需要設計師進行項目走查，來確定網頁還原度是否有問題。如果發現有和設計稿出入很大的，就需要要求前端工程師進行調整。這個步驟非常重要，因為網站的成品才是我們最終的輸出，不要認為設計稿很漂亮而實現后的頁面就不需要我們負責了。

△ 將實現后的截圖和設計稿進行比對（工具：Photoshop）

三、網站種類

網站的分類按對象來劃分可以分為 To C端和 To B端兩種。To C端就是面向用戶和消費者，例如門戶網站、企業網站、產品網站、電商網站、游戲網站、專題頁面、視頻網站、移動端H5 等，均是面向用戶和消費者的產品。由于是面向用戶和消費者，所以設計上一定要可以吸引人，并且以用戶為中心考慮體驗設計。而 To B端作為一個需求量很大的類別，其實往往被設計師所忽視。什么是 To B端項目呢？比如電商網站供貨商的后臺、Dashboard、企業級OA、網站統計后臺等這些面向商家和專業人士的網站就是 To B 類網站項目了。這些項目的要求和 To C端網站的要求大相徑庭：To B 類項目最重要的是效率而不是體驗，因為說白了我們在設計使用者工作的工具，我們在設計時必須首先要保證操作者可以地完成他們所需要完成的工作。那么讓我們來了解一下網站的不同門類吧。

1. 門戶網站

門戶網站國內比較知名的有新浪、騰訊、網易、搜狐；國外比較知名的如 Naver、Llinternaute 等。我們可以看得出，門戶網站都是大而全包羅生活萬象的。比如騰訊網就有新聞、財經、視頻、體育、娛樂、時尚、汽車、房產、科技、游戲等不同頻道。門戶網站的門檻很高，必須要有雄厚的實力才可以建立起一個門戶網站，而門戶網站需要的設計師數量也驚人。首先門戶網站需要產品方向的界面設計師以迭代的方式維護迭代網站首頁、二級頁面、底層頁等網站基石。然后需要各個頻道的設計師來處理日常需求：比如巴黎時裝周需要負責時尚頻道的設計師來設計對應的專題、世界杯小組出線需要負責體育頻道的設計師來設計對應的專題等。地球上的每一天都有大事發生，那么門戶網站中的設計工作就不會少。另外，具體對接頻道的設計師也需要有一定擅長之處：比如對接體育頻道的設計師起碼應該熟悉足球籃球等體育項目、時尚頻道的設計師要懂得各個大牌的設計風格、佛學頻道的設計師需要懂得基本的佛學知識和忌諱、文化頻道的設計師需要對傳統文化有所涉獵。所以基本上門戶網站的設計師可以分為產品組和頻道組兩種。

△ 韓國門戶網站Naver

2. 企業網站

每個企業都需要有一個網站來對外展示自己的能力、介紹自己的產品等?，F在接觸一個陌生的企業時，很多老百姓都會上網搜索一下其官方網站驗證真偽。網站已經是中小企業的標配了。企業網站設計時通常會有網站首頁、公司介紹、產品中心、公司團隊、在線商城、聯系我們等這幾個模塊，企業網站會展示很多諸如公司環境、團隊成員、企業文化等實際的照片，配合一些資料進行設計。企業網站通常也追求所謂「高端」、「大氣」、「上檔次」的風格，也就是為了達到讓消費者認同品牌這個要求。所以如果我們接到了企業網站的設計需求，不妨多去瀏覽參考一些更加大牌的企業網站作為競品來參考。

△ 美國通用公司官網

3. 產品網站

從蘋果公司的 iPhone 介紹頁到小米手機8的介紹頁，我們會發現一種新鮮的產品營銷模式，就是產品網站。設計這類網站的內容主要是該產品的工藝、技術、設計、特點、構造、使用場景等。這樣的產品頁希望可以讓用戶有沉浸感，所以一般來說都是使用全屏布局，然后配合一些如視差滾動等方式讓我們感覺到這個產品的精細。由于中國互聯網和產品設計發展很快，所以產品類網站設計需求一定會越來越多。

△ 蘋果公司產品介紹頁

4. 電商網站

電商設計師也屬于網頁設計師嗎？是的。如果按照平臺細分，無疑電商設計師所在的平臺大部分屬于網站。以淘寶、天貓為代表的電子商務發展得太快了，以至于從內蒙的牧民到海南島的漁民，甚至臺灣、日本、東南亞的商人都開始在中國電商平臺上開店鋪了。店鋪其實本身屬于平臺本身的頁面。但是為了增強每個店的個性，平臺為商店開通了一些頁面自定義的裝飾功能，比如寶貝詳情、店鋪排版、banner頭圖設計等。這樣商鋪有一定權限在平臺規定的范圍內使用圖片和一部分css樣式代碼來裝飾自己的店鋪，電商設計應運而生。雖然帶著鐐銬跳舞，但是有很多店鋪因為設計精良而能帶動銷售。那么電商設計師當然就變得非常重要了。

△ 淘寶網首頁

5. 游戲網站

游戲是一個巨大的產業，很多公司的收入大半壁江山都來自游戲產業。那么除了游戲需要制作精良之外，游戲的官網也必須設計精美。不要忘記，每一個玩家都需要訪問你的游戲官網才能完成下載、充值、社交等重要操作。國外游戲網站比如暴雪娛樂公司（https://www.blizzard.com）的官網設計得極其精美，每個游戲的官網都是一個精品。比如魔獸世界、星際爭霸2等游戲官網，頭部都是視覺沖擊非常強烈的動畫。然后網站界面的元素都帶有游戲的風格，仿佛登錄這個網站你就在游戲之中了。

△ 暴雪公司星際爭霸2游戲官網

6. 專題頁面

當然不管是電商還是門戶網站，在節日都會需要設計師來設計一些專題頁面增加曝光。比如兒童節、情人節、母親節、圣誕節等節日往往會有促銷、專題報道等各式活動。專題設計生命周期很短，上線后基本過了流量的那個點就基本沒用了。所以我們找不到前幾年的618或者雙11專題頁面，因為過了特定的時期專題頁面就無人問津了。所以在那么短的生命周期怎么抓住人的眼球？當然不能使用現代主義設計那種性冷淡風格，而應該在頭部盡量刺激用戶，用刺激對比強的色彩、復雜立體的造型、沖擊感強的文字吸引用戶來看。畢竟每個人可能只會看一次，不能放過這個機會。所以專題設計和產品設計正相反，專題設計必須刺激。

△ 極有家淘寶專題頁面

7. 視頻網站

視頻網站的訪問量驚人，并且用戶的黏著度更高。很多視頻網站除了購買版權之外還有很多 UGC 內容。多說幾句，UGC（User Generated Content）是指用戶產生的原創內容，很早之前 web1.0時代用戶主要是單向瀏覽網站，web2.0提出的 UGC 概念就是說用戶不僅在瀏覽也會上傳內容。那么視頻網站為什么會火呢？首先要感謝寬帶的發展。在今年我們國內點擊視頻就立馬可以播放了，而在幾年前需要等待幾分鐘才可以加載夠緩存。視頻網站的設計主要是要考慮應用場景：視頻是用戶主要觀看的區域，所以視頻區域首先要足夠大，另外顏色應該以暗色為主，因為亮色會干擾到用戶觀看視頻。然后其他的區域圖片比例應都為16:9的視頻尺寸，方便后期編輯在后臺添加。視頻網站的設計師同樣也可以分為產品組和運營組兩個種類來處理產品方向和運營方向的不同需求。

△ 騰訊視頻播放頁面

8. 移動端H5

你一定在朋友圈被《穿越未來來看你》、《淘寶造物節》等 H5 刷過屏吧？平時我們經常被這種好玩兒的 H5 刷屏。其實 H5 全稱是 HTML5，并不是僅僅指移動端，而是網頁前端的開發語言，由于約定俗成的概念，我們現在常常把手機中的集合視頻、動效、互動的這種營銷形式稱為 H5。其實它的本質是運用網頁技術運行在手機瀏覽器或內置瀏覽器內的網頁。隨著技術日新月異的發展，H5 顯得越來越有傳播價值和份量。微信、瀏覽器等平臺級產品在手機端中火爆促進了依靠入口而傳播的 H5 的發展。如果設計出色，你的項目可能會在朋友圈產生病毒傳播的效果。

△ 使用前端語言編譯的適合手機瀏覽的H5界面

移動端H5尺寸

設計移動端 H5 項目的時候，我們一般以用戶量較高的 iPhone6/7/8的尺寸：750x1334px為準，然后我們要在頂部預留出微信或者瀏覽器導航區域。主要內容區域就可以自由設計了。一般H5的操作是上下滑動。字體方面使用蘋方字體，并且字號設置為24PX以上，渲染方式設置成銳利。英文則需要使用 SF-UI 代替。當然 H5可以調用背景音樂、視頻、鏈接等多媒體，讓體驗更佳。除了讓前端小哥哥們開發之外，其實還有一種方式可以無需代碼生成簡易版的 H5，就是通過 H5 工具生成。目前比較火的 H5 生成工具有：MAKA、iH5、兔展等，如果我們要自己生成而不是通過前端開發，那么我們設計稿的尺寸需要設置為640x1008PX。這些工具較為簡單，注冊后將 PSD 上傳即可對每個原件進行動效的設置了。但是如果需要復雜的動效和交互，還是需要前端工程師的配合。

△ H5項目的尺寸

9. 后臺網站

后臺網站又叫 Dashborad，中文翻譯為儀表盤。其含義就是有一大堆數據與統計信息。后臺網站是 To B 類型，那么首先的需求就是能快速地顯示給操作者他需要掌握的數據?？墒菙祿浅？菰?，我們可以使用諸如「折線圖」、「餅狀圖」、「曲線圖」、「表格」等不同方式來展現這些繁瑣的數據，這種圖形表達數據的方式也叫做數據可視化。后臺網站不需要特別可愛的插圖以及卡通形象，最重要的是效率。所以如果您經常處理 To C 類的需求，接到了 To B 類的產品需求時一定要注意這一點。后臺網站因為需要更大的畫面，通常會使用全屏式排版，也就是撐滿整個畫布。那如果小屏怎么辦呢？前端會使用相對布局縮小各個元素，排版的位置也會用百分比來確定。

△ 微信公眾號后臺

10. CRM系統

CRM 即 Customer relationship management，翻譯過來是客戶管理管理系統。CRM 是企業對客戶進行信息化管理的一種形式，用互聯網技術實現對客戶信息進行收集、管理、分析，對企業的銷售、服務、售后進行監控。常見的功能有員工日程管理、訂單管理、發票管理等。我們在設計這種項目時一定要將信息按所屬的邏輯關系分類，加強對比、對齊、重復、親密性的原則，使操作者在使用的時候感覺到便利。

△ Admin CRM dashboard by Divan Raj

11. SaaS

如果我們服務于為企業搭建 CRM、ERP 或者 OA 等系統的第三方公司，那么我們可能會老聽到 SaaS 這個詞。SaaS 是(Software-as-a-Service)，即軟件就是服務。其他公司會來提供 SaaS 服務的公司定制系統，然后服務公司會為客戶提供從服務器到設計一體化的服務。這里提到這個詞是防止設計師誤解它的定義。

12. 企業OA

企業OA，即(Office Automation)，也就是辦公自動化系統。在六七十年代就興起了一場使用電腦來改變傳統辦公方式的革命。在大型企業時常會面臨人員眾多、地域廣袤、辦理公司事宜手續冗長等問題，那么企業OA 可以很好地解決這方面的問題。通過企業OA 可以完成請假、調休、離職、查詢公司規章制度、請示、匯報等工作。這樣減少了很多窗口成本和員工的時間成本，增強了公司辦事效率。互聯網公司更是提供給員工除了企業OA 之外的交流功能，比如建立員工 BBS 和留言板等，在上面大家可以對公司提出建議和意見。企業OA 一般出于安全和保密性的原因，很多公司都更加愿意自己開發。設計師在設計此類項目時同樣要以操作者的體驗和效率為重，讓操作者輕易可以找到在當前頁面中最重要的功能。

△ Robo Advisor – Projection, List and Questionnaire by Michal Parulski

四、網站組成部分

了解了網站的不同類別后，讓我們來看看組成一個網站需要哪些部分吧。網站是由不同網頁通過超鏈接連接而成的，而不同網頁也是由不同模塊組成的。我們設計的是一個像蜘蛛網一樣的網絡，而不是一張海報。所以我們在設計網站時要格外考慮從用戶角度出發看到的網站，而不能孤立地把它想象成一個平面作品。

1. 首頁

訪問一個網站時第一個我們觸及的就是網站首頁。首頁別名叫作 Index 或者 Default，是索引和目錄的意思。在網站發展的前期階段，網站并不是富媒體，而是類似于一本書一樣：首頁類似書籍的目錄，需要查看哪個子網頁就點擊鏈接即可進入。到了現在，網站首頁仍然是引導用戶進入不同區域的一個「目錄」，這個目錄除了導航功能外也要露出一部分內容給用戶來吸引點擊，露出的部分一定要有一個「更多」按鈕來指引用戶找到二級頁面。

△ 首頁原型圖

2. 二級頁面

在邏輯上，首頁是一級頁面，從首頁點擊進入的頁面均為二級頁面。二級頁面之后還有三級頁面等級別。從點擊的概率上來說，自然是越靠前訪問量越高，頁面層級越深越不容易被用戶找到。一般網站有三級頁面，就是為了避免用戶迷失。為此還會在頁面中加入面包屑導航。面包屑導航就是在頁面第一屏出現的諸如 首頁 > 體育 > NBA頻道，這樣的超鏈接結構，方便用戶理解自己在哪里，并且點擊可以回到其他頁面。

△ 二級頁面原型圖

3. 底層頁

在網站結構中最后提供用戶實質資訊的頁面就是底層頁。比如，在門戶網站首頁或二級頁面中我們點擊感興趣的標題后，在底層頁中才會看到全部的資訊。待用戶閱讀完底層頁的信息后可以順勢在左側或右側的側欄尋找用戶可能感興趣的相關內容；在底側可以看到網友的評論；底側也會有分享按鈕、贊功能等；如果側欄用戶轉化率比較差，最底部還可以再次出現推薦相關資訊的功能?？傊?，在用戶閱讀完自己喜歡的資訊后，要繼續吸引用戶順勢閱讀其他的資訊或者回到頻道。

△ 底層頁原型圖

4. 廣告

門戶類網站如何盈利？廣告是變現方法之一。網站的廣告一般由負責運營需求的設計師負責，但是也可能由頻道設計師、產品側設計師來完成。在網站中常見到的廣告圖形式就是 banner。banner 一般尺寸巨大，在網站之中非常顯眼。因此也不一定是外部廣告，也有內部活動、推薦資訊等。那么 banner 圖的尺寸有固定嗎？答案是沒有。Banner 的寬度有兩種，一種是滿屏（1920PX）、一種是基于安全距離的滿尺寸（1200px或1000px）。高度要注意了：一般以1920x1080px為基準的用戶屏幕，加上瀏覽器本身與插件和底部工具條等距離，留給網站的一屏高度大概為900px，所以 banner 不可以做得很高，否則第一屏信息會顯示得不夠。你可能會說，那就讓用戶往下拉啊。但是在網站的訪問用戶之中，第二屏觸及到的用戶比第一屏會少很多。也就是很多用戶可能點擊網站后就會跳走或者關閉，那么第一屏的信息真的非常重要了，可謂是寸土寸金。所以我們的 banner 不應該占據過大的區域。比如站酷網的 Banner 區域為1380x350px。那么除了首頁巨大的 banner 廣告位，網站還有哪些廣告形式呢？

對聯廣告

在門戶網站中我們經常會看到網站左右安全區域之外會有個隨屏幕滾動的像「對聯」一樣的廣告，通常 banner 也會是一個廣告內容，并且居中會彈出由 HTML5 技術或 Flash 技術制作出來的彈窗廣告。這種廣告一般組合售賣，也就是說一進網站你就會被全面轟炸，無法不注意到這個廣告的存在。這種廣告點擊進入還有配合的專題頁等，可見需要設計師配合的地方非常多。

△ 對聯廣告形式

信息流廣告

信息流廣告是埋在信息流中的一種廣告形式。這種形式利用了格式塔原理，用戶會不自覺地閱讀起廣告的內容，原因是因為它的形式和其他信息一樣。比如朋友圈、知乎、Facebook 都采用了信息流廣告，信息流廣告的效果非常強，但是會犧牲一定的用戶體驗。信息流廣告的尺寸與信息流相同。

△ 知乎APP中信息流中的廣告

以上從廣告的形式上簡單介紹了三種常見的網站廣告形式，如果我們在閱讀需求時看到了 cpm、pv 等單詞是什么意思呢？他們是廣告的收費模式。cpm 是指按照廣告 pv 來收費，cps 是指按照用戶消費收費，cpa 是指按照用戶注冊數收費，cpc 是指按照用戶點擊付費。針對不同的收費模式，在設計時也會采取不同策略來增強廣告需要達到的目的。

5. Footer

在網站具體的頁面設計中，底部會有一個區域我們稱之為 footer。一般 footer 的顏色都會比上邊內容區域要暗，因為 footer 的信息在邏輯的級別上是次要的。footer 區域的主要功能是版權聲明、聯系方式、友情鏈接、備案號等信息。在設計時一定要降級處理，不要讓 footer 變得特別明顯。

五、技術原理

網頁設計師在做項目之前必須了解網頁背后的技術原理，技術決定了哪些設計和交互是可以實現的、哪些是不可以的。同時技術原理也決定了我們需要如何配合前端工程師來完成一些復雜的交互。其實在過去網頁前端工程師和設計師是一個崗位，就叫做網頁美工，這個職位需要在完成視覺設計后把頁面做成靜態網頁交給下面的環節。隨著分工越來越細致，產生了網頁設計師和前端工程師兩個工種。但是網頁設計師不可以脫離技術局限天花亂墜地去設計。下面讓我們來了解網站的基本存儲原理：在您的電腦 C盤保存一個叫 logo.jpg 的圖片，然后在瀏覽器打開這個網址：C:\logo.jpg 你看到了什么？對，就是這張圖片。這就是網站的原理：網站的資源和文件存儲在一個類似我們電腦的東西里，那就是服務器。我們通過域名來調取網中不同的頁面和文件，如果服務器關機了那么網站也就癱瘓了。每次當我們通過瀏覽器訪問網站時，敲擊一個網址，這時這個域名會轉向一個 IP地址，這個 IP地址就是服務器所在的門牌號碼。找到了以后，我們的瀏覽器會從服務器上下載網站的代碼并把代碼翻譯成我們能看懂的界面，比如文字、邊框、表格等實際上都是代碼的形式。瀏覽器還會把網站中所需要的圖片、視頻等單獨下載到緩存里。當我們通過表單輸入用戶名和密碼時，我們的信息就會上傳到服務器中，服務器處理完（比如登錄成功這個信息）然后再下發給我們的瀏覽器。所以平時我們訪問網站時，我們的電腦和瀏覽器要通過互聯網與服務器進行多次「握手」。當然老「握手」會造成加載速度變慢，于是我們聰明的瀏覽器會把已經下載過的資源緩存下來，避免浪費。這個機制就是「cookies」：瀏覽器會自動存儲你訪問過的網址、網站圖片、視頻、表單信息等。

△ 基于鼠標的手勢操作

1. 基于鼠標的交互

在不久的未來，個人電腦可能通過多點觸控、語音交互等方式與我們交互，但目前網站設計最主流的交互方式還是鼠標和鍵盤。來讓我們看看鼠標有什么結構吧！我們對鼠標的使用無外乎移動、左鍵、右鍵、拖拽四種方式。我們在頁面中的大部分操作都是通過鼠標左鍵點擊完成的，所以網頁也是點擊的藝術。右鍵一般會喚起右鍵菜單，但是很多網站與網頁應用程序也會將右鍵自定義設計一些操作和交互。與鼠標發生交互的主要是超鏈接與按鈕。那么讓我們來了解一下超鏈接的四個狀態吧（前端術語是：超鏈接標簽的 CSS 四個偽類）。

△ 按鈕與文字的不同狀態

Link

Link 是指超鏈接正常的時候的狀態。一般超鏈接需要與普通文字區別開來，比如換一種顏色或者加下劃線。當然下劃線還有一個作用就是方便弱視群體區分超鏈接與普通文字。Link 默認都是藍色的（色值：#72ACE3），但是為了增強網站的品牌性我們也可以把鏈接顏色更換成另一種顏色?？傊欢ㄒ谛问缴吓c普通文字產生差別才可以。

Visited

Visited 是超鏈接被點擊以后的狀態。比如新浪網新聞非常多，所以點擊完一個新聞后用戶可能不知道自己看過沒看過這條新聞了。所以新浪網使用了 Visited 屬性，點擊后的新聞顏色就不一樣了，方便用戶區別自己哪些新聞還沒有瀏覽。

Hover

Hover 是超鏈接鼠標經過狀態。這個狀態是連接中最為重要的狀態。其實不只超鏈接，按鈕和圖片以及視頻等一切可交互的元素都應該設置 Hover 屬性，也就是鼠標懸停時的狀態。一般來說變換顏色和放大是 Hover 狀態的基本方式。

Active

Active 是指超鏈接的激活狀態。點擊后超鏈接可以通過 CSS 加載一個狀態。

同樣的鏈接樣式也可以應用在圖片、按鈕、表單之上。點擊、鼠標懸停、鼠標按下都可以設計成不同的樣式，方便用戶通過鼠標感知這個物體是被我按下去的，這種給用戶的暗示我們也叫做「點擊感」。當然按鈕會和鏈接稍有不同，按鈕除了具備正常和鼠標懸停等狀態，還有一種狀態叫不可點擊。這種狀態將按鈕置灰，提示用戶這個功能因為條件不滿足不可以點擊。好了，您可以舉出幾個點擊感 Web 設計的例子嗎？

2. 靜態網頁

了解完基本技術背景、鼠標的交互之后，讓我們來聊點真格的。我們一般看到的網頁都是靜態網頁。靜態網頁是由 HTML 編譯的，我們在服務器上存儲的網頁代碼基本都是 HTML 格式。HTML 全稱是 HyperText Markup Language，即超文本標記語言?！赋谋尽故钦f這種語言內可以包含文字元素以及調用圖片、鏈接、音樂等非文字元素。HTML語言對于沒有編程的人來說可能會很頭疼，但是它已經是所有編程代碼中最簡單的一種了。別緊張，你可以把它當做摩爾代碼，它是服務器和瀏覽器之間的密語，瀏覽器會將這些密語翻譯成我們能看懂的色彩和鏈接等。那么如果我們用 HTML語言寫一段文字會是什么樣呢？

△ 模擬代碼編譯過程

沒錯，代碼就是這么一點一點編起來的。在任何網站空白處右鍵點擊查看網頁源代碼你就可以看到網頁的 HTML 代碼啦。HTML 這種代碼是由一個國際組織——W3C 發布和維護的。W3C 創建于1994年，是網站國際中立性技術標準機構。W3C 已經發布了 HTML 的諸多版本，其中影響最深遠的是 HTML4版本。而 HTML5 簡稱 H5 則可以說是劃時代的版本了。H5 的標簽更加接近現代，并且本身可以播放視頻，這就可以淘汰掉 Flash 插件了。（Flash插件帶來了比如系統漏洞、加載速度過慢等問題）同時 H5 對多平臺支持很好，所以適應移動端為王的當今時代。H5 甚至還可以變成游戲、Webapp（在網頁上如本地程序一樣工作的網站，比如藍湖等）、多媒體等多種形式?？墒怯捎?IE瀏覽器這類不支持 HTML5 效果的瀏覽器在用戶中占比還很高，所以造成了 HTML5 發展的制約。瀏覽器可以理解為一個代碼閱讀器，由于它對 HTML5 代碼的翻譯工作不好就會造成所謂「兼容性」的問題。比如 HTML5 中可以通過代碼給一個 DIV添加投影，那么在某些瀏覽器中就顯示不了這個效果。不難理解為什么有程序員會穿著 i hate IE 字樣的T恤了吧。在每次做完一個網站項目時，測試工程師都會用 Chrome、Safari、Firefox、Opera、IE、Edge 等多個瀏覽器測試網站的兼容性，這時通常讓前端工程師非常頭疼。因為代碼動一發牽全身，經常這個好了那個又不行了。但是針對這種問題也有一些解決方案，比如減少對用戶占比不高瀏覽器的支持、對不好搞的瀏覽器單獨加載特定的適配代碼等。道高一尺魔高一丈呀。

3. 其他前端語言

有了 HTML 這個骨架，加上圖片和多媒體后，網站的發展速度就更快了。但是服務器的損耗很大：所有用戶都需要重復地來服務器下載代碼和圖片等資源進行「握手」，而且很多 HTML 代碼都是重復的，造成了資源的浪費。比如，如果我網站的頭部都是黃色的、鏈接都是藍色的，那么每個頁面都會啰嗦這幾句代碼。這個問題沒多久就被一種嶄新的代碼解決了：CSS技術。CSS 是層疊樣式表的意思：我們可以理解為現在把網站的樣式（顏色、大小、位置等樣式信息）也就是 CSS 和網站的內容（文字、圖片、鏈接等內容信息）也就是 HTML 完全分開，并且一個網站可以下載一份 CSS 然后不同頁面都調取這份 CSS 的緩存，那么就節省了服務器資源。另外，由于網站需要一些交互效果，比如點擊和菜單等，那么需要前端工程師使用 Javas cript 代碼來配合。Javas cript 是一種比較短小精悍的語言，構建一些基于瀏覽器的非常順手。所以目前主流的網站配置是 HTML5+CSS3+JS 代碼的組合，當然為了兼容那些低端瀏覽器也可能使用 HTML4+CSS+JS 的套餐。這取決于我們的主要目標用戶群在使用什么樣的瀏覽器。當然，我講這些并不是要求您去學習 HTML、CSS、JS 代碼然后進行前端開發，因為在現代互聯網公司里已經有專業的前端工程師了。我們了解這些主要是要理解前端工程師的工作以便更好地配合他們。

△ 主流形式：HTML + CSS + JS

4. 動態網頁

了解完靜態網頁還不夠，現在讓我們談談網站如何動起來。動態網頁不是說它有狂拽酷炫的動畫，而是動態網頁會隨著時間、內容和數據庫的調用而產生動態的網頁。比如今天看到的新聞網站和昨天的新聞肯定不一樣了，可是網站首頁的 HTML 代碼并不需要人去手工修改，而是讓小編通過后臺錄入新聞、上傳圖片就好了。小編上傳后臺的過程就會輸入數據庫，而動態網頁又是調取數據庫內容顯示給用戶的一種形式。動態網頁會隨時調取數據庫中的信息給用戶，而對用戶來說似乎靜態網頁和動態網頁長得都是一樣的。那么最傻瓜的判斷方式是看網址結尾，靜態網頁結尾是 html 或 htm，而動態網頁由于使用了高級網頁編程技術，結尾則是 Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi 都是動態網頁的語言，當然有的時候為了讓網站效率提升也會使用偽靜態結構，結尾和靜態網頁就一致了，但是實際上是會在用戶訪問前調取一遍數據庫的。同時動態網頁的網址會有一個特點，含有？符號。動態語言目前最火的是 Php，較早而現在比較少見的是 Asp、Cgi，最安全的是 Jsp，所以很多銀行采用 JSP 編譯。了解完這些，我們基本就弄清楚網站的運行原理了。

△ 主流后臺編譯語言：PHP ASP JSP CGI

5. 雪碧圖

我們經?？吹骄W站中會有動畫，那么動畫實現的原理一般有如下這么幾個：第一，HTML5 視頻播放；這種方式缺點就是不兼容低端瀏覽器。第二，Flash Player 播放器播放；這種方式的缺點是Flash安全性很低而且效率慢。第三，動畫使用 Gif 格式；這種方式的問題是動畫長度不夠，并且這個格式僅僅支持透明和不透明兩級屬性。那么像 Google 首頁 Doodle 的動畫是怎么實現的呢？這種技術叫做：雪碧圖。CSS 雪碧即 CSS Sprite，也有人叫 CSS 精靈，它是一種 CSS 圖像合并技術。它本身調用的圖片是支持多級透明的 PNG 格式，然后把動畫并排排列出來。比如一個卡通人物的動畫每幀寬度是100px，那么就把它的動作1 動作2 動作3 動作4 并排放在一張寬度是400px的 PNG 圖片里。然后代碼在一個100px的寬度框子內背景圖調用這張 png，我們就看到了動作1，然后過一秒鐘代碼會悄悄移動100px我們就看到了動作2。由于速度很快就讓我們看到了連續動畫。雪碧圖也有自身的缺點：如果幀數太多，會消耗很大的內存。所以幀數一定要控制少。如果你的動作設計了12幀，那么我建議你可以試試將2、4、6、8、10刪除，保留一半的動作。

△ 雪碧圖

6. 視差滾動

視差滾動是一種運動速率不一樣的設計效果，用以實現空間感。比如密爾沃基警察局官網就大量運用了視差滾動效果。其實現原理是，代碼判定網頁滾動，滾動時頁面中三層圖片運動速率和位移距離不同。這樣給人造成的視覺體驗仿佛是我們在物理現實中看到的空間感一樣。視差滾動已經不是什么高新技術，如果你的網站比較適合視差滾動，請大膽設計并和前端工程師提需求，相信前端工程師可以滿足你的要求。我們需要準備的就是運動速率不同的分層靜態 PSD 文件。

△ 運用了視差滾動效果的密爾沃基警察局官網（milwaukeepolicenews.com）

六、網頁設計規范

終于，經歷過長篇大論網站的原理與組成部分后，我們要談談網站設計的規范了。網站設計并無具體平臺限定的風格，也沒有必須要設計的系統級導航欄和工具欄。所以網站設計更加靈活，然而因為太靈活也會讓我們的設計師無從下手。那么接下來我將介紹網站設計的規范，在您工作的時候可以參考。注意，在設計之前一定要和前端溝通我們使用的尺寸、字體、交互等，這樣有助于后期不會有誤會。

1. 畫板尺寸

因為網頁尺寸與用戶屏幕相關，而用戶屏幕的種類難以統計。所以我們的設計稿只能主要顧及主流用戶的分辨率，其他分辨率用適配的方式來解決。在版 Photoshop 網站 Web 預設尺寸給了我們一些啟示：常見尺寸（1366x768px）、大網頁（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。這些是主流尺寸，而我們如果做網站時建議按主流的分辨率1920x1080px來設計。所以我們通常設計網站時的網站寬度為1920px，每個屏幕的高度約為900px。為什么是900px呢？因為1080還要減去瀏覽器頭部和底部高度，大約就是900px了。內容安全區域為1200px （或1000px / 1400px）。以這個尺寸來設計相對標準。當然在設計網頁前需要知會前端設計尺寸，因為對于適配的方式和后續配合他們更有發言權。

△ 網站的尺寸規范

2. 文字規范

我們現在都知道了網站上面的文字是通過前端工程師重新寫在代碼里的。那這種文字在瀏覽器上的渲染與系統和瀏覽器有關。比如在蘋果電腦上看到的文字效果和 Windows 系統電腦上看到的文字效果就有所不同：蘋果會對文字進行渲染，而 windows 的文字幾乎充滿了像素顆粒。按照用戶占比來說無疑 Windows 的用戶是主流，所以盡管我們可能使用蘋果電腦設計網頁，但是設計出來的網頁效果也應該和 Windows 顯示一致。否則我們設計完漂亮的設計稿，程序員無法還原成我們設計的樣子。另外，字號的大小也非常重要。網頁的顯示區域決定了文字不可以過大，在網站設計中我們的文字大小一般來說是12-20像素。為什么不能比12px更??？因為如果比12像素更小的中文無法放得下復雜的筆畫了。而且奇數的文字表現和適配都不好做，也就是說我們必須使用偶數的字號來設計。那么總結一下：文字使用宋體、大小為12px、渲染方式選擇無。稍大一些的字體使用微軟雅黑、大小為14-20px、渲染方式選擇 Windows Lcd 或銳利。另外，英文和數字需使用 Arial字體，渲染方式選擇無。

△ 網站字體規范

3. 圖片規范

網站設計中的圖片常用4（寬）：3（高）、16（寬）：9（高）、1:1等比例。具體圖片大小沒有固定要求，但整數和偶數為佳。主要是考慮到一些適配的問題。作為內容出現的圖片一定需要有介紹信息和排序信息。圖片的格式有很多，比如支持多級透明的 png 格式、圖片文件很小的 jpg 格式、支持透明/不透明并且支持動畫的 gif 格式等。在保證圖像清晰度地情況下文件大小越小越好，如何讓網頁使用的圖片更小呢？

第一種方法，給程序員切圖的時候我們可以適當縮小圖片文件的大小。比如 Photoshop 中存儲為 web 所用格式就會比快速存儲文件更小。

第二種方法，可以嘗試使用例如 Tinypng、智圖等工具再次壓縮圖片。這些工具會把圖片中的多余信息刪除并且壓縮，而圖像質量不受損失。

第三種方法，Google 研發了一種 Webp 格式，它的圖片壓縮體積大約只有 JPEG 的2/3，能節省大量的服務器寬帶資源。比如 Facebook、Ebay 還有我們設計師常用的站酷圖片存儲都是使用了 Webp 圖片格式。

第四種方法，瀏覽器和服務器握手時需要下載網頁所調用的圖片資源，那么如果一個網站有一百張圖片的話，瀏覽器和服務器就得握一百次。第一會耗費服務器資源，第二訪問速度就會慢一些。所以前端工程師們有一種做法，就是把網頁中所使用的圖片拼成一大張 png。然后每個調用圖片的元素都調用這張圖片然后分別位移一點兒，顯示的那塊區域移動到一大張圖片中所需要的那個圖像。

△ 在線壓縮工具Tinypng網站

4. 按鈕

按鈕的風格在過去的十幾年發生了很大的變化，由一開始的「斜面與浮雕」風格過渡到后面的「擬物風格」，現在更流行的是扁平風格。如果按鈕在一張圖片中，為了不影響圖片的美觀性，會去掉填充只保留邊框，這種設計方式叫做幽靈按鈕。注意在設計按鈕時記得同時設計好按鈕的鼠標懸停、按下狀態。

△ 不同時代下不同的按鈕風格

5. 表單

在網站設計中我們經常需要使用一些輸入框、下拉菜單、彈窗、單選框、復選框、編輯器等。這些都是系統級的控件，一般是直接調用系統設計的。但是系統設計有時不能滿足我們的要求：系統內置的表單高度不夠，點擊起來不舒服；不符合網站整體設計的品牌感等。那么我們可以通過 CSS 給這些表單增加樣式，包括顏色、大小、內外邊距等。所以我們遇到涉及到表單的需求時也可以進行自定義設計。

△ 表單不同風格的設計 UIDE Kit by Mateusz Dembek

6. 柵格

我們把整體寬度定義為 W。然后整個寬度分成多個等分單元 A。每個單元 A 中有元素 a 和間距 i。所以他們之間的關系就是 (A×n)-i=W。當然每個應用的尺寸不止可以整除成一種柵格，這就要看我們內容排版的疏密程度了。之后，我們將過多內容的柵格和另一個柵格相加得到更大的排版空間；其他元素都須老老實實呆在自己的柵格內，這樣就完成了一個布局非?？茖W的設計了。 比如：

柵格系統具體有以下優勢：能大大提高網頁的規范性。在柵格系統下，頁面中所有組件的尺寸都是有規律的。另外，基于柵格進行設計，可以讓整個網站各個頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗。

△ 網站的柵格化會使網站看起來更有秩序感

7. 適配Retina屏幕

2012年蘋果發布了 Retina Macbook Pro，Retina 屏幕的電腦占有量越來越高了。Retina 屏幕簡單地說就是屏幕密度是傳統屏幕的兩倍，擁有更大地清晰度。甚至可以滿足我們視網膜最高的識別度，所以也叫視網膜屏幕。這種屏幕下我們設計的安全距離大約為1000像素的網站就顯得非常粗糙了。所以如果我們現在 Retina 屏幕下顯示一個400X300PX的區域，實際上我們需要提供給前端一張800X600PX的切圖才行，因為 Retina 屏幕一個點頂過去兩個像素。那么我們的用戶是視網膜屏占比更多的用戶，比如設計師群體，那怎么兼顧高清屏幕和普通屏幕呢？

首先我們需要以視網膜屏幕大小完成設計稿，建議是傳統設計稿的兩倍。之后切出兩套切圖（非 Retina 屏幕用戶如果也加載雙倍大小的資源會很慢），普通的切圖命名為如logo.jpg，Retina切圖命名為logo@2x.jpg。前端用代碼來識別，如果屏幕是 Retina 就加載雙倍尺寸，不是則加載普通尺寸。前端可以使用 Retina.js（https://retinajs.com/）提供的技術進行識別。

8. 自適應與響應式網站

我們看到有些網站使用電腦端或者手機端甚至 iPad 去瀏覽時體驗都非常好。這就需要我們為了用戶體驗而進行網站的自適應或響應式布局了。響應式與自適應的原理是相似的，都是通過代碼檢測設備屏幕寬度，根據不同的設備加載不同的 css。

自適應網站

自適應網站的設計稿是一致的，但是設計稿需要考慮屏幕變小時的變化方式。比如一個網站的內容有5個區塊和4個間距，那么如果寬度縮小成900時需要如何變化，這就是自適應布局。比如站酷網、Dribbble 等網站都采用了自適應布局。

響應式網站

響應式網站則需要設計不同版本的設計稿，然后根據不同的設備提供不同的 CSS 樣式。比如判定你設備的寬度是750px，那么網站就知道你使用了手機來訪問，就會給你導入一份手機才有的樣式；如果是電腦的寬度就給你導入電腦的 CSS 樣式。對于設計師來說，自適應需要考慮網站在不同設備寬度下的整除與排版；響應式則需要設計電腦、平板、手機等至少三套設計稿（但這三套設計稿的內容是一致的）?？傊赃m應和響應式都是網站為了用戶體驗所適應瀏覽設備而做出的努力。

適配的規范

手機方面：適配手機頁面時，我們一般以 iPhone 為畫布標準。原因是 iPhone 相對顯示比較清晰，并且要求較高。而且用戶占有量也很高。在適配時我們一般以750x1334px尺寸為主，然后將網站導航改變為手機 APP 常常使用的漢堡包+抽屜式導航的形式。同時網站里的按鈕也需要變為手機 APP 中我們看到的左右幾乎滿屏的按鈕，并且每個按鈕要大于88PX，方便手指的點擊。字體方面，我們要把網站的字體全部改為蘋方字體，并且字號設置為24PX以上，渲染方式設置成銳利。英文則需要使用 SF-UI 代替。也就是將網站改變成一個類 APP 的手機網頁，這樣才可以保證手機用戶體驗良好。如果用戶使用安卓手機，那么前端代碼則會基于設計稿的設計適度加大圖片與間距來適應安卓屏幕。

iPad：iPad的尺寸為1024×768、2048x1536px等，無論怎么變基本與電腦屏幕尺寸類似。所以在 iPad 上瀏覽網頁是基本舒適的。因此，很多網站并沒有專門為 iPad 做適配，如果我們希望 iPad 用戶用的更爽，可以從文字大小（24PX以上）、按鈕大?。?8PX左右以及以上）、交互形式（抽屜式導航、導航不隨屏幕滾動）等方式入手。

△ 不同設備的注意事項

總結

無論您面對的項目是 To C 的還是 To B 的網站產品，我們都應該首先確立設計風格 > 尋找設計素材 > 建立情緒板 > 完成視覺稿 > 切圖標注 > 建立視覺規范 > 進行項目走查。

如果設計一般網站的頁面，可以按照1920 X 1080px尺寸設計。每屏高度900px，字體使用宋體12px、無和微軟雅黑 14-20、Windows LCD。Banner 盡量滿屏，但是圖片需要按照4:3或16:9等比例來設計。做網站時可以建立柵格以更好地進行自適應和響應式布局，我們也要為超鏈接和按鈕設計不同的相應鼠標的狀態；另外我們也可以多多嘗試在網站設計中加入視差滾動、雪碧圖動畫等好玩的交互。

如果設計手機端的頁面，可以按照750X1334PX尺寸設計。字體使用蘋方24PX以上、銳利。英文字體使用SF UI。按鈕和點擊區域需要大于88PX方便手指點擊。并且頭部需要預留出微信或瀏覽器的導航區域。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

最近在做一款工具類軟件，主要涉及表格的設計，邊工作邊整理了一些表格的設計樣式和原型圖，拿出來與需要的人分享。歡迎與我交流，有需要原型的小伙伴也歡迎在下方留言。

表格樣式一

表格樣式主要分為兩大類，第一類表格中通常以一行為組，操作均是以組為單位進行。此類表格優點是簡單直觀，操作感強，可提前設定好計算公式；缺點是對于某一數據的批量操作較為復雜，不方便自定義復雜計算。

常用于信息展示，無需復雜計算的網頁和C端界面中。

表格樣式一：縫隙

第一類表格以行為一組，表頭通常固定在最上端不參與滑動，現代設計為了美觀通常也沒有單元格的線框，設計時為了更直觀的體現一條數據，可以在每條數據之間留一個縫隙。

表格樣式一：斑馬線

或者用斑馬線形式更直觀的展示數據，避免用戶可能看串行的對不齊數據的情況。

表格樣式一：按鈕

為了頁面的簡潔可以將上端按鈕盡可能減少，整個表格上端原則上保留批量操作功能按鈕，對于單行的操作按鈕可以放置在單行中懸浮展示。

表格樣式一：拖拽

因為單行是一個模塊，當有需要調整順序時可以支持整行的拖拽操作。

表格樣式一：分頁1

當內容較多需要除了無限滾動外，還可以選用分頁的方式，目前較為常見的可以選擇如下方式。

表格樣式一：分頁2

若不需要突出頁碼，主要查看都在第一頁上時可以考慮將放在角落里，到達首頁和到達尾頁根據產品需求決定是否使用。

表格樣式一：搜索

搜索功能考慮到用戶需要手動輸入，很難保證精準搜索，原則上所有搜索均為模糊搜索，必要精準搜索的地方使用篩選功能，給用戶提供篩選選項。通常上端搜索欄不被限定搜索范圍，可以全部搜索。

表格樣式一：分項搜索

對比必要的分項搜索功能可以對應到各個列中，同時輸入時可以給出聯想結果，仍然應該設計為模糊搜索。

表格樣式一：篩選

對于各個列中必須精準搜索的數據可以設計為篩選功能，可為用戶提供可勾選的篩選信息。

表格樣式一：高級篩選

對于部分列有篩選需求的情況，可以設計彈框輸入篩選條件，也可以在此設計復雜篩選條件，篩選規則在上端展示，可以更直觀的看到已篩選項。

表格樣式一：可編輯單元格提示

表格中存在可編輯單元格和不可編輯單元格時，為了界面的一致性和美觀性，可以考慮鼠標懸浮時給出可編輯單元格的編輯框，區分兩種不同單元格樣式。

表格樣式一：信息預覽（浮窗）

對于匯總表中如有預覽詳情的需要，同時對于數據僅為查看沒有修改需要的時候可以考慮懸浮提示將主要數據進行展示。

表格樣式一：信息預覽（彈窗+蒙板）

對于詳細有部分屬性修改需求，對于細節沒有修改需求的，可以考慮在一側彈出彈框進行展示和修改屬性。（如報價單表格信息，報價單審核狀態的可以在此修改，詳細信息仍在明細表中修改）

表格樣式一：信息預覽（折疊）

折疊模式的使用環境基本等同于彈出模式，可根據設計風格進行選擇。

表格樣式一：信息預覽（彈窗）

單獨彈出窗口在需要有多項數據進行對比查看時可以選用，彈出窗體操作通常只考慮狀態改變，不建議其他數據在此更改。

表格樣式一：信息預覽（變導航）

此種展示方式，對于需要查看和修改較多數據的需求可以選中，匯總表將收為類似于導航欄的模式，數據可以精簡只展示關鍵數據，彈窗可設計復雜操作，可以包含明細的修改等功能。

表格樣式一：信息預覽（變窗體結構）

通過減少列表高度流出信息展示空間，建議兩部分在一屏內展示可分別滑動或翻頁，匯總表信息完整，彈出窗體也可進行復雜操作設計。

表格樣式一：信息預覽（自定義表頭）

自定義表頭設計可以將此操作藏在較明顯的位置同時可以保證界面的簡潔。

后續

上篇中主要展示了一些表格樣式一的一些操作習慣，除此之外還會在很多專業工具的設計中用到另一種展現形式類似于EXCEL表格。

歡迎各位做過類似項目的產品經理與我多多交流，如有需要原型的小伙伴可以在下方留言，我再將下載地址放出。如果大家喜歡這篇文章我會繼續完成下篇的內容。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

最近在做一款工具類軟件，主要涉及表格的設計，邊工作邊整理了一些表格的設計樣式和原型圖，拿出來與需要的人分享。歡迎與我交流，有需要原型的小伙伴也歡迎在下方留言。

表格樣式一

表格樣式主要分為兩大類，第一類表格中通常以一行為組，操作均是以組為單位進行。此類表格優點是簡單直觀，操作感強，可提前設定好計算公式；缺點是對于某一數據的批量操作較為復雜，不方便自定義復雜計算。

常用于信息展示，無需復雜計算的網頁和C端界面中。

表格樣式一：縫隙

第一類表格以行為一組，表頭通常固定在最上端不參與滑動，現代設計為了美觀通常也沒有單元格的線框，設計時為了更直觀的體現一條數據，可以在每條數據之間留一個縫隙。

表格樣式一：斑馬線

或者用斑馬線形式更直觀的展示數據，避免用戶可能看串行的對不齊數據的情況。

表格樣式一：按鈕

為了頁面的簡潔可以將上端按鈕盡可能減少，整個表格上端原則上保留批量操作功能按鈕，對于單行的操作按鈕可以放置在單行中懸浮展示。

表格樣式一：拖拽

因為單行是一個模塊，當有需要調整順序時可以支持整行的拖拽操作。

表格樣式一：分頁1

當內容較多需要除了無限滾動外，還可以選用分頁的方式，目前較為常見的可以選擇如下方式。

表格樣式一：分頁2

若不需要突出頁碼，主要查看都在第一頁上時可以考慮將放在角落里，到達首頁和到達尾頁根據產品需求決定是否使用。

表格樣式一：搜索

搜索功能考慮到用戶需要手動輸入，很難保證精準搜索，原則上所有搜索均為模糊搜索，必要精準搜索的地方使用篩選功能，給用戶提供篩選選項。通常上端搜索欄不被限定搜索范圍，可以全部搜索。

表格樣式一：分項搜索

對比必要的分項搜索功能可以對應到各個列中，同時輸入時可以給出聯想結果，仍然應該設計為模糊搜索。

表格樣式一：篩選

對于各個列中必須精準搜索的數據可以設計為篩選功能，可為用戶提供可勾選的篩選信息。

表格樣式一：高級篩選

對于部分列有篩選需求的情況，可以設計彈框輸入篩選條件，也可以在此設計復雜篩選條件，篩選規則在上端展示，可以更直觀的看到已篩選項。

表格樣式一：可編輯單元格提示

表格中存在可編輯單元格和不可編輯單元格時，為了界面的一致性和美觀性，可以考慮鼠標懸浮時給出可編輯單元格的編輯框，區分兩種不同單元格樣式。

表格樣式一：信息預覽（浮窗）

對于匯總表中如有預覽詳情的需要，同時對于數據僅為查看沒有修改需要的時候可以考慮懸浮提示將主要數據進行展示。

表格樣式一：信息預覽（彈窗+蒙板）

對于詳細有部分屬性修改需求，對于細節沒有修改需求的，可以考慮在一側彈出彈框進行展示和修改屬性。（如報價單表格信息，報價單審核狀態的可以在此修改，詳細信息仍在明細表中修改）

表格樣式一：信息預覽（折疊）

折疊模式的使用環境基本等同于彈出模式，可根據設計風格進行選擇。

表格樣式一：信息預覽（彈窗）

單獨彈出窗口在需要有多項數據進行對比查看時可以選用，彈出窗體操作通常只考慮狀態改變，不建議其他數據在此更改。

表格樣式一：信息預覽（變導航）

此種展示方式，對于需要查看和修改較多數據的需求可以選中，匯總表將收為類似于導航欄的模式，數據可以精簡只展示關鍵數據，彈窗可設計復雜操作，可以包含明細的修改等功能。

表格樣式一：信息預覽（變窗體結構）

通過減少列表高度流出信息展示空間，建議兩部分在一屏內展示可分別滑動或翻頁，匯總表信息完整，彈出窗體也可進行復雜操作設計。

表格樣式一：信息預覽（自定義表頭）

自定義表頭設計可以將此操作藏在較明顯的位置同時可以保證界面的簡潔。

后續

上篇中主要展示了一些表格樣式一的一些操作習慣，除此之外還會在很多專業工具的設計中用到另一種展現形式類似于EXCEL表格。

歡迎各位做過類似項目的產品經理與我多多交流，如有需要原型的小伙伴可以在下方留言，我再將下載地址放出。如果大家喜歡這篇文章我會繼續完成下篇的內容。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

作為設計師，我們需要很好的控制用戶在使用產品過程中，他們瀏覽的路徑，需要了解我們的眼睛是如何處理信息，本周我會結合我之前學習的一些知識和大家分享下視覺動線這個概念，以及如何在設計中進行運用！學習過程紅大家任何不明白地方，歡迎加我微信交流:uiskyss

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

頭腦風暴是創意點子常用的方法，那么從用戶出發的腦暴有什么不同？從過去幾年用研發現向產品方案轉化的腦暴案例中，總結成功與失敗經驗，提煉出目前最優的流程與執行技巧，一起來提高創意點子產生的成功率吧！

關于新產品創新的成功率，有這樣一組數據：3000個原始想法，能變成300個成熟想法，300個成熟想法能產生125個項目，其中大概有9個能進入早期開發，4個能大力開發，最后成功的只有1.7個。（來自彭肯恩博士的研究）

大多數點子的失敗，可能的原因有很多，比如疏于對趨勢的關注和研究、缺乏理論的突破、缺乏執行力、難以逃脫組織思維慣性等等（來自創新管理課程），其中還有一個常常提到的原因：離用戶太遠。在最初想點子的時候，由于不知道用戶需求、腦補用戶需求、片面地針對用戶表面部分需求卻忽視深層需求來規劃，就會導致產品或功能開發完成以后，不知道目標用戶、目標場景，也不知道對用戶的價值，最終產品也會因用戶不去使用，而導致創新失敗。

作為用戶研究者，洞察和分析用戶真實需求是我們的本職和專長，但如何把這些用戶研究的發現以更有效的方式轉化為「靠譜」的好點子，則需要與團隊里各個角色一起不斷的努力。從14年起，我們在一次次從用研發現到產品點子的頭腦風暴實踐中，不斷優化流程、評估效果，形成了現在的「從用戶出發的創意腦暴」流程，在這里分享給大家。

傳統的頭腦風暴法（brainstorming）相信大家都熟悉，就是一組人圍在一起，隨意的將腦中與主題有關的見解提出來，再將大家的見解分類整理。但在實際執行的過程中，頭腦風暴的現場卻常常交錯著討論、腦補、推理、玩笑等等，然后時間很快過去，卻沒有產出「靠譜」的點子。從用戶出發的創意腦暴，是以典型用戶故事為線索，輕松、的產出點子的頭腦風暴過程：一方面，線索契合用戶真實完整的需求場景，點子變得更容易想也更符合用戶需求；另一方面，通過流程上的細節設計，可以更的激發點子產生。

整個過程分為8步。雖然常常的情況是一個人想不出方案，就馬上拉人一起腦暴發散，但其實腦暴前的素材和流程準備，以及達成共識對腦暴的最終效果起到了至關重要的作用。

第一步：確定一個不遠不近的腦暴主題

產生好點子的前提是問對問題，問對問題需要跳出眼前的思維限制，但又不要太天馬行空。要做到這點并不容易，這要求腦暴的組織者在一開始就想清楚團隊真正要解決的問題是什么，而不僅僅「產品的某個功能眼下要怎么做」這種具體問題（這樣的問題聽起來就讓人疲憊）。舉個例子，當眼前的業務問題是想出一些裝扮功能，如果把腦暴的主題定為「裝扮還可以做哪些新功能」，思路就會陷入現有的裝扮流程里，這時點子的方向已經被具象和限制，有時甚至是無解的；如果定為「如何幫助用戶通過裝扮來表達自己」（前提是用戶真的用裝扮在滿足這一需求）就會更合適一些，這樣就可以去想如何通過裝扮表達自己的心情、興趣、狀態、、所屬群體身份等等，思路打開的同時又與業務結合；而如果僅僅是「用戶如何表達自己」，想出的點子，就會太泛，脫離業務。

第二步：有選擇的邀請團隊成員

首先，有選擇的邀請樂于分享、樂于溝通、思維活躍的人，他們會自然而然的產生想法，互相交流，否則每個人盯著自己的點子說著自己的故事就會喪失一組人在一起的意義；其次，在邀請成員時，不建議只有自己組的組員（雖然這樣比較方便），因為參與角色的多樣性一方面可以相互激發創意，同時也讓點子在收斂階段能得到更多元的評價（比如工程師對點子可行性的評估就有其專業的判斷）。在人數上，雖然6-8人是腦暴的建議人數，但因為我們的腦暴流程會讓點子批量產生，人數的增加會直接導致后續點子收斂時效率的降低，所以目前來看建議6人為佳。

第三步：準備簡潔又有代表性的用戶故事

用戶故事的準備是腦暴的一個關鍵，吸引著我們不斷的去改進和探尋。過去，我們也有過一些不太理想的嘗試：讓參與者分享自己的故事（如畢業生如何找房），這時很容易就根據主觀和片面的需求想點子；給出一些用戶需求的詞讓大家聯想（如不孤單），這時參與者對著普通又太正確的詞已經想過很多遍，很難進入狀態；給出一系列相關故事（如多個類似的故事）幫參與者發想，這時呈現的信息對參與者來說已經過于復雜，傳達的效率很低；給出的每個故事都帶有用戶痛點（如粉絲給明星發消息得不到回應），這時參與者往往會依照故事中的情節去推理，絞盡腦汁非常辛苦，卻忽略了沒有痛點的地方藏著用戶的真實需求（如粉絲默默的把想對明星說的話記錄在手機備忘里）。

所以，目前的做法是：

• 對調研中收集到的大量用戶原始故事進行分析；
• 根據分析點之間的相互關系，按照一定的維度把分析點組織起來，比如組織成幾類典型的用戶畫像、使用產品的幾類動機、幾個場景、幾步行為流程等等，組織維度符合 MECE（ Mutually Exclusive Collectively Exhaustive，相互獨立、完全窮盡）原則即可；
• 按照組織后的結構（如畫像/動機/場景/流程等），把同一個類別下多個反映分析點的真實故事組合改編成一個典型故事。

舉例來看，研究粉絲的過程中，我們發現有的粉絲會組團給偶像投票打榜并感嘆「團結就是力量」、有的粉絲會在活動現場和他人一起大聲應援并覺得暖心、有的粉絲在 QQ群和其他粉絲一起討論相互訴說并且感覺很棒。這些故事都反映出粉絲對于「群體」、「團結」的訴求，將這幾個不同人的真實故事綜合起來，就形成了一個特別在意「團結形象」的典型粉絲故事。這個「團結」的典型故事和「秩序」、「強大」等等典型故事一起反映了粉絲「群體形象」方面的訴求。

通過這樣的方式得到的典型故事不僅有真實故事的細節，而且嚴謹地反映用戶需求，信息量大，結構完整。腦暴參與者面對這些故事，就很容易理解，并聯想出更多符合用戶真實需求的點子。整個過程說起來簡單，但在實際執行時卻考驗著研究人員的大局觀、邏輯能力、洞察力、組織能力等等，整個研究過程有時可能會需要1-2個月。

第四步：設置嚴謹又輕松的流程

在腦暴流程上的設置上，主要的嘗試點在個人想點子和大家交流點子的方式和順序安排。如果大家同時一邊想一邊交流，會出現沒空思考或有人不認真想的情況；如果大家先寫再輪流說，會出現思考時獨立思考，交流時只關心自己的說法而忽視交流發散的情況。所以在嘗試了默寫式頭腦風暴（后文會詳細介紹）后，我們就沿用了這個鼓勵思考交流、弱化發言的腦暴方式。

另外要注意的一個點是，不用在流程上對想點子的思路有過多的限制，比如告訴參與者「你可以先想什么再想什么」或「你想出的點子不能太抽象或太具體」，這種「急功近利」的做法會讓參與者困惑和緊張。相反的，應該要做的是讓他們放松，比如放一些音樂、擺一些零食等等，這樣更容易產生想法。

第五步：在正式腦暴前，達成共識

在腦暴前，向參與者說明本次腦暴的目的、主題、流程和規則，能夠幫助大家統一目標，提率。

頭腦風暴的四個基本規則在腦暴過程中要落到實處：

• 追求數量（可設置一個小榮譽激勵大家想點子）；
• 禁止批評（包括負面的表情或語氣詞都不能有）；
• 提倡獨特的想法（可以異想天開、天馬行空）；
• 綜合并改善設想（可以在別人的基礎上寫新的點子）。

組織者也可以給出一些用戶研究的發現，幫助大家建立概念、了解用戶。

第六步：默寫式頭腦風暴

默寫式頭腦風暴是在奧斯本頭腦風暴的基礎上改造而成的一種書面腦暴方法（具體操作方式如下圖）。從用戶出發的創意腦暴在此基礎上，增加了用戶的典型故事作為線索。在開始前，每個參與者會拿到3張用戶典型故事卡；在第一個5分鐘，每人針對3個故事各寫至少1個點子，貼在故事卡上，然后傳給右鄰；第二個5分鐘，每人從傳來的故事卡和前人的點子上得到啟發，再各寫至少1個點子，傳給右鄰；這樣直到故事傳完，就能得到至少6 x 3 x 6=108個點子。這也是為什么前面提到要控制參與者人數的原因，因為每增加1人，就會多一輪腦暴的時間，點子的數量會相應增加，在下一步分類交流時的工作量和時間也會直接增加。

第七步：點子現場收斂

在已經有了一百多個點子的情況下，現場投票可以快速把「好點子」篩出來。但由于在寫點子的時候，把想法準確的表達在一張便簽紙上并不是一件容易的事，所以在投票前，還是會有一個簡單的交流，讓大家了解彼此的點子，同時合并類似的點子。

投票分為感性輪和理性輪：感性輪是讓人眼前一亮的點子，每人3票；理性輪是可行或能有效提升業績的點子，也是每人3票。這樣兩個維度交叉出來就能得到既讓人眼前一亮，又具有可行性的點子。參與者多樣的背景也讓點子的評估更加全面。

第八步：點子的后續跟進

腦暴結束并不是點子的結束。最初的點子只是一句話或一個示意圖，從點子走向方案，還需要不斷地打磨交互、視覺、文案、邏輯、場景等等方面的細節；從方案到投入開發乃至上線，則需要綜合考慮優先級、人力、技術等更多方面的問題；在上線后，點子的可用性以及對業務的效果，也需要提前規劃和進一步驗證。

總的來說，從用戶出發的創意腦暴，在線索和流程設計上做出了一些嘗試，讓產生的想法更加符合用戶真實需求，以此來提高創新點子的成功率。但創新畢竟不是一件容易的事，在未來，我們也會不斷地嘗試和打磨這個流程，思考更好的方式，讓創新有跡可循。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

作為在即時通訊領域超越昔日霸主 qq，并成為第一大全民 app。微信在產品設計領域一直被奉為經典享受著無數贊美和模仿追逐。

但是我們用戶在使用產品過程中，難免對微信的某些設計產生疑問，有的設計可以說脫離了我們對用戶體驗的認知。

為什么會這樣呢？是否在微信這些「不友好」的設計存在其背后的深層次的邏輯呢？

以下我舉例10個點來分析這些「不友好」設計以及它背后的設計產品邏輯（個人思考猜想）。

1. 點贊評論為何要聚合，增加一個操作層級

朋友圈點擊操作 icon，出現評論和點贊兩個操作按鈕。如果要點贊評論還要點擊對應的點贊評論按鈕，為何不直接將點贊和評論按鈕放出來呢？

從用戶操作的性來看，現在的朋友圈這種設計方式不夠，多增加了一個操作路徑。微信這樣設計是有什么背后的深意和思考呢？

朋友圈的定位是分享生活，重點是分享而不是互動，如果將點贊和評論的入口直接放出來的話，用戶互動頻率變高，導致點贊者和評論者的特意的意圖性和含金量遠遠不如將兩個操作收起來的高。收起來的點贊評論所收到的贊美和互動會讓分享者更真心實意，同時也減少了消息通知的無效打擾。這樣整個朋友圈互動分享生態會變得更好。

2. 朋友圈為何不單獨為一個tab，而只是tab里面的一個模塊

在大眾用戶使用最多的兩個功能，一個就是對話，一個就是朋友圈了。但是朋友圈卻作為 tab3 中一個模塊，按照用戶高低頻操作來說，朋友圈完全可以另成為一個單獨 tab 了。

微信為什么這么做呢？我覺得如果微信朋友圈作為一個 tab 的話，那么微信真的變為了一個社交工具，而不是一種生活方式了。從格局緯度上說，生活方式的格局定義遠高于社交工具。同時朋友圈作為一個模塊，可以很好的將一部分流量分發到購物、游戲、掃一掃及小程序等模塊中。

3. 購物、錢包、游戲商業盈利強的產品為何都只是tab的一個小模塊

在互聯網產品中，幾乎所有產品的思路都是如何將產品做大，然后實現變現盈利。在中國用戶流量最大的 app 上可以有無限的變現玩法，向游戲、購物、支付這些都是強盈利的產品，而微信卻只以 tab 中的列表展示給用戶，這似乎不符合商業邏輯。

如果將購物、游戲、支付再升一級進行強化，那么微信給用戶的標簽和定位不再是生活方式，而變成了一個單純的賣貨、游戲、支付平臺，這樣的話可能會影響微信牢不可破的用戶認知和產品地位。

4. 朋友圈為何不支持gif

gif 圖通常是好玩有意思的圖，里面可以充滿各種梗，各種笑點。對于發朋友圈的人來說，發 gif 圖是用戶一個較大的需求。

在考慮用戶分享者的需求時，也同時要考慮朋友圈瀏覽者的用戶，如果做了 gif 圖，那么用戶在瀏覽朋友圈的過程中，很容易被 gif 動態所吸引干擾，影響瀏覽者瀏覽整個朋友圈的視覺焦點。有的用戶為了吸引用戶注意會故意發一些嘩眾取眾動態圖，吸引微信好友重點關注，這樣會導致瀏覽者體驗很差。

所以說用戶需求并不是都要做的，需要綜合考慮產品所有角色的所有需求和體驗。

5. 通訊錄作為一個超低頻的需求，為何作為第二個tab

在微信寸土寸金的頁面上，作為第二個 tab，無疑是代表著特別重要的地位，但是呢？這個 tab 內容都是和聯系人相關的。用戶進入這個頁面操作的頻率很小，為什么要將這么重要的位置給予通訊錄聯系人呢？

歷史原因，早期的微信版本就是一個即時通訊的 app，所以聯系人顯得比較重要，作為 tab2 是很正確的，這樣更有即時聊天軟件的認知。

隨著微信成熟之后，其他各個業務的進入，導致微信平臺的臃腫，為了避免微信產品的認知和意識形態的改變，畢竟微信認知還是要保留即時工具這個屬性，所以這個 tab2 一直保留。

6. 微信號為什么不能修改

很多用戶第一次設置微信號時，隨意取了，例如前任的拼音、以前手機號、很長隨意的字母等等，現在都有想改的需求。但是微信號只能設置一次，不允許修改。

• 微信號如果可以隨意修改，那么和 qq 昵稱一樣了，不具有唯一性和識別性，整個后端數據存儲會變得特別混亂。
• 很多用戶會在好多地方留下微信號（二維碼）以此聯系，如果可以修改的話，那么留下的微信號（二維碼）可能會作廢，這樣很影響添加微信的成功率和體驗，導致以后雙方添加為了保險都不敢用微信添加好友而轉用 qq 添加好友了。

7. 我的-相冊為何不叫我的朋友圈

朋友圈鼓勵發相片，發相片比單純的發文字的動態質量更高，所以呢，我的-相冊為何不叫我的朋友圈，如果改為了我的朋友圈，則更偏向動態發布。

8. 朋友圈為什么不支持分組查看

• 實現朋友圈分組，首先需要對所有微信好友分組，這就需要改變微信添加好友操作邏輯，而且維護分組成本特別高，使用起來是災難。
• 大部分用戶查看朋友圈是打發時間的需求。所以朋友發的內容對于他們來說，越多越好。增加分組功能，反而會降低內容的數量，讓用戶需要很多操作才能看完所有內容。
• 對于內容過濾的需求，已經提供屏蔽某人功能。
• 從內容分發上來說，增加按組來查看內容，很容易忽略掉其他分組的朋友產生的高質量內容。
• 朋友圈分組，會導致很多的好友動態無法被瀏覽到，影響朋友圈的數據，也影響朋友圈的互動性。

9. 為什么群發僅限200人

很多人有群發需求，希望可以將所有的好友群發消息，但是微信只支持200人群發。

這里也涉及到兩種角色：群發者和接收者。

現在群發的使用場景：二維碼宣傳、點贊請求、過年群發，微商定目標人群發廣告消息等等，這些對于接收者而言都是騷擾信息。

如果支持不限量群發，那么接收者的垃圾信息會變多，會被過度干擾。

10. 對話列表為何不能批量刪除

• 如果可以批量刪除，則微信對話的整體活躍會降低，批量的話聊天列表都刪了，后續和被刪者主動對話概率下降。
• 刪除為謹慎操作，刪除后聊天記錄不在。

總結

微信的設計邏輯大體上都分為兩個方面：

• 所有角色整體考慮，在考慮角色 a 的使用需求，同時還要角色 a 的使用需求給角色 b、c 亦或平臺所帶來的影響（這點很重要，也是我們在做設計的時候很容易忽略的）。
• 整個產品的定位以及平臺生態考慮，考慮需求或設計時先全局再局部。

  藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。