「網易蝸牛閱讀」和「微信讀書」的寫書評功能分析

人人都是產品經理 2018-08-19 16:05:00

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

一、目的

三、用戶 – 場景 – 需求分析

小結（這個模塊是做什么的？為什么？）：

從寫書評方說：

1. 為領讀人/書評家/作家提供了一個新的發布自身書評/作品的平臺，且通過簽約等合作形式為他們提高了收入，同時為他們開拓了新的增加粉絲，擴大影響力，強化IP的新方式；
2. 為作家/書本運營方/媒體機構提供了相對于其他電子書app來說更為專業的推廣渠道；
3. 為閱讀者（尤其是有寫觀后感習慣的）提供了更專業、完整、體系化的內容記錄與發布方式，以及獲取認同，尋求社交，與書友互動交流的新機會。

從看書評方來說：

• 閱讀者可以在閱讀前去通過書評快速全面了解一本書（零碎時間的泛讀），為要不要深入精讀提供參考；可以在閱讀前通過觀察別人對此書的解讀，帶著自己的問題與思考再去有目的性閱讀；可以在閱讀時，體系化的記錄自己的想法；可以在閱讀后尋找他人解讀中的不同點或共同點，加深自身思考，以及完善自身的想法。
• 找書者可以通過次主打的導讀特色功能，通過專業人士分享的書單或由讀過的人分享的想法，找到更值得信賴的內容向導。

從運營方來說：

1. 以書評特色作為產品特色推廣，吸引有寫觀后感習慣的電子書閱讀群體，為對寫書評有愛好或者以寫書評為業的群體提供新的平臺，滿足拉新需求。
2. 通過書評領讀，為用戶挑選書籍提供大量專業參考滿足留存需求。
3. 以領讀人帶起書評風潮，以PGC促進UGC，以及通過普通用戶對領讀人的申請，滿足激活需求。
4. 在書評中插入書籍入口，方便用戶閱讀購買，滿足轉化需求。

四、業務流程、業務邏輯梳理

功能流程：

1. 入口一：領讀 -> 右上角寫書評按鈕 -> 寫書評；
2. 入口二：我的 -> 我的書評 -> 右上角寫書評按鈕 -> 寫書評；
3. 入口三：選擇書籍 -> 閱讀書籍 -> 右上角寫書評按鈕 -> 寫書評；
4. 入口四：選擇書籍 -> 書評欄 -> “寫書評，獲時長獎勵‘輸入框 -> 寫書評。

四個入口分別代表四種場景：

• 入口一為領讀人直接發表文章提供便利；
• 入口二是方便內容發布者對于自己的書評進行編輯管理；
• 入口三提供閱讀中隨時記錄想法，書評素材的方式；
• 入口四的獎勵文案鼓勵大家加入寫書評，加入閱讀，且為閱讀者提供參考。

業務邏輯：

小結：

通過業務邏輯的分析可以看到，「網易蝸牛平臺」，“書評功能”，書評發布方以及書評閱讀方四方形成一個完整的循環，首先平臺通過優秀領讀人的引進，為閱讀方提供內容，并與之互動；再通過激勵引導，由PGC帶動UGC，讓閱讀方成為發布方，讓用戶生產內容，并提供申請領讀人的渠道；然后發布的內容再次與其他閱讀方互動，形成一個完整的循環生態系統。

五、功能點對比

小結：

相同點：通過閱讀中，書本詳情頁進入；輸入文字，輸入標題，添加筆記/標注，插入書籍；字體，副標題，符號，私密發布，分享功能。（基本功能）

不同點：

• 「網易蝸牛讀書」：標題的必要性、添加圖片、多本書籍插入；多樣化的字體排版選項、PC編輯、保存到草稿箱、獎勵、撤銷功能。（專業化需求較強）
• 「微信讀書」：添加表情；引用、星級評分。（較為注重簡單，直接，有趣）

六．總結

抄不抄？

不抄，如果發現UGC內容越來越多，以及專業化需求提高，可以考慮借鑒「網易蝸牛讀書」中寫書評的多樣化編輯功能去完善寫想法功能。

原因：

（1）產品定位

主打特色可以看出產品定位，以及發展方向的不同。兩者同時對于領讀這一模塊下了很大的功夫，但玩法不同，「網易蝸牛讀書」通過專業領讀人（內容分享 & 引流導購）發布的專業書評，去引導用戶閱讀，降低用戶的防備心，所以寫作門檻較高。

而「微信讀書」則無此需求，以好友作為切入點，通過好友在看的書，進行熟人引讀，把用戶防備心降到，能讓用戶無成本接受，但同樣容易導致內容參差不齊。

（2）社交屬性

「網易蝸牛讀書」以PGC為主，專業領讀帶動社群發展，看書評人與書法發布方本身可能是粉絲關系，也可能無任何關系。而「微信讀書」以UGC位置，好友之間的想法碰撞占到大多數。

（3）用戶驅動方式

「網易蝸牛讀書」以其特色時長閱讀，以及興趣導向，領讀人粉絲引進為主。而「微信讀書」則有很大部分基于好友之間的競爭關系，通過虛榮心驅動。

所以對于「微信讀書」來說，暫時不需要花較大成本引入專業的PGC內容，性價比不高，與產品定位契合度不高。

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

題圖來自Unsplash，基于CC0協議

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

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

我有一個朋友，名字叫做 Jimmy，這的確是一個很普遍的名字。當我認識他的時候，他正供職于一家名為 Shmuckle 的公司，而他正是這家公司的設計師。和所有的設計師一樣，他日思夜想夢寐以求的，是成為一名著名的設計師，而喬布斯的經歷對他有著不可磨滅的影響。Jimmy 和很多設計師一樣，著迷喬教主。好在 Jimmy 的崇拜并不是停留在嘴上，而是身體力行，力圖在公司里面推行好的設計。在 Jimmy 的眼中，好的設計應該是直觀的、創新且令人愉悅的。

當然，故事的發展如果總是一帆風順就沒有意思了。Jimmy 果然一如正常的劇情推進……他碰到障礙了。

這一次，Jimmy 正在執行一個重要的項目，這個項目的成敗將會直接影響到他的職業生涯。這次的任務，他需要為他們公司的一款產品，重新設計整個控制面板。而就在這次的項目當中，Jimmy 發現他沒有辦法拿出一套足夠優秀的解決方案。好在他還有 Plan B，那就是重新找靈感。Jimmy 開始重新播放他最喜歡的設計類的視頻，閱讀曾經給他啟發的文章，收聽其他同行所開設的播客，以期在其中找到感覺或者靈感。

可惜，靈感并沒有如期而至。局面尷尬了。

就在此刻，援手到了。Sarah 是公司的資深設計師，正巧這個時候路過 Jimmy 的工位，看到了 Jimmy 糾結掙扎的樣子。這是多么熟悉的場景啊，她早年入行的時候，同樣經歷過這樣的狀態，為求一好設計而痛苦不已。如今，她已經能夠輕松駕馭不同的需求，足以應對復雜多變的設計項目。

「Hey Jimmy，老遠就看到你正在揪頭發，看樣子正在構思新設計吧，瞧你這個狀態，應該不太順利吧？」

「誒，客戶說讓我給他們重新設計整個控制面板。他們覺得不夠好使，希望新的控制面板能夠更好展示信息，提升效率，最好再把幾個比較明顯的可訪問性問題給解決一下。但是我怎么設計……都覺得不對?？蛻裟沁呌胁簧偃藚⑴c了測試，有人覺得挺棒的，有人又非常討厭，還有一部分直接說還得接著改?，F在，我覺得無能為力，不知道要怎么弄了?！笿immy 保持著撓頭的姿勢，盯著屏幕說道。

「別糾結，」Sarah 微笑道：「如果一直盯著問題解決問題是常常會陷入這樣的困境的，解決方案其實并不復雜，你需要從根子上來想辦法。只要讓整個設計方案貼合規則基礎穩固了，問題就會迎刃而解了。其實，關鍵也就是幾個基本的設計原則?！?

「雖然這話經常聽到，但是真的能行？」Jimmy 狐疑地盯著 Sarah，思忖兩秒感覺到大姐頭這是要傳授秘籍，便摸過小本子，端正坐姿，準備做筆記：「那么，都有哪些原則呢？」

Sarah 拍了拍 Jimmy 的肩膀，端了杯咖啡，說道：「下樓散步吧，咱們邊走邊聊?！?

「其實，在產品完成之后，是需要基于幾個基本的原則來重新審視和調整設計的?！筍arah 喝了一口咖啡，慢慢地開始說。

保持清晰

Jimmy，如果腦子里面的思路沒有梳理清晰，很難做出條理清晰的產品的。因此，在設計產品之前，先應當消除思維中的混亂，有幾個事情，在設計的過程中要始終保持關注：

• 業務目標，客戶的問題和需要的功能則會催生設計，而這幾個因素之間是存在關系的。
• 永遠不要為了好看而犧牲功能。
• 下一步要做的事情始終要是不言自明的。
• 對于最重要的內容，要借助負空間、色彩、字體、圖形和其他的 UI 元素來進行突出展示的。
• 各種尺寸的文本都應該清晰可見。
• 圖標應該而銳利。
• 除此之外，要讓設計保持微妙而恰到好處。
• 通過設計，你的用戶應該本能的知道他在哪里，以及該做什么。

產品的外觀最終都是在清晰的設計（或者不夠清晰的設計）之下的副產物。清晰的設計意圖，最終會轉化為清晰的產品設計?！狹assimo Vignelli

「我記得 Massimo Vignelli 在他的《The Vignelli Canon》中寫道，一個混亂而復雜的產品始終是源自于制造者本身的混亂，說明這個人本身內心深處心態復雜而想法混亂?！筍arah 說道。Jimmy 此刻若有所思。

可操作的界面

「接下來的這一點也同樣很重要。我們設計的數字產品必須清晰，也要專注于當前的任務，一個交互性強、可操作性優秀的 APP 才是用戶所需要的，而要做到這一點，屏幕上的內容應當始終是的，并且始終保持較高的相關性。與此同時，APP  也應當作為用戶意圖的延伸。如果用戶打開了你的 APP，想要解決某個問題，執行某個任務，而你的 APP 做不到這一點，那么情況就很糟糕了。」Sarah 說道。

她停了幾秒鐘，梳理了一下思路，繼續說道：「你看，我們所做的一切都是為了確保我們的方案，能夠在正確的環境中，面對著對的用戶，解決亟需解決的問題。當然，我們要經歷很多次的迭代，才能靠近這一目標?！?

主觀的愿景

「許多設計師和開發者都在說，APP 應該靈活，應該滿足所有客戶的需求。好吧，Jimmy，這些說法都是胡說八道的。但是有一個說法很真實，也需要你時刻謹記：試圖取悅每個人只會帶來無盡的壓力和痛苦，讓你沮喪，失去資源。所以，不要害怕失去一部分用戶，真正需要擔心的是失去愿景和遠見?！?

「一個偉大的而足夠優秀的數字產品，必須始終清楚它到底是服務于誰的。只有牢記真正的用戶，明白他們的需求，才能開發出真正有效的解決方案。最好的數字產品當中，都是藏著愿景的。」Sarah 和 Jimmy 走到了大樓的窗戶附近，看著外面來往的人流，Jimmy 忍不住問到：「那其他的用戶呢？」Sarah 笑著回答：「當我們滿足目前的目標之后，才能顧的上其他的人。我們的目標用戶才是核心，其他的人不喜歡，和我們的愿景不匹配，也不用操心。市場上會有其他的應用或者服務能夠滿足他們，讓他們高興，而我們總是只能身處一個陣營，你不可能什么都擁有?！筍arah 笑著回答 Jimmy 的疑問。

當人們尋找軟件和服務的時候，他們要的并不是功能，他們要的是解決問題的方法，一個和自己相匹配的愿景?！?7Signals《Getting Real》

反饋系統

下一個原則，也是一個很重要的注意事項，那就是反饋。反饋能夠幫用戶確定操作是否執行了，明白結果是否發生，讓用戶明白當前的情況：

• 交互發生時，相應的交互元素應該被凸顯出來
• 進度指示控件應該持續地顯示當前狀態
• 動畫和聲音的加入有助于用戶理解交互的狀態和結果

「我想你應該知道，即使技術如此的進步，人類本身的生物性決定了我們依然是依靠反饋來確知互動的結果和狀態的。我們的身體（視覺或者觸感）需要感受到反饋，再像大腦發出信號，而虛擬的界面背后到底在發生什么，需要全面的交互設計傳遞出來，只有這樣用戶才不會費勁巴拉地去思考之前的點擊或者滑動交互是否操作成功了。反饋給用戶的信息也應該是能夠被輕松理解的，用戶不應該在這個事情上再費勁去思考了。因此，你手邊應該有關于心理學、行為學這類能夠揭示人類思考的圖書，因為它們能夠幫你提升技能?！筍arah 喝了一口咖啡，潤了潤嗓子，帶著 Jimmy 又溜達上樓，回到了辦公室。

善用隱喻

「隱喻——我這里說的并不是文學中的隱喻，」Sarah 又提到了一個看似無用但是經常被說起的概念：「你看，UI界面中的設計元素和交互方式和我們的現實生活中的元素和交互方式是如此的相似，這就是借用隱喻將我們的熟悉的元素和交互都投射到虛擬的數字產品當中。這樣一來，用戶會更快地學會和理解。」

「正是因為隱喻的存在，現實的經驗和虛擬的交互產生了關聯，用戶交互因此而更加自然地發生。視線隨著被精心設計的布局而游移到重點上，用戶會下意識地點擊被高亮顯示的、和現實按鈕差不多的交互控件，他們還會下意識地在虛擬的屏幕上滑動，在界面之前自然游走。因此，你有必要了解你的核心用戶每天都在使用哪些 APP，他們都是如何交互的。這有助于你吸收經驗，消除不良的體驗，創造舒適的交互，降低學習的壓力，更好地轉化?！筍arah 一邊說著，一邊下意識地模擬著交互并解釋道。

內容的一致性

「接下來我們還是用案例來說明一下，會更容易理解?！拐f著 Sarah 坐到椅子上，并且打開電腦屏幕，說道：「比如我們要做一個日歷，你認為它應該是網格，還是做成列表？」Jimmy 撓頭想了一下，遲疑道：「恩……我們應該堅持使用網格的樣式。它更加緊湊也更加有條理，我說的對嗎？」

「其實這取決于用戶的主要目標是什么。如果這個日歷元素是出現在報告文檔當中，應該是用網格的樣式還是列表的樣式呢？一樣的，這要看情況。我們是否要在每個應用中都使用全局導航？同樣是需要基于上下文情況來決定的。一致的設計不止是表面樣式上的一致，還需要從需求、內容、用戶使用場景和體驗上來保持一致性。如果在特定的情況下，獨特的設計能夠帶來更大的價值，那么這是有意義的，這種特殊情況下不同是有必要的。」Sarah 細心地為 Jimmy 解釋道。

良好的設計，應該是特定語境經過評估后定制的副產物，而不是脫離使用場景而憑空創造出來的，否則，無論多么炫酷都是不合時宜的?！狹assimo Vignelli

防御性設計

「最后要說的，是防御性設計。」Sarah 轉身對著 Jimmy，然后說道最后一個規則。

「防御性設計？什么東西？」Jimmy 感覺今天學到了不少，最后這個原則也被他寫到小本子上了?！高@個啊，也就是大家常說的直覺性設計?！筍arah 微微一笑。

「我知道！喬布斯以前就經常說這個概念！」Jimmy 終于找到一個他足夠熟悉的概念，興奮不已。

「可是，你真的知道什么是直覺性的設計么？」Sarah 看著興奮的 Jimmy 賣了個關子。

「預測用戶行為？然后在用戶要執行下一個操作之前幫他解決需求？」Jimmy 狐疑地問道。

「是也不是。它并不是讓你去預測用戶的行為，防御性設計是為了避免出錯。無論你如何謹慎地去做設計，總會有錯誤發生，無論你做過多少調研，你計劃有多么妥帖，你的產品總會需要一個備用方案來規避問題?！筍arah 說道：「防御性設計，是讓你找到可能會出現的問題?！?

相信我，你的產品如果給了用戶負面的體驗，他們絕對不會忘記。

「我還是沒明白你的意思……」Jimmy 習慣性地撓頭。Sarah 耐心地開始解釋：「以開車為例來說明這個事兒吧。當你開車的時候，總會盡量避免道路上各種可能出現的危險情況，比如魯莽駕駛的大貨車，三心二意橫穿馬路的行人，懵懂無知在路邊打鬧的兒童，甚至野外竄上馬路的野鹿，等等。同樣的，作為設計師，我們需要預料到可能會出現的問題，以及始終保持專注來修復這些問題。這樣我們就不會破壞整個用戶體驗。我們要有良好的防御性的設計意識，維持住體驗，改善體驗?！筍arah 說到這個地方的時候，Jimmy 感覺她身上散發著某種光芒。

然后 Sarah 起身，帶著 Jimmy 回到他的工位?！冈趺礃?，這些東西你都記下來了嗎？」Sarah 打趣地歪著頭看著低著頭還在琢磨的 Jimmy，如同大男孩一樣的 Jimmy 驚訝地抬頭問道：「什么意思？這就是全部嘛？難道只有這些？」

Sarah 呼出一口氣，微笑著對 Jimmy 說道：「好了好了，設計原則、規則、規范、技巧有太多，可是對于每個人，每個公司而言，都有屬于自己的一套方法和策略。你可以盡興地去探索，但是即使你不知道全部，也可以借助你所熟知的幾個原則和策略，拿出足夠優秀的設計。我把我最熟悉的、掌握地最嫻熟、體會最深刻的幾個原則分享給你，它們足以幫你開啟一條走向好設計的道路，我覺得你要是真的體會到了，就已經能夠拿出比別人更好的東西了。其他的設計原則，只要你有耐心和時間，還可以繼續探索。該工作啦?！?

尾聲

就像 Sarah 說的，設計原則太多了，誰又規定死了具體有幾條呢？每個人心中的哈姆雷特都不一樣，每個人眼里的哈利波特又何嘗是一樣的呢？

最重要的問題在于，許多人知道原則，卻并不會在設計項目當中運用它們。洞悉每個設計項目當中的重點，了解客戶的需求，明白首要的設計目標，在產品和用戶之間，找到平衡點，用心地思考，利用好設計原則這一利器。

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

實例分析拆解：如何設計登錄注冊？

人人都是產品經理 2018-08-09 18:42:15

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

最近對我們的APP的賬戶體系進行了改版，研究了各類產品的設計。賬戶體系雖然幾乎是通用標配功能，但是各APP的都有差別，都是針對當前的產品形態、發展階段和用戶量級做出了符合自己的設計。賬戶體系的關鍵點在登錄注冊流程上。登錄注冊流程看似簡單，實際考量設計功力。網上關于登錄注冊的綜述有很多了，但是從零到一整合分析的很少，以下，將以實際的產品為例，精細分析如何設計賬戶體系。

一、立項背景

我們的產品第一版賬戶體系由于歷史原因，做的比較生硬。

初期主攻社交，希望可以沉淀用戶信息，手機賬號會是第一優先選擇，當時的方案是手機號注冊+賬號密碼登錄/第三登錄+立刻綁定手機賬號。

如你日常體驗那樣，第三方登錄+立刻綁定手機的方式，直接抵消了第三方登錄的便利，比直接手機號注冊更麻煩。而且，設計上，手機號注冊需要設置兩次密碼，密碼需要一致；設置之后，還得進入登錄界面，再次填寫賬號密碼，正確匹配才可以進入APP。

總的來說，用戶進入APP的路徑相當長，步驟多，用戶體驗低分。

近況是，產品方向探索，將重點落在商城上。完成交易的流程本身就多步驟，再疊加原來的登錄注冊，路徑過深，對拉新損耗大，急需改進。

二、需求分析

從業務發展趨勢來看，微信會是重要的用戶來源，后續會布局更多的微信運營活動，和商城小程序，設計引流到APP，需重點突出微信登錄。

而商城交易需要保證安全性，同時兼容老用戶，手機注冊密碼登錄必不可少。考慮到用戶文化水平，和互聯網產品使用習慣，需要在常規的基礎上做簡化。

第三方登錄需要在關鍵點綁定，商城推廣員提現時變更銀行卡，需加以驗證身份。

新用戶剛進來，可以先瀏覽熟悉產品內容，在需要身份信息時，再進行引導登錄。

三、功能點梳理

登錄注冊流程：微信/QQ第三方登錄、驗證碼登錄/注冊、密碼登錄、找回密碼。

賬戶體系配套：關鍵點引導綁定手機、關鍵點強制綁定手機、驗證碼驗證賬號、賬號相互綁定。

細節功能點見下方的賬戶體系功能點梳理圖。

四、流程圖（登錄注冊）

未登錄用戶，到達需要獲取用戶身份信息的界面（為了平衡效率和體驗，一般是除一級界面以外的），則觸發注冊登錄流程。用戶完成注冊登錄之后，才可使用和操作絕大部分的功能。

本流程圖需要配合頁面交互原型理解。

五、關鍵頁面交互設計

登錄注冊體系將包含五個部分，主界面、驗證碼登錄/注冊、密碼登錄、忘記密碼和新用戶注冊，在實際流程操作中會根據用戶的選擇，和系統的判斷進行切換。賬戶體系的配套將會略過，以下是登錄注冊的頁面交互設計、設計考量和功能點介紹。

1.主界面

• 布局：主界面集合三種登錄方式，將微信登錄作為主方式。
• 前提：成功登錄的前提條件是必須先勾選同意用戶協議，否則報錯。
• 授權：第三方的登錄，點擊微信orQQ，授權成功后，即可登錄進入APP，自動獲取用戶的昵稱性別頭像信息填充社交頁。

2.驗證碼登錄/注冊

（1）設計解析

• 手機賬號登錄，考慮簡單又快速進行，突出驗證碼快速登錄/注冊，輔以密碼注冊。
• 密碼注冊的弊端是很容易忘記密碼，忘記之后，找回密碼流程也繁瑣。
• 驗證碼登錄，雖然對頻繁換手機的用戶是個噩耗，短信也有達到率的問題，但考慮到效率跟成本，特別在拉新環節，還是作為主方式。

其實基于驗證碼到達率和安全性，我考慮過換移動認證，就是手機號碼一鍵登錄，無需密碼跟驗證碼?？上嶋H接洽的時候行不通，而放棄了，文本會介紹下這個事情。

（2）設計點

• 驗證碼登錄：登錄注冊界面為驗證碼登錄，附以密碼登錄。
• 按鈕：登錄注冊的按鈕合二為一。也就是說，用戶不需要選擇是登錄還是注冊，將判斷交給了后臺。只要用戶的手機號碼還在，直接憑驗證碼進入即可。比起選擇密碼登錄之后忘記密碼，或者是干脆就不記得自己是否注冊過，在錯誤的界面輸入信息之后來回切換，二合一的方式更加友好，也是本次設計的一個亮點。
• 手機號碼：采用更加清晰的的3-3-4數值格式，輸入框末尾配清除按鈕，錯誤輸入后可一鍵清除。手機號碼輸入框也有記憶功能，可獲取前一次登錄的手機賬號，可以獲取同一次登錄注冊已填過的賬號信息。
• 驗證碼：手機號碼位數輸入正確類型和位數之后，才激活驗證碼功能。否則點擊會報錯。之后，驗證碼的激活以變色表現，這是個視覺指示。輸入完成第一行，人眼會自然而言的落在第二行的開頭，如無例外，用戶需要尋找一番，才會覺知過來，去點擊獲取驗證碼。
• 加載指示：數據傳輸到服務端，判斷對錯，再返回結果。這個流程費些時間，用加載小菊花，表示后臺正在處理，舒緩下等待的焦急。

3.密碼登錄

（1）設計解析

密碼登錄考慮到向后兼容，老用戶的賬號以密碼登錄；也是適應本期的新用戶注冊。

同時標配忘記密碼，也可切換新用戶注冊，或驗證碼登錄，這些元素的布置考慮，是基于流程的。

密碼的輸入，其實正如設置密碼，應該做格式限制。但是因為第一版沒限制，不清楚用戶設置了什么，所以此處不能輕易填坑。

數據輸入都該考慮下限制的，為什么？在給產品經理講技術這書里，要是你看到黑科技SQL注入攻擊也會很印象深刻的……

（2）流程

跟驗證碼的簡單路徑不一樣，密碼登錄因重在流程上邏輯自洽，更需配流程圖查看才好理解。

正常流程是：輸入手機號->輸入密碼->點擊登錄->登錄成功。

異常流程是：

• 輸入手機號->輸入密碼->點擊登錄->提醒“未注冊”->點擊新用戶注冊or返回上一級驗證碼登錄/注冊。
• 輸入手機號->輸入密碼->點擊登錄->提醒“未注冊”->賬號或密碼不對->重新輸入or忘記密碼or驗證碼登錄。

4.忘記密碼

（1）設計解析

步驟：忘記密碼此處分兩步，一步驗證，一步設置。設置完之后，直接登錄進入APP，無需再重復密碼登錄的步驟。（記不住密碼更痛苦的事情是，忘記密碼剛找回來，在下一步重新登錄的時候又忘記了）。

異常流程：忘記密碼此處還有個異常流程，是該賬號不存在。有童鞋會說，正是密碼輸錯才會到來這界面，這么還會有賬號不存在的情況？對，情理上其實不大可能發生，但是程序邏輯上有這個可能，但是又無法通過前面的步驟過濾掉，是要補充下的。

此處判斷賬號不存在的提醒，是點擊獲取驗證碼之后，亮點之一。這里是考慮辛辛苦苦獲取驗證碼，填寫完畢之后才來告訴用戶賬號不存在，有些不厚道的……

（2）設計點：

驗證賬號：常規的做法，先驗證碼驗證手機號，再下一步設置密碼。

有些APP會將驗證賬號跟設置密碼放在同一個頁面，其實拆開會更清晰。而且，驗證手機號碼步驟復用率是很高的，比如，可以復用到推廣員更改綁定銀行卡時，作為賬號驗證。

設置密碼：密碼設置要限定格式，之后僅需輸入一次就可以直接登錄進入了。

重復兩次數據，再次校驗肯定更穩妥，但是登錄成本提高了，以我們用戶的耐心，我們的產品就沒必要承擔這個教育成本了。如果說擔心手誤輸錯了的，可以用驗證碼登錄的，再不濟可以用找回密碼的。但是大多數用戶其實只考慮本次能快點進入就好。

5.新用戶注冊

（1）設計解析

新用戶注冊界面近乎跟忘記密碼是一樣的流程，區別在點擊獲取驗證碼，此處的異常流程是該賬號已存在。此處設置優化的流程，判斷是已有賬號之后，會直接跳轉到驗證碼登錄/注冊界面處，直接獲取已填寫的手機號碼，驗證就行，對新用戶盡量友好。

經過前面的界面篩選，此處的賬號不存在的發生概率很少，但是作為關鍵流程而言，完整性是必要的。

（2）移動認證

文內留個懸念要談談移動認證，移動認證是什么？最直接的體驗是，無需輸入任何數據，直接點擊授權就登錄。是不是很黑科技？！ 但是為什么最終放棄了呢，請聽細講。

理想情況：

移動認證是運營商移動提供的，基于手機sim卡和移動網絡直接認證登錄的技術，米家、愛回收跟同花順應用在了自家APP里。當時上手體驗，驚艷，簡直零感登錄；況且移動官網也有免費的sdk，更是竊喜。以移動認證為主登錄的原型設計完畢，就立刻接洽移動認證sdk的接入。

現實情況：

但是呢，很快就被開發文檔打臉了，簡言之，就是層層篩選之下，能一鍵登錄的用戶遠沒有想象的多。

移動認證的原理是基于移動網絡通信的。首先基于sim卡識別本機號碼，在移動網絡開啟的前提下傳輸信息以授權通過，此時可順利登陸；但是如果沒開移動網絡，就沒轍了；如果WiFi跟移動網絡同開，以WiFi為主，那將強制占道先驗證再釋放WiFi。如果移動網絡通信不成，那就通過短信收發來完成數據傳輸。

所以，這么流氓的做法蘋果肯定是不樂意的；電信不參與；oppo的ROM不支持此流程……層層篩選下來，加上關閉移動網絡的，能順利使用的其實不多；而且，除非付費，否則移動認證的logo說明只能用官方的，簡直是給移動打廣告….這些阻力遠高于收益，所以，果斷放棄了，采取了本文講述的方案。

果然，合適的才是最好的。

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

題圖來自 Pexels ，基于 CC0 協議

社交電商只有拼團和砍價？口袋咖啡給你答案

人人都是產品經理 2018-08-10 17:41:58

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

這兩年來，咖啡業不甘寂寞，和互聯網碰撞出的火花越來越多。瑞幸咖啡異軍突起，連咖啡微信關系鏈玩得風生水起，星巴克也牽手阿里巴巴準備收復失地。今天我們就來關注一下連咖啡最近做的一波營銷活動“口袋咖啡館”。

“口袋咖啡館”是連咖啡小程序內新上線的一個功能，據公開報道的數據：

上線首日PV超過420萬，累計開出咖啡館超過52萬個，相當于一天有52萬人開了線上咖啡館。

體驗“口袋咖啡館”之后，我總結成功之處有以下幾點：

1. 情懷切入和個性化展示，實現破冰

相信很多愛喝咖啡的人都曾經有個不成熟的夢想叫做“我要開一個咖啡店”，文藝的音樂，明媚的陽光，飄香的咖啡，過此余生。但是因為資金壓力，生存壓力，咖啡店對大部分人只能說這是一個夢想，或是情懷。

而在線上開一個咖啡店，不用店租，不用進貨囤貨，甚至不會做咖啡業不要緊，把開店的行為壓縮為裝飾店鋪和朋友圈賣咖啡，實現情懷是不是變得毫無壓力和簡單了？

先不管“口袋咖啡”背后利用社交渠道賣咖啡，讓店主成為分銷商的本質，首先“口袋咖啡”抓住了大部分用戶的情感需求，簡化用戶行為，獲得了第一波流量。

“口袋咖啡”可以讓用戶自主地去裝修自己的線上店鋪，讓用戶盡可能地發揮自己的想象，各種奇思妙想發酵，用戶裝修好了，很可能迫不及待地先分享店面給好友。好友一看，有意思，我也玩，這樣就把第一波流量給動起來了，帶入新的流量。

這兩個設計是抓住了用戶的情懷圓夢需要和展示個性化自我的需要，從而獲得最初的流量并開始傳播。

2. 低價單品，獲取流量

光靠情懷和個性化展示，應該是無法保證更大的流量獲取。

口袋咖啡店鋪里的咖啡都是有折扣的，與官方價格相差10多元，甚至還做了一款9元的美式咖啡。分享的文案上也突出了下單9元起的字樣，通過價格對比，突出低價來吸引更多的流量，而且新用戶購買，首單立減9元。

這就將“低價爆款”+“新用戶下單減”結合起來，對于大部分用戶來說，工作日時候不會對咖啡太過挑剔，價格有優惠，我買誰的不是買呢？

而且還是微信好友“開的”咖啡館，情感+好奇心的加持，吸引了又一波流量。

3. 游戲化的任務激勵，環環相扣

“口袋咖啡”設計了一套游戲任務進階提現，通過這樣的模式保持用戶的粘性，讓用戶投入更多的時間和社交關系。這套體系由成長咖啡和網紅指數為目標，設計了一系列的任務讓用戶完成以提高這兩個目標。

成長咖啡相當于貨幣，可以積攢兌換咖啡，獲得的方法是每賣出一杯咖啡獲得0.1杯，攢滿1整備成長咖啡就可去免費兌換。這里對于用戶來說，目標是獲得免費兌換咖啡，而規則就是賣咖啡，為了達到目標，用戶就會去分享，去安利，可能帶來更多的流量；

而網紅指數相當于積分，積分的價值在于解鎖特權，包括更多的商品、裝飾等。以及獲得更高的排名。而這些特權則是可間接有助于提高用戶銷量的，有助于用戶完成“免費兌換咖啡”，獲得網紅指數的方法則是一系列的任務。

目前的任務較少，不知道后續是否會放出更多玩法。

回過頭來，你會發現“口袋咖啡”這一系列打法都是相關聯的，都指向了同一個目標獲得免費咖啡（背后其實是賣出更多咖啡），彼此是有承接關系，形成了有效的循環。

4. 社交互動帶動裂變和變現

連咖啡一直都在嘗試做“基于人際關系鏈”的產品，他們認為這是獲取流量最的工具。在“口袋咖啡”里則明顯地提現這一點。

4.1 土豪榜和點贊榜，記錄好友和你的互動

口袋咖啡有兩個榜單，分別是土豪榜和點贊榜，前者記錄誰買過了你的咖啡，點贊榜則記錄了誰給你點過贊。交易和點贊，一個是實際的消費，一個是情感的激勵，會給用戶產生更大的正向刺激。

4.2 讓用戶產生更多的互動行為

如果用戶在一個產品之上產生的互動行為越多，則用戶和產品的粘性越緊密，用戶主動推薦這個產品的可能性也越大。

如何讓用戶產生更多的互動行為？如何撬動更多的社交鏈條呢？

口袋咖啡準備了3個手段，分別是明星館、附近的館、我去過的館。

明星館，邀請了一些流量明星入駐，有佘詩曼、秦嵐、李誕等，而且佘詩曼、秦嵐還是目前熱播的《延禧攻略》的主演，抓住眼下的新聞熱點，結合明星自帶粉絲的流量，粉絲通過點贊和購買咖啡行為的與明星發生互動。

開一下腦洞，這是不是可以成為另一種形式的明星榜單，各家粉絲通過點贊，買咖啡為自己的愛豆打榜，互相攀比，搞不好可能會成為一個固定的大流量入口。

粉絲組織+明星效應+群體攀比效應=大流量？

這個需要拭目以待。

附近的咖啡館，和微信本身附近的人異曲同工。利用用戶的好奇心驅動，看看附近都有誰在開咖啡館，會不會又好玩的小哥哥小姐姐，點個贊，買個咖啡，也是不錯的。

店主一看有人給我光顧我了，看一眼就在附近，來而不往非禮也，也過去點個贊。一來一往，用戶就在線上咖啡館之間互相流動起來。如果后面官方圍繞這一塊繼續做網站，比如：解鎖特權可以給附近的人推送自己的咖啡，完成某個任務看店主的微信等等，有可能會產生新的興奮點。

當然社交電商里，電商還是初心和本質，社交到底要到什么樣的程度，才能有利于電商而不是起副作用，這個度需要團隊把控。

我去過的，則是將我訪問過的咖啡館沉淀下來，便于后續的訪問，也可以看成團隊為后續的社交互動埋下的伏筆。

連咖啡的一系列動作，個人覺得最終目的是希望把咖啡變成貨幣，不再是人來買咖啡，而是咖啡主動觸達到人。不僅僅依靠傳統的商品-貨幣的交易模式，而是希望代入更多的情感因素、社交元素，通過人與人的關系鏈去獲得更多的流量，并且帶動更大的交易額。

而近期包括送禮，運動步數換購小程序的崛起，越來越的商家開始關注用社交關系來獲客，此前對社交電商的關注更多局限于微商這樣的朋友圈叫賣、拼團、砍價、求復活滿天飛，容易讓用戶產生反感和厭倦。

那么如何讓用戶不反感甚至是主動地貢獻自己的社交關系，則是下一步互聯網公司們重要的課題。

#專欄作家#

肥寒，微信公眾號：chanpingdog，人人都是產品經理專欄作家。九年產品經理。做過數字閱讀，電商，社區，目前致力于在線教育。

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

題圖來自 unsplash，基于 CC0 協議

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

您對用戶的了解程度如何？怎么能真正受到人們的啟發呢？我怎么能進入他們的想法，我怎么能感受到他們的感受？在這里，你不僅需要了解是什么觸發了它們，而且還需要找到如何設計說服的方法。

作為一個直接響應式的功能平臺，第一個手機網站只是一個“試驗品”，而不是“成品”。在今天，如此多的智能設備的確給了我們機會去做更多的視覺設計，但這不僅能激發和吸引用戶，而且增加了用戶體驗。當然伴隨著機會就以為著更多的挑戰。

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

網頁設計是什么？
 網頁設計也被稱為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，即超文本標記語言?！俺谋尽笔钦f這種語言內可以包含文字元素以及調用圖片、鏈接、音樂等非文字元素。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

雪碧圖

我們經常看到網站中會有動畫，那么動畫實現的原理一般有如下這么幾個：第一，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更??？因為如果比12像素更小的中文無法放得下復雜的筆畫了。而且奇數的文字表現和適配都不好做，也就是說我們必須使用偶數的字號來設計。那么總結一下：文字使用宋體、大小為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用戶用的更爽，可以從文字大?。?4PX以上）、按鈕大?。?8PX左右以及以上）、交互形式（抽屜式導航、導航不隨屏幕滾動）等方式入手。

不同設備的注意事項

總結

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

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

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

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

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

有時一個新功能的上線，新內容的更新，會導致在一個頁面中出現層疊式的引導內容，頁面上大部分引導的觸發時機也比較接近。那么，對于這種多重引導，要如何處理呢？

交互設計流程中，每當有新功能上線或者新的內容優化更新時，對應版本中一定會出現新手引導或者相應形式的提示內容，這在業界似乎已經成為一個約定俗成的東西。

畢竟，酒香也怕巷子深，在這個用戶注意力被極度分散的時代，任何一個應用都不敢說，自己可以占據用戶每天絕對時長的時間，讓用戶來“充分”自己挖掘每個版本的更新內容。

所以，“自薦”似的引導出現在了每一次的應用安裝或者更新中。

在一次版本驗收中出現了這樣一個問題：最初的設計過程中，由于功能模塊都是單獨提出需求的，所以交互設計文檔給出的時候也是拆分成不同的模塊提交，可是實際驗收時，當所有的新功能都在一個頁面中呈現的時候，問題就出現了。

由于頁面功能改版較大，既有新功能的上線，又有新內容的更新，所以在一個頁面中出現了層疊式的引導內容，頁面上大部分引導的觸發時機也比較接近，因此就會在某些頁面出現氣泡、蒙層引導堆疊顯示效果，讓人防不勝防。

在于產品和開發同學溝通后發現，除了需要合理統籌調整觸發時機以外，需求提出時并未嚴格區分每個引導是根據用戶ID來判斷，還是依據設備ID來判斷，實現過程中統一默認以用戶ID作為了引導出現的標準。

結果導致頁面中出現引導堆積的情況出現，將引導的觸發條件增加一條設備ID和用戶ID，本質目的是將引導出現的時機更加合理化，在不影響用戶操作流程的情況下向用戶傳遞信息，提升用戶體驗。

如何解決這個問題？

還是需要從本源找起：一是引導的目的，二是觸發的判斷依據。

一、引導的目的

（1）新用戶操作引導

主要是指用戶第一次安裝應用后出現的引導，告知用戶核心操作方法和流程。

（2）功能更新引導

主要針對產品功能升級后，用來告知用戶新功能的入口、操作方式等內容。

（3）與用戶權益相關更新或說明

當更新內容與用戶權益、身份屬性內容相關時，需要出現適當的引導或者氣泡形式的提示來告知用戶，這種引導與用戶的激勵體系、產品玩法高度相關。

（4）常規功能操作引導

這種操作引導較為常見，每次更新應用或者新安裝時都會出現，幾乎成為例行出現的“常識性”引導，例如：頁面中的手勢操作引導等。

以上4中引導類型，在具體展示形式上主要包括前置引導和過程中引導兩類。

前置引導：類似于引導頁，在用戶開始使用應用前直接告知用戶更新的功能、玩法等enrich，一般都是全端出現的。

過程中引導：是指用戶在實際使用到，或者進入該功能入口所處界面時出現的引導，這種引導需要用戶的觸發時機。而且由于出現在操作過程中，對操作本身具有阻礙的副作用，所以也只會出現一次而已。

了解了使用引導的目的，再來看一下觸發引導的判斷依據——設備ID和用戶ID。

二、觸發的判斷依據

（1）設備ID

是指Device ID，是一臺設備的識別標識，正常情況下，一款移動設備上的應用，無論切換都少個登錄賬戶，其設備ID是不變的（刷機除外）。

（2）用戶ID

即User ID 或者UID，是用戶在登錄應用后的身份識別碼。用戶ID產生的條件是需要用戶注冊生成賬戶后登錄App，這樣用戶就可以想服務器發送和接收消息，服務器也可以通過UID來進行準確的push消息推送，用戶與服務器之間可以進行交互。

除去一些純工具類型的產品，大部分應用都需要用戶注冊登錄后使用，當然，在這里就不深究是否強制用戶登錄等邏輯。

三、解決方案

明確了以上兩方面內容，同時考慮引導使用的形式，其實也就不難判斷，應該如何處理頁面中多層引導的問題了。

（1）新用戶操作引導/功能更新引導

這類引導如果使用前置引導類型，則信息傳遞是面向全局的。

當功能引導與用戶個人信息無關，只是功能操作或者內容更新時，往往可以以設備ID作為推送判斷標準，即一個設備，在一次應用安裝周期中，出現一次即可。若用戶在引導出現后，切換了登錄賬戶，再次打開該界面時，不在出現重復的新手引導。

簡單來說，此類引導的出現不需要區分用戶信息，甚至不需要用戶登錄即可使用，所以基本上此類引導均已設備ID為觸發判斷的基本條件。

若此類引導使用過程中引導，則需要在實際使用過程中抓取適當的觸發時機，此時如果出現多重引導時，則需要適當區分使用用戶ID或者設備ID作為觸發條件，從而將引導出現的時機合理區分。

（2）與用戶權益相關更新或說明

此類引導一般需要細分用戶身份信息，準確推送用戶所需的內容。例如：會員與非會員之前在某個功能上有權益的差別，引導或者提示的內容則需要按身份不同來推送。使用前置形式時，可以根據實際需求調整判斷依據；使用過程中中引導，這時則基本上需要使用用戶ID作為觸發依據，其他引導可使用設備ID用以區分不同引導。

（3）常規功能操作引導

『例行』出現的引導，不受場景限制，與用戶權益關聯度較低，因此以設備ID作為觸發的基本判斷依據即可。

四、小結

當頁面功能過多的時候，難免會遇到多重引導的問題出現，除了通過展示形式、頁面內的觸發時機來區分以外，還可以通過設備ID和用戶ID的作為觸發依據來細化和區分引導出現的時機和場景。

不過這種判斷方式也并不是一成不變的，需要靈活處理，例如：當引導出現時，該場景下用戶處于未登錄狀態，此時服務器根本無法獲取用戶ID，在此場景下討論設備ID還是用戶ID顯然毫無意義，需要重新調整引導出現的時機或者展示形式。

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

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

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

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

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

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

---

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

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

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