APP中搜索框的樣式以及區別

云和數據西安中心 2018-07-09 13:24:29

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

前言

搜索框是 app 內最常見的控件之一，可以幫助用戶快速又精準找到期望的內容與功能。不同的使用場景下，根據頁面中搜索的重要程度，搜索框也有著不同的樣式。

下面就和大家聊聊常見的四種樣式：一級tab、頂部搜索、搜索 icon 、隱藏式搜索。

01.一級tab

位于屏幕底部的導航，搜索作為一個獨立的入口，適用于搜索場景相對重要的 app 。設計的時候通常會使用“放大鏡” icon ，簡單、識辨度高符合用戶已有的認知。

部分 app 會在一級 tab 中設置“發現”入口來承接搜索功能，在“發現”頁面中，由于增加其他運營內容導致流量被分攤，搜索相對就會弱一些。

一級 tab 相比其他方式，搜索過程更方便，點擊操作更容易。

例如在貝殼找房 app 中，“找”作為該 app 的重要功能單獨設立一個入口，用戶搜索時無需進入二級頁面中去完成條件篩選，搜索過程更方便、一目了然。

在篩選中選擇總價、房型、特色、朝向等條件后，點擊“開始找房”按鈕進入搜索結果頁。如果在搜索過程中退出，再次回到該頁面后，仍會保留上一次操作的結果，方便下次修改和查找。

貝殼找房和 App Store 搜索入口在底部導航，這個位置符合拇指熱力區操作，屏幕偏下的位置單手持握手機的時候更容易點擊。

需要注意的是底部導航的數量有限。在底部導航超過5個的時候不建議在底部再增加入口，過于擁擠不適合用戶點擊。

02.頂部搜索

位于屏幕頂部的導航，讓用戶打開 app 想要搜索時能快速找到，符合用戶期待，適用于當前搜索頻率高的頁面。當用戶瀏覽的時候，搜索框也會懸停在頂部，不斷引導用戶進行搜索。

通常以搜索框的形式存在，為了突出搜索框，搜索框會有淺灰色的底/描邊/投影、帶顏色的導航襯底或者有明顯的提示語。

不同類型的 app 搜索功能也不一樣，除了文本搜索，淘寶有圖片搜索功能，方便拍圖找物；蝦米音樂還有語音搜索功能，方便查歌找曲。

頂部搜索相比其他方式，搜索入口更顯眼，為轉化提供更多流量。

例如在天貓 app 中，當用戶進入的時候，部分是帶著明確的購買意圖，這時就需要讓他們快速找到搜索功能。所以天貓 app 把搜索框置頂在導航欄上，即使是在上滑的時候，也是在頂部。

在頂部搜索框內推薦了客廳地毯，根據用戶的歷史搜索行為觸發的引導，在用戶已經搜索的基礎上，轉化率會大大的提升。 App 運營還會根據熱點、時節更換搜索框的預設關鍵詞，能吸引更多的點擊量。

需要注意的是結合場景去使用搜索功能，例如支付寶，剛進入 app 用戶可能找不到想要的功能在哪里，這時候搜索框置頂讓用戶方便去查找。但是當用戶在向下瀏覽的時候，用戶想要瀏覽推薦內容，搜索功能相對減弱，為了減少空間占用，搜索框變搜索 icon 。

03.搜索icon

使用 icon 作為搜索點擊區域，減少導航欄占用，弱化了搜索功能，適用于當前搜索頻率較低的頁面。設計的時候通常也會使用“放大鏡” icon 。

搜索 icon 相比其他方式，搜索位置更靈活，可以單獨出現，也可以和其他功能組合。

當搜索功能在頁面中不再是高頻使用功能時，僅通過搜索 icon 讓用戶知曉有搜索功能存在即可。由于搜索 icon 占用區域少，可與其他功能組合出現，例如 in ；也可單獨出現，如貓眼，僅靠圖標標紅來提示用戶此功能。

需要注意的是在同一個 app 的不同頁面中，由于對搜索功能的需求不同，有些頁面會選擇搜索 icon ，有些頁面會選擇頂部導航。例如天貓 app ，在品牌頁面中，對于用戶即將瀏覽的內容都是根據用戶行為產生和運營推薦的，自然搜索功能也會弱一些，采用搜索icon 即可。天貓首頁強調引導用戶去搜索、購買商品，采用頂部搜索框。

04.隱藏式搜索

位于屏幕頂部的導航，以搜索框的形式。只會在用戶需要的時候才出現，平時不會打亂用戶的行為。微信首頁的搜索功能在初始進入時是隱藏的，當用戶下拉頁面時，頂部搜索框才會出現，這就和使用場景密不可分。

微信首頁（iOS端）剛進來的時候主要以處理最近回復為主，搜索功能相對弱化，在用戶瀏覽列表的時候，搜索框也不會懸停在頂部導航。而在第二個 tab 通訊錄列表中，主要以查找聯系人為主，搜索功能一開始進入就顯示在列表頂部。

總結

絕大部分的 app 里帶有搜索功能，搜索功能可以幫助用戶快速找到所需內容，減少時間成本。搜索也是提高流量的重要入口，吸引用戶注意力。

但想要搜索在頁面中恰如其分的應用并不那么容易，需要引導用戶行為和分析使用場景，這就依賴我們前期大量樣式積累，才能輸出合理的設計方式。

我們再來回顧文中提及的四種搜索框樣式：

1.一級 tab ：位于屏幕底部的導航，搜索作為一個獨立的入口，適用于搜索場景相對重要的 app 。

2.頂部搜索：位于屏幕頂部的導航，讓用戶打開 app 想要搜索時能快速找到，符合用戶期待，適用于當前搜索頻率高的頁面。

3.搜索 icon ：使用 icon 作為搜索點擊區域，減少導航欄占用，弱化了搜索功能，適用于當前搜索頻率較低的頁面。

4.隱藏式搜索：位于屏幕頂部的導航，以搜索框的形式。只會在用戶需要的時候才出現，平時不會打亂用戶的行為。

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

UI新手到底先該掌握哪些技能如何入門

云和數據西安中心 2018-08-02 10:21:57

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

深知想做UI這行卻不知道如何開始是很多小伙伴們的困擾。雖然很多朋友都問過其他人,或者問過很多大神:“我很喜歡UI,可是我應該怎么開始?很多小伙伴對UI特別感興趣，就是不知道怎么開始，怎么選擇自己的工具，怎么選擇公司等等都非常迷茫，希望這篇文章能為小伙伴們解答疑惑。

技能選擇

選擇什么樣的工具，該用什么軟件，是大多數小伙伴糾結的一點，學習是需要成本的現在我們熟知的軟件大致如下：

熟悉的朋友從圖中可以看出，Adobe系列工具仍是最主流的設計工具，下面為大家一一介紹這些技能的優缺點。

Photoshop

優點:最主流的設計工具,處理圖片強大,調色功能強大,無論是設計圖標還是設計界面一定是最佳選擇。無論身居什么職位的設計師,都必須具備的基本技能。運用熟練后,即使繪制3D強質感效果也不是問題

缺點:需根據尺寸設計,無法繪制矢量圖形(隨意放大縮小),排版功能弱。

Ai

優點:強大的矢量圖設計工具,繪制ogo、海報等極為優秀。圖標和界面功能同樣優秀,而且輸出為矢量圖,可以根據尺寸不同放大縮小。同樣不會第三方草圖設計工具,還可以用A來設計交互草圖。運用熟練實現3D強質感無壓力。排版功能相對也較強大。

缺點:圖片處理為零,濾鏡效果能力較差,處理高質量界面和圖標教PS和其他工具會辛苦很多,從像印刷尺寸變成像素尺寸較痛苦。

AE

優點:強大的視頻、交互動效工具,可以輕松實現界面交互動畫及,和開發人員溝通成本大大降低,同時可以用視覺圖來為自己意愿說話。同時可以通過學AE來做視頻,加。國內最早運用并推廣的是郁悶的雞大神。

缺點:無法設計界面、圖標、繪制圖形,只能做交互動效和視頻處理。

Flash

優點:矢量動畫的利器,制作矢量動畫簡單方便。通過學習高級的語言,可以設計非常絢麗的交互網站,早些年最流行的酷炫交互網站都是由 FLash嵌入執行。同時也可以制作動畫片。設計卡通類圖標簡單快捷。

缺點:對Ui設計功能較少,界面設計相對困難,圖形處理效果少。語言學起來相對高級,同樣不適合設計師們。不建議UI設計師學習。

indesign

優點:排版神器,雜志、書籍、報紙等排版快捷方便,上手簡單,可以繪制簡單的矢量圖形

缺點:主要是平面設計師工具,不建議Ui設計師學習。若不從事大量排版工作不建議學習使用。

Dreamweaver

優點:設計網頁工具,同時編寫查看代碼同時設計網頁,嵌入fash、管理網站后臺等都方便快捷。也可以進行圖形繪制。

缺點:主要是網頁設計師工具,不建議UI設計師學習。而且,你真的想學代碼么？

Adobe Premiere

優點:視頻剪輯工具,針對電影、短片、視頻等進行編輯功能強大,早起民間流行用作惡搞軟件,重要職責是電影的剪輯。

缺點:純以視頻媒介為主,不是作圖工具,果斷放棄。

Adobe Firewokes

優點:網頁設計工具,早期的網頁設計利器、切圖神器。對圖形繪制和界面繪制也很優秀,網頁設計三劍客之一。

缺點:如果不是老用戶,不建議學習,它的功能被PS和AI逐步替代,已經淡出這個時代。

Core DRAW

優點:結合了AI和ID,是矢量圖設計工具,同時也有強大的排版功能。大部分地區仍然在使用這個工具,運用簡單易懂,而且能導入 Adobe公司的各種軟件工具。

缺點:這款工具爭議較大,中小公司仍有使用,但是大互聯網公司是沒有的。雖然功能很多,但是多不代表精,所以,自己定的目標高一些,放棄這款軟件吧

Sketh

優點:最近尤為火爆的設計工具,各大國內外公司都已經開始試用并融合。對于APP應用界面來說,它絕對是利器,方便快捷功能強大,沒有繁多不必要的功能。扁平風格圖標更是快捷便利,尤其最近的版本3,功能進一步提升。非常推薦

現在的設計師們學習,相信會成為新一代主流設計軟件。

缺點:擬物風格圖標界面相對不適應,而且現階段只有蘋果系統,微軟系統暫時沒有。除了設計APP界面,其他功能基本為零。

手繪

優點:是的,不借助任何軟件,只要你有強大的美術功底,運用各種畫筆工具也可以“設計”出很多精美的圖標界面,通過掃描等方式展現給用戶,風格特意且新穎,工業設計師的必備能力之一。要知道,會軟件的千千萬。

缺點:當然在國內,只有這門手藝而走進互聯網UI設計師行列的還是少數,所以還是乖乖地挑起一個工具好好學習吧。

core painter

優點:各種筆刷配合手繪板,讓你筆下圖標界面優美呈現,尤其對游戲UI設計師來說,是強大與PS的軟件,因為他優秀的功能專門為手繪而定制。

缺點:如果并不打算好好磨練自己手繪能力的話,盡量避免學習此軟件,因為PS基本上都能實現你想要的功能,不要學的太雜,專精

3D maxS:

優點:一提到這個軟件,絕對是有話題的軟件。誰都沒有想到,用3D做圖標可以成為主流,而且不得不說的是,用3D做的圖標無論質感還是光影實現起來快捷、方便、強大,也許一個小時的設計已經完全超越10個小時的PS。3DU設計師,可以說是他掀起3D做圖標的風潮。

缺點:強大在于擬物化設計,界面設計較差,上手較難,畢竟二維和3D還是兩個

技能專修

介紹了這么多軟件，小伙伴們也應該有所了解，為了更加清晰明確，采用大家更易懂的以滿分10分為劃分，高低比重為分值

10分：熟練、掌握、專精

9-6分：掌握、熟練

5-3分：掌握

2-0分：了解即可

所以，小伙伴們，無論是怎么樣先從Photoshop學起吧，雖然其他軟件都有強大之處，，但是需要團隊配合，在未來我們掌握了這些技能，那么再可以研究其他工具，提升自己。

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

如何開始學UI？入學UI的五大問題！

UI設計七緊 2018-06-26 16:43:55

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

1.我想學UI，請問看什么書啊？

2.我想學UI，請問哪個培訓機構比較好？

3.我想學UI，請問如何入手？

4.我不是設計專業，但是我還是想學UI，請問如何系統學習？

5.我不管，我就是要學UI，請您給點兒建議。

.........

上述的問題，我一天能收到好幾個，那么今天我就詳細的寫一寫如何開始學UI吧。

如果你連這篇文章都看不完，你還告訴我你有恒心學好UI？

關于作者本人，大學時曾經兼職某培訓機構PS講師，對設計培訓行業了解一二。自己是非科班出身純自學無培訓經歷工作三年的每個月還完信用卡就感覺身體被掏空的普通UI設計師。

好了言歸正傳：

一、你為什么想要學UI？

用戶界面（User Interface）是指一切可供用戶和系統進行交互操作的介質的綜合。

在當下這個時間點，一提到UI，大家其實會不由自主的指向移動端app設計而忽略UI的其他形式。網頁、手機 app、pad app、車載系統，智能冰箱的控制窗口、智能電視的操作系統界面等等等等，其實都是UI的范疇。

各位現在勵志想學UI的同學們，不妨捫心自問一下，你為什么想學UI？

我綜合分析了幾個周圍朋友和私信我的同學的真實案例，答案無非只有以下幾種：

1.UI設計工資相對較高。

2.UI設計入門相對容易。

3.自我感覺UI設計還挺有趣的。

郭德綱有個段子說得好，一個人賣盆，結果賣了兩個月發現不掙錢，然后就去賣豬肉了，從此以后再也沒有賣過盆，這是正常人的擇優手段。但是還有一個人賣盆，結果賣了兩個月發現不掙錢，于是就去賣肉了，然后用業余時間繼續賣盆，那這個人是真的喜歡賣盆，他對賣盆這個事情有著天然的興趣。

這樣吧不然，為了檢驗你是不是真的喜歡設計，我這里先推薦諾曼的那四本《設計心理學》，這是相對來說不那么枯燥乏味的設計方面專業書了，算是一種科普性質的，什么行業看了都沒錯。你先去啃下來，如果中途沒有打瞌睡并且能夠看個大致明白并且覺得還挺有意思的，那說明你可以具備一定的自驅力，可以去開始著手學UI。

自驅力是最重要的一點，為什么今年有一些三年工作經驗以上的UI一下子就被淘汰了找不到工作？因為一個人的價值是和你的不可替代性成正比的，自驅力來源于興趣，本身不是喜歡這個行業的設計不求上進兩三年拿不出與工作經驗相襯的作品，勢必要被淘汰。

二、UI設計師掙得多么？

每個行業都有掙得很多的頂尖人才，還是那句話，一個人的價值是和你的不可替代性成正比的，但是普遍來說中國的互聯網行業薪資構成一定是產品≈技術>設計的，但是相對來說技術的行業門檻比較高，產品暫時拋開不論（手動微笑），而且在絕大多數非技術崗位互聯網從業者的心目中設計這件事情是一個純主觀的事情，很多人甚至到今天還在說哎呀XXX今天更新好丑，他們公司的UI簡直就是一坨屎這樣的言論背景下，在前幾年UI培訓確實是如火如荼的進行。

UI設計師到底掙得多么？答案是：“收入可觀”。

從騰訊CDC《2016用戶體驗行業調查報告》中能夠可以看出：

調查結果顯示：

用戶體驗行業從業者稅前薪資年收入主要在 5 ~ 15 萬；

管理類薪資較高,集中在 10 ~ 25 萬；

視覺設計、 交互設計、品牌設計的薪資相對較低，偏向 5-10 萬；

用戶研究，產品類的薪資居中，傾向于 10-15w。 

從圖上可以得知，如果是一個下定決心打算進入UI設計/視覺設計行業的萌新，那請你做好一開始“不到5W一年”和“不到10W一年”的準備。

結論：從數據上來說，培訓出來月薪過萬這樣的例子我承認一定有，但是不多。更多的設計科班出身或者培訓行業出身的設計在工作的第一年，工資都不太喜人（一線大城市可能會相對稍微歡喜一些）。

結合上面那個賣盆的段子，不到五萬一年，你還想學UI么？（手動微笑+1）

三、學UI，應該選擇培訓機構么？

我的答案是分兩頭看，如果你是設計科班出身，并且對互聯網UI/視覺設計師的職責有清晰的認知，了解工作流程，那么我的回答是不需要。但如果你是一個學法律的學中文的，對互聯網公司和設計本身一竅不通的想學UI有志好青年，并且周圍幾乎沒有互聯網從業者圈子，那么，我的回答是需要的。

因為你要明白，市面上絕大多數培訓機構能夠給予你的是：

0.了解互聯網大環境和app產品UI/視覺設計師的作用及工作流程。

1.一到多項工具的使用。（一般是Photoshop、AI、Sketch、Axure等等）

2.一到多次虛擬互聯網項目經驗。（包括從但不限定為從無到有、模擬迭代等）

至于推薦就業之類的，你愛信信，反正我不信。

我大二的時候因為PS技術比較好，所以兼職在某培訓機構教PS，先后帶過三個班，一個是攝影后期那個就不說了，其余兩個都是UI的基礎班，只不過一個側重移動端app，一個側重網頁設計而已（12年那時候還沒sketch）。

我可以拍著胸脯保證我教授的PS知識能夠完成市面上所有的app和網頁設計，這個按鈕是怎么實現的，漸變怎么拉，字行距間距怎么設置，布爾運算怎么操作這些你從我這里一學就會，包學包會，然而這并沒有什么卵用。這就好比一個你去學習素描，老師告訴你鉛筆分為幾種，每一種黑度不一樣，你手要怎么拿鉛筆，排線要怎么練，面是由線構成的，好了，你畫吧。你能畫的出來才怪。

很多想入行UI的小白最大的誤區在于：我只要PS/sketch用得好，我就是個設計師了。

拜托你們醒醒好吧，你要明白PS也好sketch只是一款工具而已，它本質上和屠夫手里的刀，獵人手里的弓箭，雕塑家手里的釘錘沒有任何區別。我現在把羅丹的工具從博物館偷出來給你再給你一塊質地幾乎一樣的石頭，你敲一個思想者出來我看看？

四、Sketch和PS必須熟練掌握一款

好了書歸正傳，雖然學會軟件并不等于可以勝任UI設計的工作，但是學會一門軟件是很基礎的入門級的事情，市面上能用于UI設計的工具現在幾乎淘汰到了只剩三款，PS/Ai/sketch，而其中Ai由于是基于對象的矢量繪制軟件，在位圖設計當中有著天然的劣勢（當然也有很多人用，但是我個人是直接排除的，才不會告訴你我還見過firework流的UI呢）。

在Ps和sketch中，目前在UI設計工作中，我基本上完全會用sketch，Sketch實現不了的功能，偶爾會用PS輔助一下，Sketch實現不了什么功能呢，比如你現在想做一個彌散陰影（自行百度），sketch就實現不了，十分想吐槽sketch沒有類似于PS圖層“圖層樣式”的功能，不然基本上做UI就可以完全不打開PS了。

目前我的觀點是Sketch可以作為UI設計主打軟件，適合新手使用，入門簡單，學習成本極低，插件豐富，功能足夠強大，唯一美中不足就是只支持蘋果系統，但是我認為如果你是決心入行的話，rmbp還是買一個吧。Sketch/PS的教程視頻網上一搜一大把，這里我就不贅述了。學習一款軟件，最重要的是持之以恒，一兩個月絕對可以掌握，這部分外功沒啥好說的。

五、UI設計師的自我提升

好，從下文開始，我假設你已經是一個經過三個月努力，熟練掌握設計工具的萌新了。那這時候你該如何修煉自己的內功呢？

UI設計師的自我提升step 1：看（Look）

“看是一個浸淫的過程，也是提高審美和觀察力的過程。”我從大二開始，給自己的任務是每天睡前看一小時：

• https://www.ui.cn/ - UI中國
• https://www.zcool.com.cn/ - 站酷
• https://www.pinterest.com/ - Pinterest是我這幾年素材收集用得最多的一個網站

那，到底看什么呢？

作為新手來說，第一步應該關心的是：這張設計稿有沒有什么技術難點是我實現不了的。

我舉個例子：（以下舉例圖片全部來自Pinterest - my board）

比如晚上睡覺的時候，無聊翻Pinterest，然后看到這張圖，作為新手來說，心路歷程大概應該是類似這樣的：

知道一張設計稿里面每個元素是怎么繪制的，這是最初級的階段。

其次看什么呢？嘗試每看一張圖的時候不要像刷朋友圈一樣一晃而過，看的時候強行試著分析一下這張圖的優點和缺點，同樣舉個例子：

比如這個UI界面，作為一個新手，自己嘗試分析一下這個頁面的優缺點，比如：

優點：

1.這個頁面給人一種性冷淡風干凈清爽的感覺（然后你去baidu/google"性冷淡風",得到關鍵詞“Normcore”，然后再繼續dig deep，去詳細了解這種設計風格。）

2.信息展現清楚，交互按鈕Add和Message也是清晰直接

3.圖一上面，用了一些漸變小紋理特別贊。

4.這種斜著切一刀帶來的設計形式感特別贊，要學~~~

缺點：

1.這個界面偏概念，隱藏了navigation bar和Status bar，在一般工作中這樣設計需要謹慎

2.雖然美觀，頁面展現信息較少，在工作中一定是不適用了。比如圖一，一屏信息只展現了人名+人簡介+Add和Message按鈕以及下面兩個人物列表。圖二更屌，只顯示了這個人的這么一點信息，換句話說，這個頁面所有呈現的信息約等于微博四分之一頁面信息，除非這個app功能特別少，只強調美感，不然應該不太會這么設計：

分析是UI設計的基本功，不管是瀏覽設計網站看設計作品還是日常使用app和電腦瀏覽網站，都可以抱著這種分析設計的心態。如果你能根據你的設計分析寫一個學習筆記什么的，相信我你會進步得更快。

再然后看什么？嘗試找出這張圖第一時間吸引你眼球的元素。

如上圖的例子，那種斜著切一刀的感覺是不是顯得特別利落？

比如這兩張圖：

同樣是方形構圖元素，第一張吸引我的是一種“品質感”，第二張吸引我的是顏色。

包括第一張MARKET IT下面一條線的形式感設計和第二張最下面鞋上的VANS AQUA SHOES的形式感設計，都是可以學習和借鑒的。

總之，“看”是設計師每天都應該做的事情，長期堅持多看多分析有助于設計感的培養，在熟練掌握軟件的前提下，眼高手就不會低。

UI設計師的自我提升step 2：臨摹（Copy）

提到copy，大家可能會想到那句俗話說 Good designers copy. Great designers steal.

有的人說臨摹不就是抄么？咳咳，咱們讀書人的事情能叫抄么？叫借鑒。。

其實不太對，大家想這樣一句話，我說讓你抄同桌的作業和臨摹同桌的作業，區別在哪兒？

臨摹的意思是，盡自己所能，做到每一個像素分毫不差。

我給大家舉個例子，左面這張我自己作品里的一張圖，之前還沒有Sketch的時候用PS做的，后來學習Sketch的時候我又用Sketch臨摹了一遍，放在右邊：

其實仔細看是能看出區別的啦，但是臨摹，起碼要做到這種效果，每當你去臨摹一張設計稿的時候，可能要花大量時間，但是收獲巨大。

因為首先臨摹第一步是需要測量，測量和臨摹一個UI作品給我的幫助太大了，強烈建議每一位新手好好的，臨摹一兩款市面上很火的app，不管是什么，只要是你覺得界面還可以用著夠方便，微信微博也好，美團網易云音樂也好什么都好，找一款app嘗試測量和臨摹，你會看到很多更深層次很有趣的東西。甚至可以了解這個產品UI當時的心路歷程，總之臨摹這件事你試試就知道了這方面我就不展開了，以后有機會另起一文。

總之，不斷臨摹優秀作品是我認為UI設計新手成長最捷徑的辦法（我認為沒有之一），因為很多時候光看是不夠的，有些時候你自認為很好實現的效果，到你手上實際去做的時候會發現根本就不是這樣的，不信的話，下面這九個圖標，你們可以選一兩個去臨摹一下試試：

臨摹，是將“別人的”轉化為“自己的”最優秀的辦法。第一步先做到盡量一模一樣，然后再去求變和思辨，往這個方向努力一段時間，回過頭，你會發現自己的進步，除此之外，你還會發現，咦這些個app這種設計形式我都曾經見過。。。

UI設計師的自我修養step 3： 嘗試分析 （Attempt to analysis）

嘗試分析一款app，基本上是從app的信息架構入手的，這是一個UI偏UE和產品的工作，但是對UI設計師來說挺重要的，app的信息架構怎么做，說白了就是花時間把整個app點一遍，然后分析app的信息層級，一般我用Xmaind7去做信息架構圖，比如我是一個dota2玩家，所以我曾經做過max+的產品架構，放在下面給大家看：

做信息架構的時候不光光是點完記錄下來就結束了，要帶著自己的想法去做，比如我圖上標綠色的地方是這個app的重點功能模塊，黃色的小問號是我初次做信息架構覺得信息展現有問題的地方。

做信息架構能給我們帶來什么？

第一，能夠讓UI設計師迅速了解一款產品。如果說你剛入職一個新公司，那不妨入職第一天先從你公司信息架構入手~

第二，能夠讓UI設計師在橫向對比兩款或者多款產品交互的時候提供必要依據。這點不展開了，推薦大家上手做網易云音樂和QQ音樂的信息架構，做了你就知道我在說什么。

第三：方便UI設計師了解行業產品形態。比如你之前是一個旅行類app的UI設計師，現在你即將跳槽去一個互聯網金融p2p的創業型新公司，如何入手設計一款新的p2p類app呢？你只需要選擇市面上最火的兩三款p2p類app做一下信息架構，你就會明白一個大致的方向，因為行業里大家都是這么做的，你就把好的地方繼承，不好的地方創新就是了。（心里話：說起來容易，做起來可完全不是這么一回事啊喂！Orz...)

第四：方便設計師做redesign。很多UI設計師都喜歡做作品集，那自己沒這么多線上作品怎么辦？于是就做redesign，站酷上UI中國上到處都是各種產品的redesign，有一些做得確實很好，在分析一款產品的信息架構之后其實是很容易找出產品一些易用性問題的，那針對這樣的易用性問題進行優化的redesign思維一定是有益的。

我在這里提供第二種制作信息架構的方法，這種方法更偏交互，我把他稱之為點擊類信息架構：

具體這是一張特別大的圖，我就不給大家展示全了，這里我著重想說的是這是另一種偏交互類的信息架構方法，圖上那個S0，S1，S2是我自己編的詞，S1代表的是一次點擊就可以達到的頁面，S2表示的是兩次點擊可以達到的頁面，S3表示三次點擊可以達到的頁面，然后我把S1，S2，S3對齊排列，這樣就可以知道這個app的每個功能深度（深度的意思是指你需要通過幾次點擊才能達到，點擊次數越多當然就越深）。

比如分析的時候看到一個特別重要的功能被埋藏得比較深，那就說明這個app是有問題的，下次改版時候從UI方面著手看看能不能把他提前之類的。這當然是產品做的工作，但是UI設計師掌握這個沒啥不好。

UI設計師的自我修養step 4：回顧與總結（Review and summary）

看完一本書，聽完一個故事，一個項目結束之后，一個版本迭代完成之后，一份工作離職之后，都是需要總結的。總結開發中出現的問題。比如開發和設計稿不一致，是不是設計這邊造成的，如果是，那我是怎么造成的，如果不是，那我有沒有挽回的余地?？偨Y設計中出現的問題，這些地方是不是還有優化的空間?？偨Y溝通中出現的問題，是不是不該罵產品罵的這么狠。（我承認，我經常和產品撕得天昏地暗2333333 Orz...）

總之，總結是特別重要的一點，尤其是看完一本書之后的總結和踩到坑之后的總結，多和開發成為朋友，他們會教會你很多。（不然我特么作為一個設計怎么知道滑動切換瞬間navigationbar不能變色。。。）

好了感謝大家看到這里，再見~

希望大家一起進步~

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

一看就懂！詳解大廠UI設計規范制作步驟

小小設計控 2018-07-30 09:34:38

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

一、提取設計原則關鍵詞

1. 提取一級關鍵詞

第一步，先要去提取出關鍵詞，這個關鍵詞怎么來，有幾種方式獲取，第一個從整個公司戰略出發，任何一個產品一定有他的戰略，品牌戰略，商業戰略。舉個例子，假設我們是 eaby，公司今年戰略是全球化，高品質，正品，那么這個就是一級核心關鍵詞，所有的設計語言一定要和公司戰略結合起來，可以理解為戰略關鍵詞是整個設計語言頂部金字塔。

二、運用情緒版提取二級關鍵詞

有了一級關鍵詞后，需要去思考，那么什么樣的設計能給人全球化的感受呢，什么樣的感覺能有高品質，正品應該傳遞什么樣的感覺呢？此刻需要用到第二個方法就是情緒版，通過情緒版去把符合這些關鍵詞感受的圖形具體化。

三、高品質特征是什么？

下圖是一組日本的花茶設計，那么在這組設計中，設計師是如何體現高品質呢？

△ 首先包裝很精美耐看，設計簡約

△ 做工精量，整個產品包裝，都是在富士山腳下

△ 采摘環境很透明，值得被信任

△ 整個品茶的過程也特別讓人向往，很有儀式感

△ 整個的設計很完整，很有設計感在里面

通過以上案例拆解，我們能對這個高品質的關鍵詞有更加進一步的理解，高品質原來在情感層面是一個這么抽象的感覺，但是很多同學會問，那么這二級詞匯也很抽象，如何靠這個來做設計，很難去理解及表達，別著急，還有下一步。

1. 高品質設計表現形式？

關于高品質在視覺形式上如何來體現了，哪些設計感覺能代表高品質呢，這個時候就需要我們去尋找一些設計參考，這些案例要能代表高品質。

△ 清晰的有品質的圖片

△ 牛皮癬，不精致不可取

△ 優雅的排版和留白，文字清晰，雜志感受

△ 圖文密集，缺少版式不可取

△ 精致的布局，柵格的體系，給人品質感

△ 缺乏版式及設計感

△ 有設計細節的

△ 無細節不可取

△ 合理的配色，簡單清晰

△ 山寨的配色不可取

△ 設計的延續性和完整性

2. GOOD CASE

3. BAD CASE

四、設計分層

以上就是我們從一個戰略關鍵詞逐步推導到一級關鍵詞，到二級關鍵詞，到設計手法，以及對應設計表達，推導的一個全過程。

• 本能層：清晰的，有設計感的，做工精致
• 行為層：完善的，值得信任的，用心的
• 精神層：讓人向往的，值得期待的

五、總結

以上大概為一個設計關鍵詞的全部推導過程及到設計手法的確定，也是設計語言里面最難的部分，后面的關鍵詞也是類似的思考方法和思路，最終通過推導我們需要得出每個關鍵詞的情緒圖，以及對應設計特征，最終需要在界面中展示的形色字構質，一個完整過程。

比如國際化，同樣通過前面思路，我們需要去思考國際化如何在設計中體現，去提煉出代表國際化的象征物，如地標，國旗，郵戳，貨幣等等，包括如何在界面中融于國際化元素，以及人物和節日場景。

結語

希望大家可以通過我這期的分享，能夠詳細理解到如何從公司戰略層提取到核心一級關鍵詞，到二級關鍵詞，以及對應的設計手法，對應到形色字構質，大家可以依據此方法去拿你現在手上的界面去做一次體系化的推導。

最后，依據推導出來的原則，以及對應的設計手法去做概念，去在界面中運用，最終完成設計語言第一步，設計關鍵詞和設計手法定義。

圖片素材作者：Tran Mau Tri Tam ?

你為什么覺得交互設計難？

原創 康石石 2018-07-30 10:14:24

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

交互設計作為國內當下藝術留學中的一個新興專業，申請人數逐年增加，甚至已有趕超服裝設計、建筑設計這些熱門留學專業的趨勢。但在專業認知上，申請交互設計的同學卻不及其他兩個專業。這也使得很多交互學生在專業學習上要比其他人耗費更多時間，很難快速上手進行交互項目的創作。

但這絲毫不能推責于各位同學身上，因為國內基本沒有正兒八經的交互設計專業，即便是有，多數也在工業設計與多媒體設計之間存有剪不斷理還亂的關系，這使得很多同學對交互設計的認知較為單一，項目創作除了APP設計就是APP設計。但其實交互設計“入門”這件事，找對了方向，往往事半功倍。

今天的文章，康石石將為處于交互“入門”階段的同學詳細梳理兩個問題：

1. 交互設計是什么？

2. 入門交互作品集需要從哪些方向入手？

希望大家在通讀文章之后，能夠盡快跨過“入門”這道門檻，以更穩定專業的心態進入作品集創作。

一、交互設計是什么？

---

各個百科上對交互設計都有非常明確的定義，但對于沒有專業基礎的同學們來說，這些定義還是略顯彎彎繞繞，康石石簡單解釋一下：交互設計，其實就像人與人之間的日常交流一樣，人與系統之間也是“有問有答”，具有互動性的，而交互設計就是協調人與系統之間的“交流”方式。凡是可以通過五感來達成的信息傳遞、觀念傳遞、情感傳遞的互動行為都在“交流”的范圍之內。

從具體表現形式上來說，包括但不限于手機APP、傳統網站、可穿戴設備以及新興的VR，各種與非電子類產品的交互關系也屬于交互設計的范圍。

這樣一講，交互設計的范圍似乎太過寬泛，但其實簡單來說，交互設計大致可以分為三個基礎模塊：

1. 美學——用戶界面設計（User Interface Design）

2. 心理學——用戶體驗設計（User Experience Design）

3. 計算機&工程學——人機交互設計（Human-Computer Interaction）

在這里我們先說UI設計（用戶界面設計），大多人似乎都知道UI設計是什么。但其實，UI放在交互系統內，比如眾所周知的app、網站，它可以成為交互設計展現的一種媒介，是交互設計中一個難以或缺的組成部分。嚴格來說，UI設計并不屬于交互設計，它實則應該歸類于Graphic Design--平面設計。

而HCI（人機交互設計），與VR、AR，以及大數據等次時代的前沿科技相關，未來發展前景光明。但需要強調的是，HCI絕大部分學校是按理工科教授，因為它主要研究的是人機如何交互，而不是人機為什么交互，為誰交互，以及交互究竟有何意義。簡言之，就是HCI研究人機交互的技術，更簡言之，多數是在搞程序、編代碼。

最后，重點說一下涉及到心理學的UX設計（用戶體驗設計）。在交互作品集的創作中，UX是尤為關鍵和重要的，主要原因在于，相較國內對于學術研究和視覺審美的培養，國外院校更看重的是設計出來的物品是否真正解決了用戶的需求。

這一點就要求了設計者必須換位思考，設身處地的站在用戶的角度上去考慮設計的每一步。這也應證了交互設計的本質——交互設計師設計出來的是用戶想要的東西，而不是設計師要做用戶想要的東西。

二、入門交互作品集需要從哪些方向入手？

---

一般情況下，對于完全零基礎的同學，康石石東家-漢藝國際在其進行作品集創作前通常會先安排2-3周的基礎專項課，一系列課程下來，基本就能掌握作品集創作所需的所有知識及能力。這些課程康石石無法在這一篇文章中表述完全，僅為還處于入門階段的同學就兩方面內容作簡要解析：

1. 交互項目

這一點是大多同學都非常關心的問題，以下康石石列舉五種最常見的交互項目，若有些同學已經具備較為完善的交互專業知識與能力，可以嘗試更為高階的項目：

1）APP、網頁

交互設計作品集中，最容易上手的就是單一化的APP或網頁項目，幾乎每一個同學都會涉及到。而且APP與網頁項目的制作過程與方法相似程度高達90%，同學們在創作項目初期可以先嘗試這類項目練手，盡快熟悉作品集的創作流程。

Y同學，17屆學生，獲卡內基梅隆offer

2）復合APP制作

比上述提到的APP和網頁稍復雜的是復合APP，比如產品+APP、傳感+APP、裝置+APP、手表+APP 、網頁+APP等等，簡單說，不僅僅是以APP為載體類型的應用都可以稱之為復合App。主要也是為了解決形式單一化，以及豐富項目內容創造更多設計點。如果思考維度多元化，專業領域深入探究，也可以發展為一個服務設計項目。

3）交互裝置制作

交互裝置在交互作品集中屬于拔高項目，因為技術方面涉及到了電子化編程和電路板連接傳感器等內容，呈現效果體現了交互意識、審美意識以及代碼意識。內容方面，交互裝置更多是從產品原型開發去研究。由于涉及到代碼問題，在創作這類項目之前，專業技能及代碼知識都需要系統的了解。

H同學，15屆學員，獲倫敦傳媒學院、愛丁堡大學、拉夫堡大學offer

4）游戲制作（普通→AR→VR）

在交互游戲制作過程當中，很多同學會遇到不知道制作流程，不明晰VR和AR是什么概念，或許也會困惑為何我們把AR、VR列入游戲制作等種種問題。事實上，VR、AR也都需要通過游戲引擎搭建，所以從本質上來看，它們都是游戲。

L同學，17屆學員，獲倫傳offer

2. 創作交互作品集需要具備的“基礎能力”

對于申請名校而言，同學們在基礎專業知識、作品集創作流程之外，還要具備四種基礎能力：基本審美能力、思考和解決問題的能力、創意、以及個人風格。

1）基本審美能力

對于設計師而言，良好的審美能力是必備的創作基礎。一般情況下，院校的考官大多會通過項目中各種低保真、高保真的UI原型設計，以及整體作品集的排版等視覺元素來判定，包括排版中每個圖標的位置、統計字體大小的一致性、整個項目風格的統一性等等。

2）思考和解決問題的能力

設計過程中，設計者的思維方式、邏輯關系是否清晰、有條理，是否通過設計過程解決了前期提出的問題，這些才是海外藝術設計院校的老師們最關注的關鍵性問題。

需要和同學們強調的是，想要創作一本優秀的作品集，最基礎的要求是熟知其創作流程，這是考官的考察點，但僅憑這些自然不夠。

無論是前期調研還是后期做原型做測試，正規作品集的流程通常都是一樣的。因此，考官在判定申請者個人思考和解決問題能力的高低時取決于不同人在思考過程中每一步的邏輯所在。根據什么現象發現什么問題，根據什么問題設計什么功能，如何通過思考一步步得到解決方案，這些都值得同學們在創作中進行多維度的思考與試驗。

3）創意

不拘泥于APP類型的交互設計。一個交互作品集通常需要5個項目，同學們在APP設計之外，必然需要通過更多創新型項目，用以體現自己對專業能力的把控以及創意思維的體現。比如目前還屬于創新型拔高項目的VR和AR，尤其是在如今眾多藝術作品集表現形式都略顯中規中矩的情況下，一個優秀的VR或AR項目會幫助作品集脫穎而出，為整個作品集增加亮點。

比如漢藝16屆學員T同學的作品集項目中，將水下AR系統與導航系統相結合，讓兩種不同的交互題材領域相互融合，展現了自己多維度的創作能力。

T同學，漢藝16屆學員，獲金史密斯，威斯敏特大學offer

4）個人風格

在交互作品集中，個人風格的體現，幾乎可以算得上能夠最快讓自己的作品集脫穎而出的有效方式之一。這里說的個人風格并不是指每個人所做的作品集項目的風格，而是你作為設計者，作品集中所包含的個人設計理念和思考風格。

以漢藝16屆學員D同學的CUI項目DANA為例，項目主要為已刑滿釋放重獲自由的前犯人們提供重返社會工作的各種服務。首先，可以看出項目題材切入點較為新穎，充分展現了D同學在生活中善于觀察的獨到之處，此外，D同學還細心的為DANA設計了虛擬形象，細節部分可見一斑，充分體現了設計者的與眾不同和強烈的個人風格。

D同學，16屆學員，獲CCA、SVA、Parsons Offer

Final: 以上對交互作品集入門階段的知識要點為同學們做了簡要整理，大家需要明確的是，交互設計雖是一個新興專業，很多人對其認知也確實不夠全面，但從零基礎到能夠創作一個完整的交互項目之間并非難以跨越，甚至只要合理安排好時間，有明確的學習規劃，便能很快進入創作期。

最后，上述只是入門交互設計的基礎知識，若想要支撐自己創作出更具競爭力的交互作品集，必然需要同學們在交互設計領域中繼續學習和探索。康石石與東家漢藝也在一直嘗試通過各種課程幫助大家探索更多交互的可能性，這不僅是為了作品集創作，更多的是希望各位在專業能力以及創作思維上都能有更高質的提升。

---

藝術留學&藝術作品集咨詢：

漢藝國際教育--康石石作品集指導團隊

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

優秀UI界面設計評析

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

網頁設計的核心難點是什么？

公眾號:西見 個人QQ:26474600

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

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

工作流程

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

原型圖階段

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

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

視覺稿階段

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

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

設計規范

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

視覺規范（工具：Photoshop）

切圖

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

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

前端代碼

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

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

項目走查

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

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

網站種類

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

門戶網站

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

韓國門戶網站Naver

企業網站

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

美國通用公司官網

產品網站

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

蘋果公司產品介紹頁

電商網站

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

淘寶網首頁

游戲網站

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

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

專題頁面

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

極有家淘寶專題頁面

視頻網站

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

騰訊視頻播放頁面

移動端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項目的尺寸

后臺網站

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

微信公眾號后臺

CRM系統

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

Admin CRM dashboard by Divan Raj

SaaS

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

企業OA

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

Robo Advisor - Projection, List and Questionnaire by Michal Parulski

網站組成部分

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

首頁

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

首頁原型圖

二級頁面

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

二級頁面原型圖

底層頁

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

底層頁原型圖

廣告

門戶類網站如何盈利？廣告是變現方法之一。網站的廣告一般由負責運營需求的設計師負責，但是也可能由頻道設計師、產品側設計師來完成。在網站中常見到的廣告圖形式就是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是指按照用戶點擊付費。針對不同的收費模式，在設計時也會采取不同策略來增強廣告需要達到的目的。

Footer

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

技術原理

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

基于鼠標的手勢操作

基于鼠標的交互

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

按鈕與文字的不同狀態

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

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

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

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

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

靜態網頁

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

模擬代碼編譯過程

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

其他前端語言

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

主流形式：HTML + CSS + JS

動態網頁

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

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

雪碧圖

我們經?？吹骄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刪除，保留一半的動作。

雪碧圖

視差滾動

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

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

網頁設計規范

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

畫板尺寸

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

網站的尺寸規范

文字規范

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

網站字體規范

圖片規范

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

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

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

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

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

在線壓縮工具Tinypng網站

按鈕

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

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

表單

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

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

柵格

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

如果網頁寬度是1000px，我們可以使用：

20列每列40px和10像素間隔

20列每列30px和20像素間隔

25列每列30px和10像素間隔

25列每列20px和20像素間隔

如果網頁寬度是990px，我們可以使用：

11列每列80px和10像素間隔

18列每列35px和20像素間隔

25列每列45px和10像素間隔

33列每列20px和10像素間隔

如果網頁寬度是980px，我們可以使用：

14列每列60px和10像素間隔

14列每列50px和20像素間隔

28列每列25px和10像素間隔

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

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

適配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/）提供的技術進行識別。

自適應與響應式網站

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

自適應網站

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

響應式網站

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

適配的規范

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

iPad：iPad的尺寸為1024x768、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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

荔枝微課app體驗報告：與AI結合，將有更大發展空間

人人都是產品經理 2018-07-21 13:14:44

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

荔枝微課是目前市面上知識付費領域非常優秀有競爭力的產品，本文對荔枝微課的產品設計進行了分析與思考。

一、產品概述

1. 體驗環境

• 體驗版本：4.3.0
• 體驗設備：華為mate10（128G版）
• 安卓版本：8.0.0
• 體驗時間：2018年7月

2. 產品簡介與定位

荔枝微課的應用介紹：

“荔枝微課是連接人與知識的內容分享平臺，支持隨時隨地授課聽課。與大咖、草根，一同共赴知識盛宴。”

可以發現，荔枝微課主要著力于打造一個全民學習知識&全民分享知識的大眾知識分享平臺，其核心內容則是平臺沉淀下來的知識內容，其運營的關鍵是源源不斷的能吸引用戶購買的知識輸出。

其核心價值主要有2點：

對于知識學習者來說，荔枝微課可以為用戶提供一個內容豐富的，可以隨時隨地進行學習的知識平臺，滿足用戶能夠方便快捷獲取知識的需求。

對于知識分享者來說，荔枝微課可以為用戶提供一個知識變現并實現自我價值的平臺，以及平臺為知識分享著提供的推廣及流量支持。滿足用戶通過分享知識而實現個人價值并獲得現實收益的需求。

3. 用戶需求分析

3.1 用戶畫像

在進行需求分析之前，我們先來了解一下荔枝微課的用戶群體，進行簡單的用戶畫像，以便我們更加準確地進行需求分析。（PS：用戶畫像主要基于二手數據資料、競品分析和個人體驗產品后的逆向推理得出，由于個人水平以及時間問題，如有偏差望見諒。）

3.1.1 平臺角色

經分析可發現，平臺中主要存在兩大角色：知識分享者（知識分享者又可以細分為機構和個人，在本文中不做區分）和知識學習者（也可以稱作知識消費者）。

從產品的運營模式來看，很多用戶既是知識消費者，又是知識分享者，用戶在平臺上學習自己欠缺的知識，分享自己的一技之長，形成了一個良性循環。

在體驗中我發現，知識分享者的知識分享流程主要是通過PC端的“講師管理后臺”完成的，因此在針對app的體驗中我主要針對知識學習者用戶進行分析。

3.1.2 核心用戶的基本信息

通過荔枝微課本身以及對比幾款競品的相關數據，我們可以大致推斷其核心用戶的基本信息：

年齡：通過百度指數以及對核心用戶的核心行為-學習各種實用技能知識，進行分析，我們可以看到，主要集中在30-39歲（占比60%左右），同時20-29歲， 40-49歲兩個階段也有不少分布（占比約為20%左右）。

性別：我們可以看到百度指數中顯示，其用戶性別比例男：女約為6：4。但是我們知道百度指數對于性別判定算法，有時候會產生誤差。在荔枝微課這里就發生了這樣的情況。

對于荔枝微課的性別比例，我們通過對產品進行分析，可以發現這個性別比例并不準確。

有一下2點理由：

• 第一，在荔枝微課的“發現”頁中存在很多的課程分類，我們可以看到其中大部分內容是針對女性用戶的：比如母嬰、形象、美妝個護、時尚、婚姻等等分類。而且作為優先級最高的第一屏的分類項目是推薦、婚姻、家庭關系、戀愛、母嬰、育兒，這幾個比較偏女性用戶的分類。
• 第二，在產品所有的課程內容中我們可以看到大量的課程都是針對女性用戶的，比如瑜伽課、提升女生的氣質等等相關課程。

因此我們大致可以進行推理，荔枝微課的用戶應當女性偏多，女：男 約為 6：4 到 7：3 之間。

區域：可以看到荔枝微課的用戶主要集中在一線以及新一線城市。

收入：對于用戶的收入水平我們可以從2個方面進行推測， 一是我們上文得出荔枝微課的核心用戶主要分布在一線及新一線城市；二是，我們可以看到在荔枝微課中絕大部分課程的價格都在100元以下。我們可以進行推測，荔枝微課的核心用戶應該處于中等收入水平。

用戶性格：綜合以上所有的分析，大致可以推斷出用戶的性格有以下幾個特征：自我提升欲望強烈、存在一定的焦慮感、對自己某方面現狀不是很滿意。

二、產品分析

1. 產品結構圖

荔枝微課有發現、精選、我的微課、個人中心4個以及導航模塊。

• “發現”是分類別展現課程信息，主要是滿足用戶分門別類查找自己感興趣的知識的需求；
• “精選”則是平臺為用戶精心挑選的課程列表；
• “我的課程”是用戶學習課程的記錄，方便用戶方便快捷的進行學習；
• “個人中心”則是用戶進行個人設置以及記錄個人信息與操作的模塊。

其產品結構圖如下：

2. 用戶使用流程圖

通過分析發現，產品中存在2個核心流程，一是用戶購買課程流程（購買直播課程流程和購買非直播流程略有不同）；二是用戶學習課程流程（學習直播課程流程和學習非直播流程有不同），其流程圖如下：

2.1 購買課程流程

購買直播課程流程和購買非直播流程略有不同，購買直播課程流程不需要判斷課程是否收費，免費課程仍然進入支付流程，并支付0元。

從分析體驗來看，從開始到結束，整個購買課程流程非常清晰且順暢，中間不存在多余流程，也沒有其他任務導致流程中斷，用戶體驗很好。

2.2 學習課程流程

相對購買流程來說，學習課程流程就沒有那么清晰順暢了，我們可以看到直播課程學習流程比較清晰。但是非直播課程學習課程卻看起來比較復雜，個人覺得該流程中存在一些多余流程。

（1）首次進入課程存在多余流程

我們從流程圖中可以看到首次進入時，產品會讓用戶選擇是從第一條開始聽還是直接進入課程。選擇從第一條開始聽，用戶將會進入課程學習頁面，并從第一條語音開始播放。而選擇直接進入課程，則進入課程學習頁面，但課程不會進行播放。

我們可以看到2個不同選擇只是有課程是否自動播放的區別，這個區別對用戶來說不是必要，但是卻多了一個頁面，讓用戶多進行了一步操作。這并不利于用戶完成整個課程學習流程。

而且，在體驗過程中，我發現在這個選擇頁面中用戶是無法后退的，也無法關閉選擇彈框，只能在“從第一題哦啊開始聽”和“直接進入課堂”中進行二選一，這可能是為了提升課程播放頁面的打開率，但是這樣的設置對用戶體驗不是十分友好。

（2）非首次進入流程存在多余流程

對于非首次進入流程，我們來想象一個用戶場景：

在上班的路上，有一個用戶對荔枝微課上的一門化妝課程非常感興趣，她打開課程進行學習，半個小時后她到公司了，她關閉課程開始上班。等到下午下班之后，她想起來自己早上還有一門課程沒有學完，想要接著學習，這之后她很希望荔枝微課幫她記住了自己上午學習到哪里了。

我們可以看到，對于用戶來說，被打斷的課程直接進行續播，才是符合用戶預期的。所以個人覺得在用戶再次打開自己學習過的課程時，給用戶“繼續未聽完的課”和“直接進入課堂”的選擇是比較多余的，用戶其實不需要這樣的選擇。這種不記住自己的學習進度的選擇，反而是用戶想要避免的。

3. 導航結構分析

荔枝微課有發現、精選、我的微課、個人中心4個一級導航模塊。

• “發現”主要是分類別展現課程信息，主要是滿足用戶分門別類查找自己甘心去的知識的需求；
• “精選”則是平臺為用戶精心挑選的課程列表；
• “我的課程”則是用戶學習課程的記錄，方便用戶方便快捷的進行學習；
• “個人中心”則是用戶進行個人設置以及記錄個人信息與操作的模塊。

接下里我們來分析一下荔枝微課的這個導航結構：

首先是“發現”頁，發現頁匯總了各種課程信息，并通過頭部導航分類別進行展示，形成了典型的首頁風格。從結構設置上來看并沒有什么問題，但是個人在體驗中發現其在內容展示上還是存在一定的優化空間。

3.1 三個功能按鈕內容不隨頂部導航切換

如截圖所示，在每個分類導航的輪播圖下方，都有“我的課程”、“精選專題”、“免費專區”三個按鈕。點擊按鈕我們可以發現都是相關的課程列表，顯然，這是產品為了吸引用戶點擊而專門設置的。

但是比較令人不解的是，這幾個按鈕的內容并不隨著用戶選擇分類的切換而切換。無論是用戶選擇婚姻分類還是理財分類，精選專題為用戶展現的列表都有可能是一些中醫課程或者是英語學習，不會隨著用戶選擇的不同而量身推薦內容。

另外，這種設置不但沒有根據用戶的興趣進行針對性的推薦，而且，會對用戶造成一定程度的誤導，從用戶的角度來說，導航切換了該導航下的內容進行相應的切換是一個順理成章的邏輯，但這三個模塊內容卻不進行切換，這并不符合用戶的操作認知。

3.2 如果能更智能的進行個性化課程推薦可能會更好

我們從結構圖中可以看到，發現頁中共有26個分類導航，涵蓋各種年齡階段，不同性別不同層次的用戶群體可能感興趣的所有課程，可以說是課程內容非常豐富了。但是，如果用戶對排名比較靠后的某一個類別感興趣的話，那么他想要找到這個類別就會相對比較困難，而且在進行左滑的時候很容易錯過中間某個分類。

同時，在體驗的過程中，我用了男女兩個性別不同的帳號進行體驗，發現所展示的內容完全一致，連導航的排序也一致，這說明產品沒有針對細分用戶做一些相對個性化的區分。

我們知道，對于非基礎知識的獲取需求，不同的用戶群體的需求可能差異很大，所以如果產品能夠應用人工智能或者是大數據等技術對用戶進行相對個性化的信息展示，那么在轉換率以及用戶體驗方面都應該都會有所提升。

然后是“精選”頁，個人覺得精選頁存在2個問題：

第一，是與首頁一樣沒有針對細分用戶進行個性化的區分，我用了男女兩個性別不同的帳號進行體驗，所展示的內容完全一致。當然，精選課程列表可能選取的是一些相對比較熱門的課程（熱門也是一種吸引力的保障），或者是一些產品出于商業盈利或者其他考慮而特意選出的部分課程，所以倒是不一定非要有用戶針對性。

第二，個人覺得其實精選課程并不需要作為一個一級導航頁存在，其實精選課程的內容，完全可以由發現頁中的“推薦”分類進行承載，只要在推薦類的課程列表中進行一些模塊劃分便能實現，并不需要顯示一個專門的一級導航頁。

接下來是“我的微課”頁，分為全部課程、最近學習、即將開始三個模塊。這里記錄了用戶購買和學習過的課程記錄，滿足用戶方便快捷進行回溯或繼續學習的需求，是一個非常好的頁面。

但是，也存在一點點小問題，那就是被添加進來的課程不能進行管理，如果用戶無意間點開一個自己不感興趣的課程，后面想要刪除，無法實現。在用戶打開過的課程越來越多時，可能會造成不好的用戶體驗。

“個人中心”頁，個人中心頁是一個典型的個人中心頁面，這里就不進行進一步分析了。

4. 核心頁面分析

接下來我們對產品的幾個核心頁面進行一下分析。

4.1 課程詳情頁

首先是“課程詳情”頁，我們先想象一個場景：

一個用戶在推薦頁看到了一個瑜伽課程感覺挺有興趣，于是她點開了這個課程，想進一步看看課程更詳細的信息，好決定自己是不是要購買這個課程。課程詳情頁信息影響著用戶是否購買的決策，是一個非常重要的頁面。

我們來看看課程詳情頁的構成。

• 功能：購買專欄按鈕、課程試聽、分享課程、關注課程分享者帳號。
• 信息：封面圖、專欄標題、價格、課程更新進度、在學人數、課程詳情、課程目錄、人氣榜、課程分享者帳號信息。
• 需求：用戶想進一步獲取更詳細的課程信息，好決定自己是不是要購買課程。
• 思考：從信息內容來看，荔枝微課的課程詳情頁做得非常好，尤其是頁面主體“詳情”內容總能把課程非常具有吸引力的內容提煉出來，可以說從內容運營方面來說領先于市面上很多產品。

不過從功能的角度來看，荔枝微課還是可以進行小小的優化，首先便是缺少直接的咨詢按鈕，我們知道用戶在進行購買決策時，如果能為用戶提供一個咨詢客服的入口，會一定程度提高轉換率。

當然，因為平臺上存在大量的個人講師，因此，如果增加咨詢按鈕的話，這大量的客服工作可能需要平臺來承擔，這樣會大量增加平臺的成本。所以，目前荔枝微課的課程沒有直接的咨詢入口，也有可能是出于對成本的考慮。

然后，就是已消費用戶的評論也是影響用戶購買決策的重要因素，如果能在課程詳情頁中增加用戶的評論，可能會錦上添花，對用戶的決策產生正向影響。

而且，這種評價體系也將為優質的課程做更好的背書，再輔以一些相應的算法對課程進行排序，這可以促進講師們提升自己的課程質量，長久下來將有助于平臺整個課程質量的提升。

4.2 課程播放頁

視頻播放頁也是產品非常重要的頁面之一。我們可以看到左圖是荔枝微課的課程播放頁，右圖是進入課程學習的上一步，選擇是“繼續未聽完的課”還是“直接進入課堂”，如果用戶是第一次進入課程則是，選擇“從第一條開始聽”還是“直接進入課堂”。

在上文中我們已經提到過這個選擇頁面對于整個學習課程流程的完成有一定的多余，不過從其課程播放界面我們看到課程并不是一個完整的視頻或音頻而是一個模擬直播現場的分條課程頁面時，我們大概能理解為什么會有這樣的選擇了。

我們知道講師進行課程直播，然后將這些直播的內容進行沉淀，供用戶反復學習，這是荔枝微課的一大核心特色。荔枝微課設置如上的課程學習頁面，可能是為了更好的還原直播課程現場，包括直播的氣氛、講師與學生之間的互動交流碰撞出的火花等等。

不過，我們來想象一個場景，當不在那個直播氛圍中，用戶對于一條一條的去刷整個課程討論的需求有多高呢？更何況很多講師在直播的時候可能還不允許用戶進行討論，全程只是講師在進行講課。那用戶更希望將這個內容一條條拆開還是將講課內容整合起來聽呢？我想答案應該很明顯吧。

我們可以看到，其實在產品中還有一個不一樣的播放頁面，如下圖所示，我們可以看到這就是直接將課程進行了整合，而且用戶如果想要觀看上課模式，可以直接進行切換，個人覺得其實所有的播放頁面都可以直接采用這種模式。

這樣不但能給用戶自主選擇的余地，而且我們在課程播放被打斷之后，再次進入課程播放頁的時候，也不用再選擇是“繼續未聽完的課”還是“直接進入課堂”，而是可以直接斷點續播。

當然，荔枝微課這樣的頁面設置可能背后有由于我個人產品能力不足，或者是我對荔枝微課了解不夠深刻所導致的認知誤差，如果是這樣，還請海涵。

三、總結

由于時間問題，這篇體驗報告寫得并不是很深入，有的觀點也不一定準確，如果有一些不當之處，再次致歉。然后對于文中提到的一些問題，主要是秉持著希望荔枝微課發展越來越好的初衷進行體驗的，還希望各位不要覺得這是一篇找茬文才好。

總結來說，荔枝微課是目前市面上知識付費領域非常優秀有競爭力的產品，不過現在產品針對用戶進行個性化的定制變得越來越重要，尤其是這種知識付費產品，如何讓用戶迅速找到自己愿意付費的課程成為了產品的重要競爭點之一。

個人覺得如果荔枝微課能夠在抓住在線教育風口的同時，再輔助以一定的人工智能、大數據等新技術進行提升，應該會帶來更大的發展空間。

本文由 @鐘娟娟 原創發布于人人都是產品經理。未經許可，禁止轉載

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