漲姿勢！優秀產品人必啃的19篇網頁設計乾貨丨壹佰乾貨鋪 | 產品壹佰

【特別提示】

由於本期乾貨鋪文章圖片太多，所以Yosa並未製作PDF，請各位客官直接戳原文鏈接閱讀學習，么么噠！

另，本周四晚8：00壹佰大講堂，我們特別邀請了銀聯商務產品總監、前百度產品經理楊明老師為我們講授」從0獲取100萬種子用戶的運營秘技「！聽課完全免費，戳這報名咯~

鏘鏘鏘鏘，產品壹佰第十一期乾貨鋪和大家見面啦！我是掌柜的Yosa。

上期《你設計的App不合格？15篇乾貨洞悉優秀產品設計流程丨壹佰乾貨鋪》在我們的微信訂閱號」產品100乾貨速遞（chanpin100ghsd）「和微信服務號」產品100（chanpin100）「發布之後，受到了許多小夥伴的喜愛，看來大家還是很愛學習的嘛，掌柜的賞你們一人一包香瓜子！

在查看大家的留言時，有兩位客官向掌柜反映，自己正在為網頁設計而頭痛，很希望看到和網頁設計相關的乾貨。所以本期乾貨鋪，Yosa特意搜颳了我們網站最」干「的19篇網頁設計方面的乾貨，請客官們妥妥收好！希望大家啃完這些乾貨之後，會覺得自己成功踏進了」網頁設計「這道門^ ^

能力出眾的產品經理，應該有對於網頁的鑒賞能力，知道什麼樣的設計是好設計，有對設計的平衡感。

產品經理作為一個產品的掌舵手，需要掌握跟了解的技能是方方面面的。同時，在一個產品從用戶需求到產品原型，到產品發布的過程中，它是一個集思廣益的產物，是團隊合作的產物。我們在產品原型的設計階段，需要自己設計功能，交互邏輯，同時需要與設計師有良好的溝通。產品經理要負責向設計師講清楚產品的定位，目標用戶，需要傳達的信息跟情感。產品經理作為一個產品的整體把握，是全局吃透了該產品的整個想法的。所以產品經理在產品的網頁設計方面，需要了解到什麼程度呢？自己設計出原型，產品功能與交互邏輯的清晰理解與實現，與設計師溝通的時候準確表達意圖。

想要獲得快速成長，產品經理就必須要知道一些網頁設計知識。Let"s begin！

快速發展的技術、千變萬化的趨勢、應接不暇的軟體和素材，都是網頁設計師需要面臨的挑戰。但是撇開這些一直變化的東西，有一些基本的技能或者說能力，是設計師必須熟練掌握的，甚至閉著眼睛都必須能搞定的問題。那麼，今天我們簡單盤點一下，想學習網頁設計首先需要知道的哪些基礎知識？

1.PC端網頁設計

推薦乾貨>>>《網頁設計必須get到這10個技能，請收好！》

色彩、流程、平衡、比例、間距，這些常見的設計概念你都了解了嘛？當你在進行設計項目的時候，這些概念你都應當了解並運用起來。設計並不是單純的好看，內在的概念也原理能告訴你為什麼它這樣才會漂亮。理解了它們，能自己解釋它們，你才能創造出平衡的美感。

每一次向別人解釋這些概念，探討這些原理，你會對這些基礎掌握的更加紮實。

推薦乾貨>>>《厲害了！14款幫你提升網頁設計和開發效率的網站與工具》

實際上，網頁設計本身一直在逐步的轉變和調整，這也使得我們所用的工具和服務也逐步隨之轉變。所以，我們需要推薦一些最新的、實用的、貼合當前網頁設計需求的工具和服務，來幫助用戶更好的應對不斷進化的需求。

今天所搜集的這14款工具和服務，覆蓋網頁設計所涉及到的各個不同的層面，有線框圖工具，HTML轉化服務，甚至包括一部非常極客的漫畫。這14個工具與服務覆蓋面足夠廣，總歸有幾個會讓你動心。

2.移動端網頁設計

推薦乾貨>>>《精品譯文丨想搞定移動端APP/網頁設計，你起碼要做好這些事情》

如果你曾仔細觀察過近些年來那些優秀移動端產品的交互設計，會發現它們都擁有一個共性：它們在基本的功能和設計上的執行都相當的完美。

它們從最基本的人類行為模式中汲取營養，然後通過優秀的設計和執行，為用戶悄無聲息地掃除了所有的障礙，這個時候，用戶會感受到其中驚艷的視覺效果和突出的互動體驗，其中尤為突出的就是瀏覽體驗。今天的文章，就讓我們一同來梳理一下，有哪些關鍵而核心的移動端設計項目，總結一下今天移動端設計的「核心考點」。

推薦乾貨>>>《跟著建議走！這樣的移動端網站設計才對頭》

雖然移動端優先的口號喊了這麼多年，我們仍能看到許多「不稱職」的移動端頁面。看似理所當然的網頁背後還有著許多彎彎繞呢！今天的文章簡單梳理了一下移動端網頁設計常見的問題和技巧，說不定正是你想要的呢~

移動端的用戶往往擁有著更加明確的目的性，通常他們希望能夠明確、輕鬆地從移動端頁面獲得他們想要的信息和內容。無論是瀏覽新聞，網上購物，還是訂閱信息，移動端網頁應當為他們提供儘可能無縫的用戶體驗。

今天的文章，我們就從用戶需求和體驗的角度來探討一下，移動端網頁要怎麼樣設計才對頭。

二、進階打磨：從點到面，網頁設計技巧逐個擊破

1. 排版布局

設計本來就是一種理性的科學門類，審美因人而異，只有言之有理的設計才能說服別人，運用幾何學的手法就是設計師的利器之一，科學的設計並不會限制你的創意，它只會幫助你的作品成為精品的必要手段之一。

從古至今，人類從自然界中得到過無數的啟示，其中就包含黃金分割。這個從貝類完美的生長方式中提煉出的曲線，改變了所有人的審美。

推薦乾貨>>>《網頁設計該如何利用黃金比例？》

黃金比例自然會吸引用戶的眼睛到頁面上某個特定的點。 作為一個概念，它可以幫助你思考內容的布局以及有效利用層次結構，組合布局，排版，色彩和總體原則，將有助於將你的設計水平提升到一個新的階段。

推薦乾貨>>>《網頁設計致勝關鍵點：合理的排版布局》

任何一個具有創意的網頁設計方案，都會把目光聚焦在布局和色彩搭配上。這個餐飲o2o網站獨特的地方，就是在用戶界面上推出了各種吸引眼球的甜點冰淇淋。網站的排版布局比較簡約大氣，適當的留白，再加上一些美觀的字體設計，讓整體看起來更加時尚有活力。

網頁設計有一個終極目標，介紹鼓勵用戶去點擊、去操作。這些操作行為包括註冊或者查詢內容等。這樣就要求設計師能夠把登錄註冊按鈕突顯出來，讓用戶一下子就能注意到，設計師需要以用戶的角度出發去考慮這些問題，才能做出更好的用戶體驗設計。

2. 色彩使用

無可爭議的是，色彩是任何設計領域中最重要的一方面。

設計師在決定了一個網站風格的同時，也決定了網站的情感，而情感的表達很大程度上取決於顏色的選擇。顏色是很有力的工具，所有設計師在設計網頁時就應該明白這一點。

推薦乾貨>>>《一份簡單明了的網頁設計用色指南》

其實我並不是想說某種革命性的用色技巧或者某個全新的發現，但是絕大多數的網站配色看起來確實非常相似。那麼配色的意義又何在呢？如果全世界所有的網站都採用五彩繽紛的配色，那麼不會有任何網站從中脫穎而出。當然，今天的網頁設計界已經很接近這個狀況了。從這個角度上來看，柔和的色調會更容易讓用戶眼前一亮。

推薦乾貨>>>《如何巧用色彩打造動人心弦的網頁設計》

科學研究表明，色彩會影響情緒，會招致正面的情緒，也能帶來負面的影響，有的時候帶來的情緒與實際要的並不匹配。Kissmetrics 接著補充道，網站的訪客通常只需要大概90秒就能針對一個網站作出判斷和選擇，而在者其中，有62%~90%的因素是取決於某個產品的色彩。

3. 細節設計

優秀設計和卓越設計之間的區別是比較小的。一般人可能無法解釋說明卓越的設計的具體差別，但他們可以找到自己喜歡的網頁設計作品。慢工出細活，以下這些網頁設計中的細節你都會了嗎？

推薦乾貨>>>《乾貨丨讓我們談談網頁設計中的卡片式設計》

「我要卡式的」，這是上一期客戶在和我聊需求的時候說的第一個需求點。毫無疑問，卡式不論是適應PC還是手機都表現優秀。從在線商城到社交媒體網站，卡式設計成為網頁設計中的一股強大風潮且風頭正勁。其中最重要的原因想必就是它的靈活性。

卡片，可以是任何形狀、顏色和形式。但是總的來說，他們都包含了圖片、圖標和一些基本的文字信息，例如標題、用戶名和位置信息。

作為網頁設計師，你該如何使用卡片？當在設計卡片時，你應該注意些什麼？下面讓我們來談談。

推薦乾貨>>>《技巧總結網頁設計師必知的高效導航設計三原則》

為網站設計導航就如同為房子打基礎。如果地基不牢靠，再壯觀的設計也無法掩蓋建築結構的潛在風險，其實網站也是如此，如果想讓網站擁有優秀的用戶體驗，良好的轉化率，可觀的銷售額，你需要花費相當的時間去了解你的用戶需求，精心設計網站的內容，尋求可靠而直觀有效的內容組織體系，而這些東西的外化體現，就是網站的導航設計。

三、案例集錦：鑒賞優秀案例，警惕反面案例

1.精彩案例

成為大牛前，怎麼能不看大牛的作品？以下這些網頁設計的風格不一，配色大膽。設計新穎，你絕對值得一看，希望能給你帶來啟發。enjoy！

推薦乾貨>>>《獨闢蹊徑！20個精巧走心的單頁滾動網頁設計案例》

單頁滾動也算是目前網頁設計中一個獨立的類別了，導航、菜單等網頁元素的設計也有一套獨特的手法。極簡風的導航欄設計其實算不上太多，畢竟導航欄的部分應該是包羅萬象並且常駐頁面的。而漢堡菜單的存在讓導航具備了更優秀的隱藏性，擺脫了滾動條、分頁和複雜的下拉框，讓頁面更整潔，為視覺設計留下更大的空間，留住了用戶。

推薦乾貨>>>《身臨其境！那些給人逼真交互體驗的優秀網頁設計》

完美的場景營造和新奇高端的設計和開發技巧是有著依存共生關係的。當我們談及實現方法的時候，可選的設計技巧有很多，從靜態的圖片構建的全息影像，到細膩的3D建模，設計師可以自由地選取不同的技巧來加入動態元素，構建足夠專業的場景，用豐富有趣的細節來實現令人經驗的用戶體驗。

這種強交互、多元素的場景營造，多少也算得上是一種設計趨勢，今天我們所準備的網站案例都具有這樣的特徵。

推薦乾貨>>>《年度力作！20個驚艷而全面的年度總結優秀網頁設計》

在大量的動態效果和各類手段的加持之下，界面越發的驚艷，統計數據加持之下的信息的呈現方式足夠突出，相當優秀。以往正規而嚴肅的內容在設計師和藝術家的潤色下，開始表現出令人振奮、充滿娛樂精神的一面，數字化多媒體的加入則讓原本單調枯燥的數字煥發出不一樣的生命力，帶你開始一場華麗的冒險。

2.反面教材

網頁的技巧很多，但是核心的就那麼多。字體的選取和搭配，排版布局的規則，留白的規律，說起來複雜，梳理起來也不是特別多。那麼就讓這些反面案例幫你繞過設計上的坑，幫你打造真正令人難以忘懷的好作品吧。

推薦乾貨>>>《這些錯還在犯嗎？網頁設計中常見的五種交互設計錯誤》

交互設計從來都不是簡單的事情。可靠的交互通常需要藉助對用戶行為的深入分析，然後有針對性的精心策劃。可是隨著新的技術和新的交互模式的不斷湧現，事情就變得不是那麼容易了。

其實大家遭遇的困境都很相似，用戶已經很難被單純炫酷的圖片、流暢的懸停效果和出人意料的動效所打動，真正能讓他們露出微笑的是持久、令人愉悅的交互設計和用戶體驗。如果你對於日常的設計中的常見的誤區有所了解，自然會有意識地繞過這些坑。

推薦乾貨>>>《給新手的反面教材！7個讓人抓狂的網頁設計》

有些時候，當我滿懷期待地點開某些網站的時候——它們的存在簡直是設計的災難！相信我，當你看見它們也會抓狂的。從莫明的鏈接丟失到糟糕的可用性，我將會分享一些會讓我瞬間暴走的錯誤設計。注意！千萬別讓你的用戶遇到和下面同樣的問題。

四、靈感迸發：必須了解的網頁設計潮流趨勢

設計趨勢每年都在改變，出於各種原因，有的設計趨勢在演進中逐漸消失，有的則在大家的熟練運用過程中漸入佳境，甚至逐步褪變成為主流。

你並不需要了解全部的網站設計和技術趨勢，但是你需要適時地去了解它們。簡單來說，重要的不是對所有趨勢如數家珍，但是你至少要深入了解至少三個流行趨勢，能夠說明白這些設計趨勢在視覺上的特徵，為什麼要用它們，它們的運作原理是怎樣的，你為什麼喜歡或者不喜歡它們，等等。多閱讀設計趨勢文章，你就能搞定這一點。

推薦乾貨>>>《來看看將成為明日主流的七大網頁設計趨勢》

今天我就自動請纓，敢冒天下之大不韙，用本人尚算深厚的設計背景以及對這幾年設計風向的觀察，跟大家提提我對未來網頁設計風潮的風口的猜想。如果大家覺得說的還算有點道理的，有錢的捧個錢場給個打賞，沒錢的捧個人場評論轉發來聲吶喊。當然，如果大家覺得這是一派胡言的話，那也就只能請你趕快離場，等下一篇文章上來再請你來好好捧場。

推薦乾貨>>>《2016年網頁設計領域11個流行趨勢預測》

來自 Medium 的設計師在這篇文章中預測了2016年最值得關注的設計趨勢，而老牌設計博客Designmodo 對此也有自己的看法。新的技術和新的設計趨勢會在2016年逐一湧現，但是總體上來說，它依然會沿著2015的大趨勢來逐步演變。可以預見到的是，2016年會有更多的網站使用視頻背景，更多基於Material Design 風格的界面設計，幻燈片式的界面切換也會繼續火熱下去。

推薦乾貨>>>《漲姿勢！悄然流行的混合型視差網頁設計趨勢》

如果你仔細觀察那些最新的使用了視差技術的網頁，你會發現這些網站所採用的視差設計已經似是而非了。這些網頁中的可動元素非常之多，但是並非動畫；配色風格和視覺元素趨近於扁平風，並且借用了來自Material Design的物理隱喻，融合了許多微妙的交互細節。諸多時下流行的設計手法和新趨勢開始被打碎分解揉合到一起，形成了新的混合型視差滾動網頁。

推薦乾貨>>>《查漏補缺！極有可能被低估的三種有趣的網頁設計趨勢》

一種全新的設計手法，融合了最新的設計技巧，展現和前人不同的氣場，用更現代的氣質來承載內容，這樣的網站無疑會更加吸引用戶，讓訪客難以忘懷。今天要聊的三種設計趨勢其實已經出現一陣子了，但是作為一種相對綜合的設計手法，他們並沒有引起廣泛的關注。只需要使用現有的元素、色彩和排版手法，就可以實現這三種設計效果，但是它們不論是從美學特徵上，還是從功能性上，都不輸於其他的趨勢。有興趣么？不妨來看看吧。

-完

-本期專題互動-

簡約樸素的網頁和前衛鮮亮的網頁，

你更喜歡哪種風格？

Yosa更喜歡簡約風~

把你的觀點和大家分享一下吧？

「壹佰乾貨鋪」——互聯網產品、運營、設計、職場精品乾貨，應有盡有！

咱們下期再見~