如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
小時候我們很多經驗都是來自于寓言故事，故事總能幫你更好地理解一些事情和道理。關于設計，這個道理同樣適用。今天的文章，我們就跟著一個設計師的經歷來學點什么吧。我有一個朋友，名字叫做 Jimmy，這的確是一個很普遍的名字。當我認識他的時候，他正供職于一家名為 Shmuckle 的公司，而他正是這家公司的設計師。和所有的設計師一樣，他日思夜想夢寐以求的，是成為一名著名的設計師，而喬布斯的經歷對他有著不可磨滅的影響。Jimmy 和很多設計師一樣，著迷喬教主。好在 Jimmy 的崇拜并不是停留在嘴上，而是身體力行，力圖在公司里面推行好的設計。在 Jimmy 的眼中，好的設計應該是直觀的、創新且令人愉悅的。
當然，故事的發展如果總是一帆風順就沒有意思了。Jimmy 果然一如正常的劇情推進……他碰到障礙了。
這一次，Jimmy 正在執行一個重要的項目，這個項目的成敗將會直接影響到他的職業生涯。這次的任務，他需要為他們公司的一款產品，重新設計整個控制面板。而就在這次的項目當中，Jimmy 發現他沒有辦法拿出一套足夠優秀的解決方案。好在他還有 Plan B，那就是重新找靈感。Jimmy 開始重新播放他最喜歡的設計類的視頻，閱讀曾經給他啟發的文章，收聽其他同行所開設的播客，以期在其中找到感覺或者靈感。
可惜，靈感并沒有如期而至。局面尷尬了。
就在此刻，援手到了。Sarah 是公司的資深設計師，正巧這個時候路過 Jimmy 的工位，看到了 Jimmy 糾結掙扎的樣子。這是多么熟悉的場景啊，她早年入行的時候，同樣經歷過這樣的狀態，為求一好設計而痛苦不已。如今，她已經能夠輕松駕馭不同的需求，足以應對復雜多變的設計項目。
「Hey Jimmy，老遠就看到你正在揪頭發，看樣子正在構思新設計吧，瞧你這個狀態，應該不太順利吧？」
「誒，客戶說讓我給他們重新設計整個控制面板。他們覺得不夠好使，希望新的控制面板能夠更好展示信息，提升效率，最好再把幾個比較明顯的可訪問性問題給解決一下。但是我怎么設計……都覺得不對。客戶那邊有不少人參與了測試，有人覺得挺棒的，有人又非常討厭，還有一部分直接說還得接著改?，F在，我覺得無能為力，不知道要怎么弄了。」Jimmy 保持著撓頭的姿勢，盯著屏幕說道。
「別糾結，」Sarah 微笑道：「如果一直盯著問題解決問題是常常會陷入這樣的困境的，解決方案其實并不復雜，你需要從根子上來想辦法。只要讓整個設計方案貼合規則基礎穩固了，問題就會迎刃而解了。其實，關鍵也就是幾個基本的設計原則。」
「雖然這話經常聽到，但是真的能行？」Jimmy 狐疑地盯著 Sarah，思忖兩秒感覺到大姐頭這是要傳授秘籍，便摸過小本子，端正坐姿，準備做筆記：「那么，都有哪些原則呢？」
Sarah 拍了拍 Jimmy 的肩膀，端了杯咖啡，說道：「下樓散步吧，咱們邊走邊聊。」
「其實，在產品完成之后，是需要基于幾個基本的原則來重新審視和調整設計的?！筍arah 喝了一口咖啡，慢慢地開始說。
Jimmy，如果腦子里面的思路沒有梳理清晰，很難做出條理清晰的產品的。因此，在設計產品之前，先應當消除思維中的混亂，有幾個事情，在設計的過程中要始終保持關注：
產品的外觀最終都是在清晰的設計（或者不夠清晰的設計）之下的副產物。清晰的設計意圖，最終會轉化為清晰的產品設計?！狹assimo Vignelli
「我記得 Massimo Vignelli 在他的《The Vignelli Canon》中寫道，一個混亂而復雜的產品始終是源自于制造者本身的混亂，說明這個人本身內心深處心態復雜而想法混亂?！筍arah 說道。Jimmy 此刻若有所思。
「接下來的這一點也同樣很重要。我們設計的數字產品必須清晰，也要專注于當前的任務，一個交互性強、可操作性優秀的 APP 才是用戶所需要的，而要做到這一點，屏幕上的內容應當始終是的，并且始終保持較高的相關性。與此同時，APP 也應當作為用戶意圖的延伸。如果用戶打開了你的 APP，想要解決某個問題，執行某個任務，而你的 APP 做不到這一點，那么情況就很糟糕了?！筍arah 說道。
她停了幾秒鐘，梳理了一下思路，繼續說道：「你看，我們所做的一切都是為了確保我們的方案，能夠在正確的環境中，面對著對的用戶，解決亟需解決的問題。當然，我們要經歷很多次的迭代，才能靠近這一目標?！?
「許多設計師和開發者都在說，APP 應該靈活，應該滿足所有客戶的需求。好吧，Jimmy，這些說法都是胡說八道的。但是有一個說法很真實，也需要你時刻謹記：試圖取悅每個人只會帶來無盡的壓力和痛苦，讓你沮喪，失去資源。所以，不要害怕失去一部分用戶，真正需要擔心的是失去愿景和遠見?！?
「一個偉大的而足夠優秀的數字產品，必須始終清楚它到底是服務于誰的。只有牢記真正的用戶，明白他們的需求，才能開發出真正有效的解決方案。最好的數字產品當中，都是藏著愿景的?！筍arah 和 Jimmy 走到了大樓的窗戶附近，看著外面來往的人流，Jimmy 忍不住問到：「那其他的用戶呢？」Sarah 笑著回答：「當我們滿足目前的目標之后，才能顧的上其他的人。我們的目標用戶才是核心，其他的人不喜歡，和我們的愿景不匹配，也不用操心。市場上會有其他的應用或者服務能夠滿足他們，讓他們高興，而我們總是只能身處一個陣營，你不可能什么都擁有。」Sarah 笑著回答 Jimmy 的疑問。
當人們尋找軟件和服務的時候，他們要的并不是功能，他們要的是解決問題的方法，一個和自己相匹配的愿景。——37Signals《Getting Real》
下一個原則，也是一個很重要的注意事項，那就是反饋。反饋能夠幫用戶確定操作是否執行了，明白結果是否發生，讓用戶明白當前的情況：
「我想你應該知道，即使技術如此的進步，人類本身的生物性決定了我們依然是依靠反饋來確知互動的結果和狀態的。我們的身體（視覺或者觸感）需要感受到反饋，再像大腦發出信號，而虛擬的界面背后到底在發生什么，需要全面的交互設計傳遞出來，只有這樣用戶才不會費勁巴拉地去思考之前的點擊或者滑動交互是否操作成功了。反饋給用戶的信息也應該是能夠被輕松理解的，用戶不應該在這個事情上再費勁去思考了。因此，你手邊應該有關于心理學、行為學這類能夠揭示人類思考的圖書，因為它們能夠幫你提升技能。」Sarah 喝了一口咖啡，潤了潤嗓子，帶著 Jimmy 又溜達上樓，回到了辦公室。
「隱喻——我這里說的并不是文學中的隱喻，」Sarah 又提到了一個看似無用但是經常被說起的概念：「你看，UI界面中的設計元素和交互方式和我們的現實生活中的元素和交互方式是如此的相似，這就是借用隱喻將我們的熟悉的元素和交互都投射到虛擬的數字產品當中。這樣一來，用戶會更快地學會和理解?！?
「正是因為隱喻的存在，現實的經驗和虛擬的交互產生了關聯，用戶交互因此而更加自然地發生。視線隨著被精心設計的布局而游移到重點上，用戶會下意識地點擊被高亮顯示的、和現實按鈕差不多的交互控件，他們還會下意識地在虛擬的屏幕上滑動，在界面之前自然游走。因此，你有必要了解你的核心用戶每天都在使用哪些 APP，他們都是如何交互的。這有助于你吸收經驗，消除不良的體驗，創造舒適的交互，降低學習的壓力，更好地轉化。」Sarah 一邊說著，一邊下意識地模擬著交互并解釋道。
「接下來我們還是用案例來說明一下，會更容易理解?！拐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 說的，設計原則太多了，誰又規定死了具體有幾條呢？每個人心中的哈姆雷特都不一樣，每個人眼里的哈利波特又何嘗是一樣的呢？
最重要的問題在于，許多人知道原則，卻并不會在設計項目當中運用它們。洞悉每個設計項目當中的重點，了解客戶的需求，明白首要的設計目標，在產品和用戶之間，找到平衡點，用心地思考，利用好設計原則這一利器。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
隨著消費升級的步伐，商家總結出在帶動消費能力上小孩>女人>寵物>男人的規律，爸爸們作為商家最不重視的一個角色，該如何在父親節以爸爸為主角制作一款 H5 呢？手機充值作為一個日活數千萬的工具型產品，親密充作為多號碼充值的首要場景，對話費充值的生態與成長起到至關重要的作用。未來，在新用戶增速放緩環境下，發揮親密充功能沉淀的用戶充值關系，將成為我們新的探索方向。
所以此次在父親節進行發力，制作一款可以對手機充值親密充有拉動作用的 H5 品宣。
相對于每年母親節的聲勢浩大，但是一到父親節世界就都安靜了。這是機會也是挑戰，機會在于因為父親節平均聲量較小，所以產出較容易被大家所看到，同時也面臨著關注度不夠的客觀情況的挑戰。
這個用戶的狀態反映了許多人父親節送禮物的常態，送來送去好像什么都不合適，最終還是充了一筆話費，這恰好也是此次話費充值父親節品宣的落腳點。此次品宣的雛形就初現了，一個在老家缺少關心的空巢父親與一個在外地工作費盡心思送禮物的兒子，他們之間發生的火花。
但若單單如此，則略顯單調，如何增加趣味性與可玩性呢？
確定了主題后開始具體著手項目具體制作，由于第一次制作劇情動畫、配音與答題三者相結合的故事性交互 H5，下面會每一步說明，我們在這些地方都是怎么做的。
劇本是故事性交互 H5 的重中之重，也是其對用戶是否吸引的關鍵因素，若缺乏吸引力用戶則無法到達最后看到品牌曝光，一個劇本最基本的需要一個通順且合理的劇情，更高的要求是要充分利用用戶好奇心，獲取用戶注意力，完成品牌與功能的曝光。按照寫文章的方法，一個飽滿的劇本需要有三部分組成。
具體的配音工作交給配音外包商就好，我們要做的就是對最后效果的把控。
首先要了解匹配原理，為了節省開發時間與資源，六種方言動畫全部采用同一種幀數與時間，所以需要匹配每一句的配音時長。
配音時長可以通過三種方法控制：
確定好玩法流程后，進入視覺階段，這次整體的設定是不同區域的爸爸形象，要表現出各區域的特色，結合好配音，才會達到比較理想的效果。
在人物的刻畫上，視覺是有很多表現形式的，但會根據整體方案的氣質去選擇合適的視覺呈現。由于這次的方案會有人物配音，為了使整體效果更自然，更接近用戶的想象，加上對產品用戶群的定位，我們摒棄了低齡卡通的設計方向，在人物設計上選擇了寫實的設計風格，更符合用戶心理對父親這個嚴肅、嚴謹的心理印象。
結合對話的內容以及動畫的表現形式，在細節刻畫顏色搭配上增加復古的味道，使人物更活潑不呆板將字體圖形化設計，結合中國元素，提煉各省市的簡稱加上有特點的人物設計，能更快速的幫用戶選擇以及增加親切感，以下就是各區域的爸爸形象設計，有沒有一款打動你呀。
人物的設定出來后，主頁面的視覺風格就比較好把控了，復古的老式畫報風格，是一個很好的選擇～既能突出人物形象，又能把內容很好的劃分整合。
板式設定：
主頁面整體視覺風格確立以及版式布局，畫面主體還是以人物形象為主，配合動畫讓整個畫面更有動感，強調打電話的動作，更貼近產品。
在動畫的設計上，也是遇到了很多困難，因為6個區域人物分為獨白、對話、聽電話3個部分的動畫，而為了防止圖片過多文件過大每個動作都要控制在6/7幀的范圍內，又要保證形態的自然有趣，又要能對上字幕配音。
這里的難度非常非常的大，需要每個步驟都配合的剛剛好，非常感謝開發哥哥耐心打磨，最后的呈現還是很滿意的。
動畫效果，頁面過多就選一部分進行展示：
最后整體數據效果還是比較理想，用戶完成全部選項占比整體 UV 34.89%，說明 H5 內容對用戶吸引度較高，能夠用內容本身吸引用戶到達廣告落地頁，完成運營目標。也帶來較高的親密充數據，相較平時有顯著提升，給親密充帶來綁定與充值。
第一次制作配音動畫相關的運營 H5，制作初期既期待又緊張，中間也遇到了幾次看似無法逾越的難題，最終呈現結果也還較為滿意。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Alex Schleifer 是 Airbnb 的設計副總裁。在加入 Airbnb 之前，他曾在 Say Media 擔任設計創意部高級副總裁。他在這篇文章中分享了目前設計行業在發展中存在的一些問題與挑戰，并分析了背后的原因，同時還分享了解決問題的方法以及打造一個設計友好型公司的三大秘訣。我的設計師同仁們，我發現我們進入設計這個行業都是非常偶然的。以 Airbnb 的設計團隊為例，在 Airbnb 目前的設計團隊的設計師里，有人之前是做圖書館管理員的，有人之前是技工，還有人之前是壽險代理或理療師的。總之在成為設計師之前，他們從事過的職業是五花八門，做什么的都有。由于他們內心是喜歡創意方面的工作的，這推動他們最終走上了設計這條道路。我對這一切是非常欣慰的，然而我總會忍不住去想，究竟還有多少有設計天賦的人才最終沒能走上設計這條職業道路。我知道未被挖掘的設計人才非常多，這也是我們現在想招聘優秀的設計師如此艱難的重要原因之一。
Airbnb 以設計驅動型文化著稱，公司的兩位聯合創始人也都畢業于聞名全球的設計學院：羅德島設計學院，對于這樣的一家公司，想招聘優秀的設計師都非常難，你可能會覺得難以置信，但事實確實如此。其實不光是 Airbnb，我曾經和包括 Apple、Google 和 Facebook 在內的很多非常注重設計的大公司高管都交流過，他們也同樣面臨類似的問題?，F在看似是沒有足夠多的設計師滿足市場需求，設計師人才供不應求。早期創業公司對這個問題應該感觸更深。每周，我都會從擁有很好發展前景的創業公司或中等規模公司的人那里聽說他們正在為招不到設計師而發愁。
即使設計不是公司最重要的部門，要想讓公司、尤其是資金資源有限的創業公司坐著等設計師在自己需要的時候自動出現是不現實的。如果我母親不是一位堅信設計是能成為一個職業的藝術家的話，我可能也不會進入設計師這個行當。能通往設計師的路徑有很多，設計師的角色也千變萬化。如果設計師沒有一個清晰的職業發展通道的話，要想找到下一代優秀的設計人才，我們依然只能靠意外的好運氣。
在各個行業的公司能為設計師從業者創造一種融洽的工作環境和清晰的職業發展通道之前，有必要和大家分析一下目前阻礙設計行業發展的幾大主要挑戰和障礙。
1. 缺乏對設計全面而深入的理解
在設計行業之外，有些人會知道一點 UI 和 UX，但總的來說，相比大眾對產品研發的理解，人們對設計是缺乏全面的認識與理解的。電子產品已成為每個人生活中必不可少的一部分，在一個設計能決定交互型電子產品與平臺體驗的行業，在功能之外還要更加注重整個產品的流暢性。對設計全面而深入的理解有助于設計師走出自己的小世界，從而打造一個更偉大的產品。
2. 缺乏標準化的組織架構
工程技術和產品管理團隊的組織架構非常清晰，也有清晰明確的匯報體系，相比而言，設計師團隊的組織架構形式各異。有的公司采用代理模式，在這種模式下，設計師會不停地從一個項目轉向下一個項目，為全公司提供設計支持，很多公司都會默認采用這種模式。有的公司的設計師會全程參與產品的所有開發過程，從最開始到完成，這種模式下，設計主管和產品主管、工程主管一樣向同一個領導匯報。還有一些公司，它的設計團隊會向產品、工程或市場團隊主管匯報工作。在設計領域，我們越早建立一個行業統一、清晰流暢的組織結構，那么在公司內部就越容易打造一種設計文化和清晰的設計師職業發展通道。
3. 缺少被大眾熟知的設計師行業的榜樣
在工程技術領域，大家熟知的行業榜樣很多，包括 Bill Gates、Mark Zukerberg 和 Marissa Mayer 等。在產品領域，也有 Sundar Pichai、Reid Hoffman 和 Kevin Systrom 等眾多行業榜樣。如果讓大家列舉一些知名的設計師出身的人擔任公司創始人或高管的例子，我敢肯定，在設計圈之外，除了 Jony Ivee 和 Yves Béhar 這極少數名字外，大家應該列不出其他人了，而這兩個人還都是工業設計師。當然，我們并不是為了樹立這些行業榜樣而樹立行業榜樣，但是我們是可以能從為大眾熟知的行業榜樣的多少來了解設計師行業的是否成熟，以及設計師的職業發展通道是否清晰暢通。只有有足夠多的行業榜樣，設計師行業才能得到更好地發展。
如果一個國家全由設計師構成，那么我們會將哪個設計師的頭像放在這個國家的法定貨幣上呢？
設計師行業所面臨的問題挑戰和設計師的薪資待遇沒有多大關聯，它主要和設計師團隊在公司里的位置有關系。對設計師的需求一直在那里，但設計師的職業發展通道卻一直不清晰。下面就給大家分享幾種方法，所有公司都可以采用這些方法去吸引優秀的設計人才，設計主管也可以更好地帶領大家前進。
1. 從一開始就融合工程、產品和設計
在一些科技公司，包括 Airbnb 在內，工程（engineering）、產品（product）和設計（design）團隊是捆綁在一起的，它們三者通常被合稱為 EPD。以設計團隊來說，團隊里負責各個領域的所有設計師都會參與到從產品開始開發到發布的全過程。如果一個項目組負責一項新功能開發、產品營銷或用戶反饋，那么工程、產品和設計這三個團隊都會分別至少指派一個人去參與其中。這種三者聯合不僅能聚集產品的主要開發負責人，同時有助于所有三個團隊成員職業發展通道的正規化。
這種三者融合的團隊度就像下面這個三條腿的凳子，三條腿分別代表開發產品所需的三個不同團隊，即工程、產品和設計團隊。只有從產品開發伊始就做到三條腿協同并進（如Figure A圖），那么在公司規模擴張的過程中才能保證三條腿一樣長（如Figure B 圖）。
我發現，從一開始就在工程、產品和設計三者的協調平衡方面做得比較好的公司一般都會做以下兩項工作：
如果你不在一開始遵循這個原則，那么最后你只能做出一個蹩腳的產品，就會像下面的凳子那樣不穩固。如果產品開發之初一個設計師都沒有，那么你的產品就會像下面 Figure C圖里的凳子一樣，少一條腿。如果你在產品已經開發到一定階段且比較成熟之后再讓設計師參與，那么你做出的產品可能就會像 Figure D圖中的凳子那樣，三條腿不一樣長。
要想避免自己的產品像上面的凳子那樣蹩腳，最好的方法就是從一開始就同時打造三條腿（工程、產品和設計）。在實際操作中，要從一開始就招聘設計、工程和產品主管，三者向同一個人匯報工作。以 Airbnb 為例，Airbnb 的設計、工程與產品主管是平級的，而且都直接向創始人匯報工作。其實不光是工程、產品和設計部門的主管需要緊密協同，在涉及到每一個具體的項目時也需要三個部門的協同配合。
一款產品主要由以下三個要素來定義的：商務、代碼與像素。在所有的產品決策中，要讓每一個要素都有發言的機會。
在 Airbnb 的設計團隊，我們采取了以下幾項措施來明確設計師是能夠引導公司發展的，同時讓設計師能有一個清晰的職業發展通道。
2. 為資深設計師開辟一條清晰的職業發展路徑
公司里的資深員工尤其是資深設計師所面臨的一個問題是，隨著他們在所負責的具體工作領域變得越來越資深，他們就會觸碰到職業「天花板」，然而處于相應管理位置的人員卻不會遇到這個問題。一般來說，這和他們的能力、工作表現或影響力沒有太大關系，主要是因為他們掌握的技能組合是封閉、無法轉移共享的。我們在 Airbnb 主要采取以下幾項措施來抑制這種負面影響：
只要能將上面兩種做法結合，那么你就能提高下面這個地方的表現：
3. 發現和使用新工具，創建一個自己的設計術語庫
我承認，直到今天我依然無法擺脫對 Photoshop 的依賴。使用 Photoshop 已經成為我的一種習慣，就好比是設計師們曾將鉛筆看做是他們的手的延伸一樣。有些工具我們已經使用了20年，我們通常會根據自己的習慣和肌肉記憶來選擇使用的軟件，所以新工具能否適應設計師的使用習慣是至關重要的。
在新工具挖掘方面，我們有自己的實驗人員，但最好能有人專門負責嘗試和整合新設計工具。這就是為什么 Airbnb 會在設計運營團隊上進行了大量投入，這個團隊主要負責幫助設計團隊在公司擴張過程能能更地開展工作。設計運營團隊要確保設計工具能和工程、產品及其它部門使用的工具保持協調。
即使你現在還無法組建一支專門的設計運營團隊，你同樣可以采取一些小措施去進行工具整合和結構調整，讓設計師更加便捷地工作。要從最基礎的層面進行整合，盡可能統一大家的使用規范和語言。這不僅適用于開發一個設計系統，同時還適用于一些更常規的工作中，如何為文件命名、在哪里存儲文件、如何管理版本等等。所有人都能遵循同一個規范要遠比找到一種完美的規范重要得多。
這種規范與整合也為打造一套屬于我們自己的設計語言系統（DLS）奠定基礎。DLS 系統不光是一個視覺選擇和設計模式語言，同時也是一個設計師和開發者協同開發產品的系統。DLS 的主要目的之一就是讓設計師和開發者共同定新功能組件，一旦定義之后，這個組件名稱將會同時應用在 iOS、安卓和 web平臺上。盡管這些功能組件是不同開發人員在不同開發環境下開發的，但他們的名字都一樣，而且它們對公司所有人而言都有同樣的核心概念。
△ Airbnb的設計語言系統組件頁面
這個系統打造完成之后，公司就可以在所有部門中打造一個共同的術語庫。這不僅能提高溝通效率，同時也能讓每一個人都能對公司的所有設計流程有更清晰的了解。Airbnb 內部開發的一些產品，如原生組件瀏覽器和 Airshots，能讓公司的任何員工瞬間獲取上千個設計界面。所有同事都可以在我們支持的任何語言與設備上看到任何應用版本的界面圖。對于設計師，這有助于消除設計和最終產品之間的抽象層，最大限度減少設計師的困惑與混亂。
工程師通常都會快速更新自己所使用的工具與語言，設計師在這方面向工程師學習的東西有很多。工程師之所以快速更新所使用的工具，這是因為他們需要在競爭日趨激烈的市場中更快地發布代碼。有些公司有上千個工程師，他們就像一群魚一樣在一個共享代碼庫里游，并可根據同伴的狀況進行調整姿勢。作為設計師的我們，現在在使用工具方面還沒有達到這種同步性，要想達到這種同步性，首先需要嘗試市場上現有的工具，如果找不到自己需要的工具，也不要擔心需要自己開發。
一個行業標準的術語庫有助于推動我們設計師的職業發展，而不是會限制它。在 Airbnb，除了統一規范我們設計界面的方式之外，我們還統一了我們工作語言。未來，我們希望公司內部討論產品設計的方式在 Airbnb 外部同樣適用，也希望 Google 和 Facebook 這樣的巨頭聯合起來共同打造一個設計行業通用的術語庫。
在字典里，每個字都有一些特定的含義，而詩歌所需要的所有要素都蘊含在其中。
可能是因為設計是一種視覺效果工作，所以我們很容易將其想象成一種唯美浪漫的工作。設計師往往很容易陷入色彩、字體、動畫與圖案中，而忘記設計是可以成為公司核心部門，并可以有更好的職業發展。在電影行業里，每當有新工具出現，如電影制作流程或硬件升級，電影行業都會專門召開一次會議對新工具展開討論。如今，我自己也只參加那些不光討論靈感與創意過程，同時還會討論新出現的設計工具的會議。
在不限制設計師創作自由的情況下，設計部門最好有一個清晰的標準流程。在我看來，一位優秀的設計師是不僅能夠和工程、產品部門同事一起讓整個產品開發過程更加流程，同時還能積極學習工程、產品方面的專業知識。我發現能這么做的設計師少之又少，然而這是非常必要的，為了公司，也為了自己的職業發展。
在設計創意魔法的背后有工具在起作用，未來的設計需要同時依賴這兩者。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
做產品，繞不開「需求」二字。很多產品從0到1需要團隊付出很多努力，但如果在把握用戶需求的時候出了錯誤，再好的團隊、再牛的執行力、再牛逼的技術也阻止不了項目的失敗，所以，分辨用戶需求就成了產品的關鍵。
需求有「真需求」，也有「偽需求」，「真需求」可以實現用戶的強關聯，從而實現產品的穩定增長，而「偽需求」要么無法獲得用戶，要么曇花一現。比如魔漫相機，超級課程表這類曾經的「現象級」產品，在短暫的瘋狂后迅速被用戶拋棄，其實都是因為沒有正確識別用戶需求。
那么，如何找到買家真正的需求呢？
「黃金圈法則」是西蒙·斯涅克在《從為什么開始》中提出的一種思維方法。
他用三個同心圓來描述人的思維模式，黃金圈從外到內依次是：做什么（what）、怎么做（how）以及為什么（why）。
黃金圈思維可以讓人們穿破事物的現象，看到事物的本質，從而做出最佳決策。
它不僅可以用于自我激勵和成長，同時也可以應用于營銷、管理與溝通等領域，而我們今天要重點討論如何用它來識別真需求及偽需求。
what（用戶反饋）、how（用戶行為）、why（真正的需求）：
通過這三個層面，我們可以發現需求、驗證需求，進一步挖掘需求，最終識別出用戶真正的消費動機，從而找到有效的解決方案。這三個步驟形成了一個「需求驗證漏斗」：
what層面是用戶評價和用戶痛點，它讓你「發現可能的機會」，但這個機會不一定會形成需求。
比如你要做零售產品創新，那就可以直接去淘寶，看同類產品的買家評價。尤其是差評，就是等待你解決的「痛點」。
身邊的朋友都抱怨淘寶上買東西經常要找好半天，找不到自己喜歡的，那么「產品多、篩選難」就是個待解決的「痛點」。
隔壁養金毛狗的女孩經常抱怨狗糧太重快遞又不送上樓，減肥成功的男士原來的衣服都不合身了，這些我們平時很容易發現的抱怨類的信息，就是用戶使用產品過程中的痛點，也都有可能成為新產品的機會。
發現機會，并不代表我們要立刻開始尋求解決方案，因為需求可能只是偽需求，或者根本就不具備任何可行性。
1. 需求本身是「偽需求」，用戶對問題表述「錯誤」或者缺乏對解決方案的「想象力」。
就像喬布斯說的那樣：「不要問客戶他需要什么，因為他們根本不知道?！乖谄桨咫娔X出來之前，用戶并不知道自己需要一臺完全沒有鍵盤的電腦。
2. 項目不具備可行性
比如消費人群不夠大，對這類「硬造性場景」感興趣的都是小眾，無法落實到真實的大眾生活里去，產品無法扎根；就像現在的O2O上門服務，大多都是偽需求，上門洗車、上門美容都屬于這一類，消費頻次太低，而且家對于多數人來說是個非常私密的地方，并不希望陌生人到訪。
What層面會呈現出的「需求」，我們并不能馬上開始基于這個層面去尋求解決方案，而是要通過「how」來進行進一步驗證。
「how」就是「用戶行為」。用戶反饋可以說謊，但行動不會。
一個女生說我選老公的標準是：這個人要孝順，帥氣，結果她選擇了一個有錢人；
一個男生說我選擇老婆的標準是：要善良，結果他選擇了一個漂亮身材好的人；
小島居民經常說他們討厭穿鞋子，因為鞋子會經常進沙子，但實際上他們依然在穿鞋。
也就是說，用戶經常「說一套、做一套」。
比如你問用戶喜歡什么顏色，十個人中可能有五個告訴你他喜歡綠色，但如果你真的生產一堆綠帽子然后就沒有然后了。
還有我們一開始提到的「魔漫相機」，你如果采訪用戶的話，十個人可能有八個告訴你他非常喜歡這個應用，但實際上他們玩一次之后就把它拋棄了，因為「爛大街」了，用戶只是在跟風，他本身根本沒有這個需求。
因此，判斷需求不能只是聽用戶怎么說（what），一定要通過看他怎么做（how）來驗證。
那如果驗證了之后發現用戶「言行不一」，是不是需求就不存在了呢？也不是，我們要跳出用戶的思維，從主動的角度，也就是「why」這個角度去挖掘用戶的真正需求，開發解決方案。
Why是用戶反饋及用戶行動背后的原因，找到這個原因，才能最終驗證需求是否是真需求，也決定了用戶最后是否會為你的解決方案買單。
我們先拿「小島居民的鞋子」來舉例：
小島居民鞋子很容易進沙子，這就是一個痛點，也就是what層面的需求。
如果要解決這一痛點，是不是就提倡大家不穿鞋呢？這要從how這個層面來判斷，也就是用戶如何表現，結果發現雖然鞋里經常進沙子，大家依然在穿鞋。
最后經過調查我們發現，沙灘里面有很多碎貝殼，不穿鞋會劃傷腳，所以，「不能劃傷腳」比起「進沙子」的需求顯然是更為迫切，因此，用戶的真實需求是「舒適地行走在沙灘上」，那么解決方案不是提倡大家「不穿鞋」，而是提供一雙舒適的、不會積沙的鞋子。
再說一個我身邊一位朋友創業的真實案例：
朋友安妮是個喜歡喝奶茶的女孩子，她幾乎每天都要喝上一杯。在某天和同事討論奶茶的時候，她們開始吐槽奶茶的各種不好，尤其是「不健康」，奶茶的主要成分是植脂末和茶粉、淀粉，不僅不健康，而且容易長胖。安妮上網搜索了一下相關信息，發現很多買家都對奶茶的不健康有所擔心。
于是，安妮決定開個店鋪，專門做「健康的奶茶」。
但實際上她的店鋪開張后生意卻非常冷清，除了一開始有些熟人會過去捧場，大多數時間店里都是門可羅雀。
安妮的奶茶確實做到了健康，完全用純牛奶和新鮮的茶葉沖泡，糖都是用的上等的果糖。
但為什么大家現在反而不喝呢？
因為「需求」把握錯誤。
消費者在抱怨奶茶不健康的時候，他不是想要健康的奶茶，而是想要口味不變、價格不變、包裝漂亮、環境舒適的情況下，更為健康的奶茶。
我們如果再向why層面進行探索，就會發現問題的實質：
為什么大家要喝奶茶，如果想要追求健康，為什么不是果汁、酸奶、牛奶、咖啡？
因為奶茶好喝，口感豐富、有層次、有趣味，這是其他飲品無法比擬的。
到此為止，我們會發現，用戶的真實需求其實是「好喝而有趣的飲料」。
對于大多數飲食類產品，口味絕對是第一位的，犧牲口味而滿足用戶的其他需求一概是偽需求。
在「七宗罪」中有一條是「貪食」，喜歡美味的食物是人的天性，大多數人只有在真的生病之后才會在乎健康，在這之前，他愿意為了絕妙的口感冒第二天中風的危險。
由此可見，由發現需求到驗證需求，是要經歷「how」層面直接的驗證，同時追索到「why」層面進行分析才能最終確認。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
每個時代都有特定的印跡，我們感受比較直接的或許是每個時代的穿著打扮變化，其實人、事、物都會有時代特征，字體也不例外。但是如何將字體穿越到過往呢？今天要從字型變化和字體效果兩個方面聊聊如何把字體打造成我們口中所說的懷舊與復古。
舉個我們最熟悉的例子，電話從轉盤撥號到功能機再到智能機一直都在更新換代，單從外觀看是變得越來越簡潔，其實衣食住行我們都可以找到相類似的變化。從過去到現在每一天都在變，我們是否可以從千絲萬縷中總結出一些大趨勢，為字體所用？
上圖是書法字體中篆書、隸書、行書和楷書，依序也是書法的演變過程，如果對此無感的話可以想一想繁體字到簡體字的變化，從中不難總結由繁至簡的變化規律。那么說僅僅是把文字造型做的「繁雜」就能夠成功「穿越」嗎？當然不是，下面用幾個實例分享幾個具體的方法。
字體設計中的很多形變要有根有據，比如我們要設計一款有年代的古風字體其實就可以借閱古時書法中的一些寫法，其中最具代表性的當屬篆書。
篆書具有文字形體的象形性特征，雖然當下已失去實用性質但是我們可以根據自身的需求做一定的優化，以達到古為今用的目的。
下面以「詩畫集」三字做分解。上圖文字是從網絡中搜尋的「詩畫集」的篆書寫法，一眼望去是不是非常的「繁雜」，甚至同一字會有多種不同的寫法，結構變化也是很多樣，那么在眾多的文字中我們又應該如何挑選適合的呢？
一般來講大家可以注意以下三個規律：
如上圖是我選出比較中意的三個字，按照上面提出的幾個標準很顯然第一個字會被淘汰，但是我更看重的是左邊「言」字旁的筆法，右邊當然要舍棄重做。
第一步就是依據上面的字用線條勾勒出結構框架，最后一個字相比前面的字是比較扁平一些的在做的過程中要進行拔高以保持三個字的統一。
前面說了這種方法不是完全照搬，我們一起看看有哪些地方做了調整：
僅僅完成了結構的搭建肯定還是不充分的，細節的處理一定少不了。等線的筆畫本身是比較直接的，可適當添加一些圓角處理，這也更符合篆書的字體特征。如上圖，第一個字未做任何處理，第二個字筆畫折角由原來的直角變為圓角處理。第三個字又從前面基礎上增加內部的圓角，如此一來筆畫有了些許頓挫感，更加耐看。
色彩和版式也是細節的一部分，最后選用深藍色并配紅色印章點綴，一組比較復古但又符合現代人審美的文字設計就完成了。這種古為今用的方法看下來很簡單，但是除了上面講的注意事項，字體的空間配置均勻有序也是至關重要的一環，任何字都如此。
就像電視劇布景一樣，盡可能還原當時的場景，拍出來的影片才能有更強的代入感；而我們要設計有年代感的字體最直接有效的方式就是還原那個年代的字體特征。和第一種方式原理類似，但實際還是有些許不同。下面我們由古代穿越到近代，還是「詩畫集」三字。
網絡上有很多關于老字體的圖片，平時遇見了要保存一下，說不定什么時候會用得到，另外沒有保存也不要緊，我們字體學堂公眾號會不定期更新收集的老字，方便大家學習參考。
老字的年代感除了紙張的斑駁更重要的是字型的特征，大概分類的話一個是宋體字另一種是有一些幾何形態的應用變化，另外由于老字多由手工繪制，有很強的隨意性，這也是老字的一大特征。
第一步是常規筆畫的提取，由于年代久遠又加上拍攝等因素，很多字體細節是模糊不確定的，不要把客觀因素造成的字體細節變化也原封不動的照搬過來，而應該是邊提取邊優化。
有一些我們所需的筆畫可能老字當中并沒有，這個時候就要根據老字的風格做筆畫擴展；另外老字中的筆畫轉角不會很銳利，通常會有一點圓角，筆畫的線條也不是筆直，這些都可以在后期統一添加，勿從初始筆畫添加。
基礎筆畫搞定下一步就可以進行結構搭建了，除了筆畫的借用結構空間特征我們也可以參閱，「三防常識」這幾個字整體是扁平的，內部空間比較緊，這是本組字結構上的特點要抓住。
基礎筆畫可不是一成不變，像是「集」字橫筆居多，如果保持原來的橫筆粗細的話空間上會變得非常擠也不美觀，所以將橫筆減細處理；同一筆畫在不同的字體中都會有所差異，這一點就要求大家對字形結構要了解的更透，做字要「活」。
最后如上圖，其實基礎結構搭建出來到最后的確定字型，你看到的結果只是兩步帶過，期間是有很多細碎反復的調整，好字多磨！
這種方法會上癮，以「汽水」兩字再來一組。過程同上就不再復述，直接看結果。
今天選的這兩組老字筆畫上還不算最有特點的，還有一些個性更突顯，大家不妨動手一試，看看是不是真如你所看到的這樣簡單。
如果平時來不及設計想快速「穿越」這種情形也是有的，所以字體效果營造出表面的年代感還是要講一下，因為是軟件的基礎操作所以就不很細致咯。
1. 紋理疊加
最簡單常用的肯定是各種紋理疊加，甚至這是很多同學做年代感的文字必備選項。如上圖，左邊是常規字體，右邊以此為基礎疊加紋理。說兩個注意點：一是紋理不在多，要避免紋理搶風頭；二是紋理也有虛實對比，不可做的太平均。
2. 粗糙輪廓
使用同樣的字庫字，利用 Ai 軟件中的「粗糙化」實現字體輪廓的粗糙處理，要掌握好粗糙化中的兩個數值大小的變化，另外還可以通過路徑位移制造字體內部的紋理變化，使之更有歲月斑駁感。
以上分享你會發現，年代感的字體設計由內及外是相對復雜化，同時要善于抓特征，幾個思路幫大家梳理一遍，有沒有收獲一點呢？
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
網頁設計是什么？
網頁設計也被稱為Web Design、網站設計、Website design、WUI等。它的本質就是網站的圖形界面設計。雖然現在我們常使用移動端上的APP來獲取資訊，但是顯然基于個人電腦平臺的網站上網方式陪伴我們的歷史要比手機久很多：從1987年錢天白教授向德國發出第一封電子郵件到2000年搜狐、新浪、網易在美國納斯達克掛牌上市，再到現在網站遍地；中國的網站高速發展了近三十年。我是在小學開始去網吧“上網沖浪”的，那時的電腦屏幕非常小，分辨率只有800x600像素（對比一下，iPhone8的分辨率是750x1334px），網速也很慢，經常掉線或者加載失敗。那時的網站性能和體驗都不好，而現在網站設計和過去已經有了巨大的變化：注重用戶體驗、注重頁面動效、富媒體等設計讓如今的網站體驗并不比軟件和手機APP差。加上個人電腦的普及，網站仍然是人機交互中非常重要的平臺之一。那么作為UI設計師我們就必須掌握網站設計的規范和理解網站運行的原理，才能更好地駕馭這個平臺。今天就向您好好說道一下網站必須懂得的那些事兒。
工作流程
首先讓我們來看一下網站設計的工作流程吧：除了之前介紹過的用戶研究、撰寫產品需求文檔、市場文檔、做競品調研等工作之外，與設計師密切相關的網站項目流程可以分為原型圖階段、視覺稿階段、設計規范階段、切圖階段、前端代碼階段、項目走查階段六個階段。每個階段都需要設計師參與和了解，千萬不要只在意視覺稿這個階段，有很多前期與后期工作同樣需要得到我們的重視。好，讓我們一個一個來了解它們吧。
原型圖階段
原型圖階段中設計師需要和產品經理溝通需求，這時要注意，并不是產品經理向設計師下發需求，而是需要相互就自己擅長的方面進行溝通。視覺方面具體呈現也許設計師會有更好的方式，這時需要在設計之前與產品經理達成一致。
構建網站原型圖（工具：Axure RP ）
視覺稿階段
視覺稿階段就是我們要根據原型圖確定的內容和大體版式完成網站的界面設計了，在設計網站的時候，我們需要一些圖像和靈感的素材。比如做世界杯專題時，我們除了收集很多素材之外，也可以設計一個“情緒板”（Mood Board）。簡單說情緒板就是將一些與主題相關的資料和素材拼貼在一起，這樣可以更好地指引我們整個需求的設計主題和大體感覺。另外，很多網站的頭部通常需要主視覺來抓人眼球，這時可能會使用到需求方提供的明星照片、主題素材、LOGO、主視覺PSD等，那么用素材和這些需求方提供的資料進行混合并拼出讓人覺得震撼的頭部視覺就是我們的目標了。主視覺下面的信息排布更強調合理性，這時也需要和產品經理溝通從后臺調取的圖片尺寸、標題字段長度等，然后根據這些要求完成頁面信息部分的設計?？傊O計過程中需要我們不斷思考和溝通才可以完成一個比較棒的視覺稿。
視覺稿設計階段（工具：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
企業網站
每個企業都需要有一個網站來對外展示自己的能力、介紹自己的產品等。現在接觸一個陌生的企業時，很多老百姓都會上網搜索一下其官方網站驗證真偽。網站已經是中小企業的標配了。企業網站設計時通常會有網站首頁、公司介紹、產品中心、公司團隊、在線商城、聯系我們等這幾個模塊，企業網站會展示很多諸如公司環境、團隊成員、企業文化等實際的照片，配合一些資料進行設計。企業網站通常也追求所謂“高端”、“大氣”、“上檔次”的風格，也就是為了達到讓消費者認同品牌這個要求。所以如果我們接到了企業網站的設計需求，不妨多去瀏覽參考一些更加大牌的企業網站作為競品來參考。
美國通用公司官網
產品網站
從蘋果公司的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頻道 這樣的超鏈接結構，方便用戶理解自己在那里，并且點擊可以回到其他頁面。
二級頁面原型圖
底層頁
在網站結構中最后提供用戶實質資訊的頁面就是底層頁。比如，在門戶網站首頁或二級頁面中我們點擊感興趣的標題后，在底層頁中才會看到全部的資訊。待用戶閱讀完底層頁的信息后可以順勢在左側或右側的側欄尋找用戶可能感興趣的相關內容；在底側可以看到網友的評論；底側也會有分享按鈕、贊功能等；如果側欄用戶轉化率比較差，最底部還可以再次出現推薦相關資訊的功能?？傊谟脩糸喿x完自己喜歡的資訊后，要繼續吸引用戶順勢閱讀其他的資訊或者回到頻道。
底層頁原型圖
廣告
門戶類網站如何盈利？廣告是變現方法之一。網站的廣告一般由負責運營需求的設計師負責，但是也可能由頻道設計師、產品側設計師來完成。在網站中常見到的廣告圖形式就是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），但是為了增強網站的品牌性我們也可以把鏈接顏色更換成另一種顏色?？傊欢ㄒ谛问缴吓c普通文字產生差別才可以。
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
雪碧圖
我們經?？吹骄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更??？因為如果比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方便手指點擊。并且頭部需要預留出微信或瀏覽器的導航區域。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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顯然毫無意義，需要重新調整引導出現的時機或者展示形式。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在工作中，有時會遇到這樣的一個現象：自以為是最優的設計方案，用戶卻并不會按照預期的方式使用。每每發生這樣的事情都會讓我很困惑，用戶為什么不聽話呢？
試想這樣一個場景：假設有電話打進來，你卻沒有接，試想一下可能有哪些原因導致了「沒接電話」 的這個行為呢？
問題可能出現在三個方面：
通過上述的例子不難發現，用戶的行為是受多種因素影響的，我們姑且將這些影響分為三類：動機、能力、觸發。
現在試著用這三個要素來分析一個身邊的案例：雖然我知道這樣不好，但是我依然熱衷于打王者榮耀，這是為什么呢？
1. 動機
王者榮耀作為一款游戲，自帶著「好玩」 的屬性，可以讓玩家在其中獲取快樂，抵御痛苦；另外，來自朋友的邀請、因為玩游戲游戲而帶來的談資、通過提升段位獲得的群體認同感等等都可能成為強有力的游戲動機。
2. 能力
王者榮耀成功的將 DOTA、LOL 等 MOBA 游戲從 PC 端遷到移動端，只要擁有一部智能手機和一個穩定的網絡環境，隨時隨地都可以拿出手機玩上一局王者榮耀，MOBA 類游戲的設備門檻從未被如此降低；另外，游戲的操作、套路等等也被極度簡化，沒有了 PC 端 MOBA 游戲極高的學習門檻，讓更多人可以具備加入這款游戲的能力。
3. 觸發
來自朋友的邀請通常無法拒絕，這就是依托于社交的病毒式傳播所具有的巨大威力，當茶余飯后，朋友喊你一起開黑時，一次有效的觸發就已經達成了。除此之外還有來自官方的 push 消息、微信中的每周戰報等等，這些都在不停地觸發用戶，讓玩家不斷強化對于游戲的印象。直到有一天，當你閑來無事的時候不由自主的想到拿起手機打一局王者榮耀，這時它就已經達成了來自玩家內部的觸發，成為了你的一個習慣。
擁有強烈的游戲動機、具備參與游戲的能力、再加上合理的觸發機制，這些因素共同造就了玩家熱衷于打王者榮耀的行為。
由上述案例可以看出，動機、能力及觸發這三個因素對于用戶的行為有著十分重要的影響，而且如果你仔細思考會發現，這三個因素不僅僅適用于上述的案例，而是可以用來解釋絕大多數場景下用戶行為產生的原因，所以接下來我們展開分析這三個影響用戶行為的關鍵因素。
1. 行為動機的根源
用戶的行為動機大致可以分為三種：
追求快樂、逃避痛苦：用戶更加喜歡能夠快速帶來快樂的產品，例如微視等短視頻產品，讓用戶通過快速消費幾秒鐘的短視頻就可以馬上獲取快樂，這也是越來越多的用戶沉迷其中的重要原因之一。
追求希望、逃避恐懼：用戶也會為了追求希望/逃避恐懼做出許多下意識的行為。例如我曾經觀察到，很多人在點擊保存文件時會連續點擊多次工具欄中的保存按鈕，或者多次在鍵盤上按下「Ctrl+S」 的快捷鍵，這樣的行為大概是害怕不小心丟掉自己的勞動成果。這種下意識的多次點擊保存的行為，就是「追求希望、逃避恐懼」 的一個具體表征。
追求認同、逃避排斥：人是具有社會屬性的，我們都會追求他人的認同，避免被他人排斥。因此在社交網站上的點贊、評論、轉發等互動往往會給作者提供源源不斷的創作動力，其本質上是人類追求他人認同的心理成為了強有力的驅動力。
2. 能力限制
用戶的能力限制來自六個方面：時間、金錢、體力、腦力、社會偏差、非常規性。
前四種能力限制比較容易理解，在此不做贅述。
社會偏差，是指他人對該項活動的接受程度。例如曾經在社交平臺中隨處可見的「不轉不是中國人」 、「為了家人轉起來」 之類的綁架式傳播，現在已經很少見了，因為大家都不喜歡這樣的東西，所以當用戶遇到類似的內容時，也不太容易選擇轉發了。
非常規性，是指該項行為與常規活動的匹配程度或者矛盾程度。例如大型超市會在用戶的常規的行動路線上放置一些小商品，這樣用戶就很可能會產生計劃外的購買行為，如果放置小商品的位置與用戶常規的行動路線不匹配，甚至互相矛盾，顯然就達不到引導用戶產生額外購買行為的目的。
3. 觸發方式
觸發大致可以分為外部觸發和內部觸發兩種。
外部觸發可以理解為產品為了觸達用戶而做的事情，又可細分為四種：
付費型觸發：通過付費的形式進行推廣，最常見的就是廣告，商家花錢做廣告，使其產品讓更多人知道。
回饋型觸發：通過正向反饋獲取的曝光，例如產品在應用商店的排行榜中位于榜首，自然會獲得更多的觸達用戶的機會。
人際型觸發：通過口口相傳的方式觸達用戶。
自主型觸發：產品自主產生的觸達行為，例如新聞APP 每天在固定時間 PUSH 的新聞給用戶，久而久之，即使一個不怎么經?？葱侣劦挠脩粢矔烙羞@樣的一個 APP 可以查看新聞。
相較于外部觸發，內部觸發則顯得更加有價值。內部觸發是指用戶的內在情緒/情感等驅動而觸發的用戶行為，這是所有產品的最終目標。例如用戶發現通過玩某款游戲可以治療「無聊」 的情緒時，一旦其產生無聊的情緒，就會自然而然的想到玩這款游戲。這樣產品就與用戶建立了一個內在的良性聯系。
外部觸發往往是曇花一現，而內部觸發才能真正讓用戶產生習慣。
總結起來，用戶的行為規律是有跡可循的，總體上符合這樣的一個模型：
行為（Behaviour） = 動機（Motivation） + 能力（Ability） + 觸發（Trigger）
如果一個產品/功能使用起來比較難，則需要用戶有較高的動機，再加上合理的觸發，才能讓用戶的行為觸發成功；反之，如果用戶的動機較低，則必須讓產品/功能非常易于使用，再加上合理的觸發，才能讓用戶的行為觸發成功。動機、能力、觸發三者共同制約著用戶的行為，缺一不可。
因此，如果再遇到「用戶不聽話」 的情況，不妨用這個模型來檢驗自己的產品/功能是否存在問題：用戶的使用動機是否較低？使用難度是否太大？是否合理的觸達了用戶？相信這樣一輪檢視下來，總會有一些收獲的！
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn
