【特別提示】
由于本期干貨鋪文章圖片太多，所以Yosa并未制作PDF，請各位客官直接戳原文鏈接閱讀學(xué)習，么么噠！
另，本周四晚8：00壹佰大講堂，我們特別邀請了銀聯(lián)商務(wù)產(chǎn)品總監、前百度產(chǎn)品經(jīng)理楊明老師為我們講授”從0獲取100萬(wàn)種子用戶(hù)的運營(yíng)秘技“！聽(tīng)課完全免費，戳這報名咯~
鏘鏘鏘鏘，產(chǎn)品壹佰第十一期干貨鋪和大家見(jiàn)面啦！我是掌柜的Yosa。
上期《你設計的App不合格？15篇干貨洞悉優(yōu)秀產(chǎn)品設計流程丨壹佰干貨鋪》在我們的微信訂閱號”產(chǎn)品100干貨速遞（chanpin100ghsd）“和微信服務(wù)號”產(chǎn)品100（chanpin100）“發(fā)布之后，受到了許多小伙伴的喜愛(ài)，看來(lái)大家還是很愛(ài)學(xué)習的嘛，掌柜的賞你們一人一包香瓜子！
在查看大家的留言時(shí)，有兩位客官向掌柜反映，自己正在為網(wǎng)頁(yè)設計而頭痛，很希望看到和網(wǎng)頁(yè)設計相關(guān)的干貨。所以本期干貨鋪，Yosa特意搜刮了我們網(wǎng)站最”干“的19篇網(wǎng)頁(yè)設計方面的干貨，請客官們妥妥收好！希望大家啃完這些干貨之后，會(huì )覺(jué)得自己成功踏進(jìn)了”網(wǎng)頁(yè)設計“這道門(mén)^ ^
能力出眾的產(chǎn)品經(jīng)理，應該有對于網(wǎng)頁(yè)的鑒賞能力，知道什么樣的設計是好設計，有對設計的平衡感。
產(chǎn)品經(jīng)理作為一個(gè)產(chǎn)品的掌舵手，需要掌握跟了解的技能是方方面面的。同時(shí)，在一個(gè)產(chǎn)品從用戶(hù)需求到產(chǎn)品原型，到產(chǎn)品發(fā)布的過(guò)程中，它是一個(gè)集思廣益的產(chǎn)物，是團隊合作的產(chǎn)物。我們在產(chǎn)品原型的設計階段，需要自己設計功能，交互邏輯，同時(shí)需要與設計師有良好的溝通。產(chǎn)品經(jīng)理要負責向設計師講清楚產(chǎn)品的定位，目標用戶(hù)，需要傳達的信息跟情感。產(chǎn)品經(jīng)理作為一個(gè)產(chǎn)品的整體把握，是全局吃透了該產(chǎn)品的整個(gè)想法的。所以產(chǎn)品經(jīng)理在產(chǎn)品的網(wǎng)頁(yè)設計方面，需要了解到什么程度呢？自己設計出原型，產(chǎn)品功能與交互邏輯的清晰理解與實(shí)現，與設計師溝通的時(shí)候準確表達意圖。
想要獲得快速成長(cháng)，產(chǎn)品經(jīng)理就必須要知道一些網(wǎng)頁(yè)設計知識。Let's begin！
快速發(fā)展的技術(shù)、千變萬(wàn)化的趨勢、應接不暇的軟件和素材，都是網(wǎng)頁(yè)設計師需要面臨的挑戰。但是撇開(kāi)這些一直變化的東西，有一些基本的技能或者說(shuō)能力，是設計師必須熟練掌握的，甚至閉著(zhù)眼睛都必須能搞定的問(wèn)題。那么，今天我們簡(jiǎn)單盤(pán)點(diǎn)一下，想學(xué)習網(wǎng)頁(yè)設計首先需要知道的哪些基礎知識？
1.PC端網(wǎng)頁(yè)設計
推薦干貨>>>《網(wǎng)頁(yè)設計必須get到這10個(gè)技能，請收好！》
色彩、流程、平衡、比例、間距，這些常見(jiàn)的設計概念你都了解了嘛？當你在進(jìn)行設計項目的時(shí)候，這些概念你都應當了解并運用起來(lái)。設計并不是單純的好看，內在的概念也原理能告訴你為什么它這樣才會(huì )漂亮。理解了它們，能自己解釋它們，你才能創(chuàng )造出平衡的美感。
每一次向別人解釋這些概念，探討這些原理，你會(huì )對這些基礎掌握的更加扎實(shí)。
推薦干貨>>>《厲害了！14款幫你提升網(wǎng)頁(yè)設計和開(kāi)發(fā)效率的網(wǎng)站與工具》
實(shí)際上，網(wǎng)頁(yè)設計本身一直在逐步的轉變和調整，這也使得我們所用的工具和服務(wù)也逐步隨之轉變。所以，我們需要推薦一些最新的、實(shí)用的、貼合當前網(wǎng)頁(yè)設計需求的工具和服務(wù)，來(lái)幫助用戶(hù)更好的應對不斷進(jìn)化的需求。
今天所搜集的這14款工具和服務(wù)，覆蓋網(wǎng)頁(yè)設計所涉及到的各個(gè)不同的層面，有線(xiàn)框圖工具，HTML轉化服務(wù)，甚至包括一部非常極客的漫畫(huà)。這14個(gè)工具與服務(wù)覆蓋面足夠廣，總歸有幾個(gè)會(huì )讓你動(dòng)心。
2.移動(dòng)端網(wǎng)頁(yè)設計
推薦干貨>>>《精品譯文丨想搞定移動(dòng)端APP/網(wǎng)頁(yè)設計，你起碼要做好這些事情》
如果你曾仔細觀(guān)察過(guò)近些年來(lái)那些優(yōu)秀移動(dòng)端產(chǎn)品的交互設計，會(huì )發(fā)現它們都擁有一個(gè)共性：它們在基本的功能和設計上的執行都相當的完美。
它們從最基本的人類(lèi)行為模式中汲取營(yíng)養，然后通過(guò)優(yōu)秀的設計和執行，為用戶(hù)悄無(wú)聲息地掃除了所有的障礙，這個(gè)時(shí)候，用戶(hù)會(huì )感受到其中驚艷的視覺(jué)效果和突出的互動(dòng)體驗，其中尤為突出的就是瀏覽體驗。今天的文章，就讓我們一同來(lái)梳理一下，有哪些關(guān)鍵而核心的移動(dòng)端設計項目，總結一下今天移動(dòng)端設計的“核心考點(diǎn)”。
推薦干貨>>>《跟著(zhù)建議走！這樣的移動(dòng)端網(wǎng)站設計才對頭》
雖然移動(dòng)端優(yōu)先的口號喊了這么多年，我們仍能看到許多“不稱(chēng)職”的移動(dòng)端頁(yè)面?？此评硭斎坏木W(wǎng)頁(yè)背后還有著(zhù)許多彎彎繞呢！今天的文章簡(jiǎn)單梳理了一下移動(dòng)端網(wǎng)頁(yè)設計常見(jiàn)的問(wèn)題和技巧，說(shuō)不定正是你想要的呢~
移動(dòng)端的用戶(hù)往往擁有著(zhù)更加明確的目的性，通常他們希望能夠明確、輕松地從移動(dòng)端頁(yè)面獲得他們想要的信息和內容。無(wú)論是瀏覽新聞，網(wǎng)上購物，還是訂閱信息，移動(dòng)端網(wǎng)頁(yè)應當為他們提供盡可能無(wú)縫的用戶(hù)體驗。
今天的文章，我們就從用戶(hù)需求和體驗的角度來(lái)探討一下，移動(dòng)端網(wǎng)頁(yè)要怎么樣設計才對頭。
1. 排版布局
設計本來(lái)就是一種理性的科學(xué)門(mén)類(lèi)，審美因人而異，只有言之有理的設計才能說(shuō)服別人，運用幾何學(xué)的手法就是設計師的利器之一，科學(xué)的設計并不會(huì )限制你的創(chuàng )意，它只會(huì )幫助你的作品成為精品的必要手段之一。
從古至今，人類(lèi)從自然界中得到過(guò)無(wú)數的啟示，其中就包含黃金分割。這個(gè)從貝類(lèi)完美的生長(cháng)方式中提煉出的曲線(xiàn)，改變了所有人的審美。
推薦干貨>>>《網(wǎng)頁(yè)設計該如何利用黃金比例？》
黃金比例自然會(huì )吸引用戶(hù)的眼睛到頁(yè)面上某個(gè)特定的點(diǎn)。 作為一個(gè)概念，它可以幫助你思考內容的布局以及有效利用層次結構，組合布局，排版，色彩和總體原則，將有助于將你的設計水平提升到一個(gè)新的階段。
推薦干貨>>>《網(wǎng)頁(yè)設計致勝關(guān)鍵點(diǎn)：合理的排版布局》
任何一個(gè)具有創(chuàng )意的網(wǎng)頁(yè)設計方案，都會(huì )把目光聚焦在布局和色彩搭配上。這個(gè)餐飲o2o網(wǎng)站獨特的地方，就是在用戶(hù)界面上推出了各種吸引眼球的甜點(diǎn)冰淇淋。網(wǎng)站的排版布局比較簡(jiǎn)約大氣，適當的留白，再加上一些美觀(guān)的字體設計，讓整體看起來(lái)更加時(shí)尚有活力。
網(wǎng)頁(yè)設計有一個(gè)終極目標，介紹鼓勵用戶(hù)去點(diǎn)擊、去操作。這些操作行為包括注冊或者查詢(xún)內容等。這樣就要求設計師能夠把登錄注冊按鈕突顯出來(lái)，讓用戶(hù)一下子就能注意到，設計師需要以用戶(hù)的角度出發(fā)去考慮這些問(wèn)題，才能做出更好的用戶(hù)體驗設計。
2. 色彩使用
無(wú)可爭議的是，色彩是任何設計領(lǐng)域中最重要的一方面。
設計師在決定了一個(gè)網(wǎng)站風(fēng)格的同時(shí)，也決定了網(wǎng)站的情感，而情感的表達很大程度上取決于顏色的選擇。顏色是很有力的工具，所有設計師在設計網(wǎng)頁(yè)時(shí)就應該明白這一點(diǎn)。
推薦干貨>>>《一份簡(jiǎn)單明了的網(wǎng)頁(yè)設計用色指南》
其實(shí)我并不是想說(shuō)某種革命性的用色技巧或者某個(gè)全新的發(fā)現，但是絕大多數的網(wǎng)站配色看起來(lái)確實(shí)非常相似。那么配色的意義又何在呢？如果全世界所有的網(wǎng)站都采用五彩繽紛的配色，那么不會(huì )有任何網(wǎng)站從中脫穎而出。當然，今天的網(wǎng)頁(yè)設計界已經(jīng)很接近這個(gè)狀況了。從這個(gè)角度上來(lái)看，柔和的色調會(huì )更容易讓用戶(hù)眼前一亮。
推薦干貨>>>《如何巧用色彩打造動(dòng)人心弦的網(wǎng)頁(yè)設計》
科學(xué)研究表明，色彩會(huì )影響情緒，會(huì )招致正面的情緒，也能帶來(lái)負面的影響，有的時(shí)候帶來(lái)的情緒與實(shí)際要的并不匹配。Kissmetrics 接著(zhù)補充道，網(wǎng)站的訪(fǎng)客通常只需要大概90秒就能針對一個(gè)網(wǎng)站作出判斷和選擇，而在者其中，有62%~90%的因素是取決于某個(gè)產(chǎn)品的色彩。
3. 細節設計
優(yōu)秀設計和卓越設計之間的區別是比較小的。一般人可能無(wú)法解釋說(shuō)明卓越的設計的具體差別，但他們可以找到自己喜歡的網(wǎng)頁(yè)設計作品。慢工出細活，以下這些網(wǎng)頁(yè)設計中的細節你都會(huì )了嗎？
推薦干貨>>>《干貨丨讓我們談?wù)劸W(wǎng)頁(yè)設計中的卡片式設計》
“我要卡式的”，這是上一期客戶(hù)在和我聊需求的時(shí)候說(shuō)的第一個(gè)需求點(diǎn)。毫無(wú)疑問(wèn)，卡式不論是適應PC還是手機都表現優(yōu)秀。從在線(xiàn)商城到社交媒體網(wǎng)站，卡式設計成為網(wǎng)頁(yè)設計中的一股強大風(fēng)潮且風(fēng)頭正勁。其中最重要的原因想必就是它的靈活性。
卡片，可以是任何形狀、顏色和形式。但是總的來(lái)說(shuō)，他們都包含了圖片、圖標和一些基本的文字信息，例如標題、用戶(hù)名和位置信息。
作為網(wǎng)頁(yè)設計師，你該如何使用卡片？當在設計卡片時(shí)，你應該注意些什么？下面讓我們來(lái)談?wù)劇?
推薦干貨>>>《技巧總結網(wǎng)頁(yè)設計師必知的高效導航設計三原則》
為網(wǎng)站設計導航就如同為房子打基礎。如果地基不牢靠，再壯觀(guān)的設計也無(wú)法掩蓋建筑結構的潛在風(fēng)險，其實(shí)網(wǎng)站也是如此，如果想讓網(wǎng)站擁有優(yōu)秀的用戶(hù)體驗，良好的轉化率，可觀(guān)的銷(xiāo)售額，你需要花費相當的時(shí)間去了解你的用戶(hù)需求，精心設計網(wǎng)站的內容，尋求可靠而直觀(guān)有效的內容組織體系，而這些東西的外化體現，就是網(wǎng)站的導航設計。
1.精彩案例
成為大牛前，怎么能不看大牛的作品？以下這些網(wǎng)頁(yè)設計的風(fēng)格不一，配色大膽。設計新穎，你絕對值得一看，希望能給你帶來(lái)啟發(fā)。enjoy！
推薦干貨>>>《獨辟蹊徑！20個(gè)精巧走心的單頁(yè)滾動(dòng)網(wǎng)頁(yè)設計案例》
單頁(yè)滾動(dòng)也算是目前網(wǎng)頁(yè)設計中一個(gè)獨立的類(lèi)別了，導航、菜單等網(wǎng)頁(yè)元素的設計也有一套獨特的手法。極簡(jiǎn)風(fēng)的導航欄設計其實(shí)算不上太多，畢竟導航欄的部分應該是包羅萬(wàn)象并且常駐頁(yè)面的。而漢堡菜單的存在讓導航具備了更優(yōu)秀的隱藏性，擺脫了滾動(dòng)條、分頁(yè)和復雜的下拉框，讓頁(yè)面更整潔，為視覺(jué)設計留下更大的空間，留住了用戶(hù)。
推薦干貨>>>《身臨其境！那些給人逼真交互體驗的優(yōu)秀網(wǎng)頁(yè)設計》
完美的場(chǎng)景營(yíng)造和新奇高端的設計和開(kāi)發(fā)技巧是有著(zhù)依存共生關(guān)系的。當我們談及實(shí)現方法的時(shí)候，可選的設計技巧有很多，從靜態(tài)的圖片構建的全息影像，到細膩的3D建模，設計師可以自由地選取不同的技巧來(lái)加入動(dòng)態(tài)元素，構建足夠專(zhuān)業(yè)的場(chǎng)景，用豐富有趣的細節來(lái)實(shí)現令人經(jīng)驗的用戶(hù)體驗。
這種強交互、多元素的場(chǎng)景營(yíng)造，多少也算得上是一種設計趨勢，今天我們所準備的網(wǎng)站案例都具有這樣的特征。
推薦干貨>>>《年度力作！20個(gè)驚艷而全面的年度總結優(yōu)秀網(wǎng)頁(yè)設計》
在大量的動(dòng)態(tài)效果和各類(lèi)手段的加持之下，界面越發(fā)的驚艷，統計數據加持之下的信息的呈現方式足夠突出，相當優(yōu)秀。以往正規而嚴肅的內容在設計師和藝術(shù)家的潤色下，開(kāi)始表現出令人振奮、充滿(mǎn)娛樂(lè )精神的一面，數字化多媒體的加入則讓原本單調枯燥的數字煥發(fā)出不一樣的生命力，帶你開(kāi)始一場(chǎng)華麗的冒險。
2.反面教材
網(wǎng)頁(yè)的技巧很多，但是核心的就那么多。字體的選取和搭配，排版布局的規則，留白的規律，說(shuō)起來(lái)復雜，梳理起來(lái)也不是特別多。那么就讓這些反面案例幫你繞過(guò)設計上的坑，幫你打造真正令人難以忘懷的好作品吧。
推薦干貨>>>《這些錯還在犯嗎？網(wǎng)頁(yè)設計中常見(jiàn)的五種交互設計錯誤》
交互設計從來(lái)都不是簡(jiǎn)單的事情?？煽康慕换ネǔＰ枰柚鷮τ脩?hù)行為的深入分析，然后有針對性的精心策劃?？墒请S著(zhù)新的技術(shù)和新的交互模式的不斷涌現，事情就變得不是那么容易了。
其實(shí)大家遭遇的困境都很相似，用戶(hù)已經(jīng)很難被單純炫酷的圖片、流暢的懸停效果和出人意料的動(dòng)效所打動(dòng)，真正能讓他們露出微笑的是持久、令人愉悅的交互設計和用戶(hù)體驗。如果你對于日常的設計中的常見(jiàn)的誤區有所了解，自然會(huì )有意識地繞過(guò)這些坑。
推薦干貨>>>《給新手的反面教材！7個(gè)讓人抓狂的網(wǎng)頁(yè)設計》
有些時(shí)候，當我滿(mǎn)懷期待地點(diǎn)開(kāi)某些網(wǎng)站的時(shí)候——它們的存在簡(jiǎn)直是設計的災難！相信我，當你看見(jiàn)它們也會(huì )抓狂的。從莫明的鏈接丟失到糟糕的可用性，我將會(huì )分享一些會(huì )讓我瞬間暴走的錯誤設計。注意！千萬(wàn)別讓你的用戶(hù)遇到和下面同樣的問(wèn)題。
設計趨勢每年都在改變，出于各種原因，有的設計趨勢在演進(jìn)中逐漸消失，有的則在大家的熟練運用過(guò)程中漸入佳境，甚至逐步褪變成為主流。
你并不需要了解全部的網(wǎng)站設計和技術(shù)趨勢，但是你需要適時(shí)地去了解它們。簡(jiǎn)單來(lái)說(shuō)，重要的不是對所有趨勢如數家珍，但是你至少要深入了解至少三個(gè)流行趨勢，能夠說(shuō)明白這些設計趨勢在視覺(jué)上的特征，為什么要用它們，它們的運作原理是怎樣的，你為什么喜歡或者不喜歡它們，等等。多閱讀設計趨勢文章，你就能搞定這一點(diǎn)。
推薦干貨>>>《來(lái)看看將成為明日主流的七大網(wǎng)頁(yè)設計趨勢》
今天我就自動(dòng)請纓，敢冒天下之大不韙，用本人尚算深厚的設計背景以及對這幾年設計風(fēng)向的觀(guān)察，跟大家提提我對未來(lái)網(wǎng)頁(yè)設計風(fēng)潮的風(fēng)口的猜想。如果大家覺(jué)得說(shuō)的還算有點(diǎn)道理的，有錢(qián)的捧個(gè)錢(qián)場(chǎng)給個(gè)打賞，沒(méi)錢(qián)的捧個(gè)人場(chǎng)評論轉發(fā)來(lái)聲吶喊。當然，如果大家覺(jué)得這是一派胡言的話(huà)，那也就只能請你趕快離場(chǎng)，等下一篇文章上來(lái)再請你來(lái)好好捧場(chǎng)。
推薦干貨>>>《2016年網(wǎng)頁(yè)設計領(lǐng)域11個(gè)流行趨勢預測》
來(lái)自 Medium 的設計師在這篇文章中預測了2016年最值得關(guān)注的設計趨勢，而老牌設計博客Designmodo 對此也有自己的看法。新的技術(shù)和新的設計趨勢會(huì )在2016年逐一涌現，但是總體上來(lái)說(shuō)，它依然會(huì )沿著(zhù)2015的大趨勢來(lái)逐步演變?？梢灶A見(jiàn)到的是，2016年會(huì )有更多的網(wǎng)站使用視頻背景，更多基于Material Design 風(fēng)格的界面設計，幻燈片式的界面切換也會(huì )繼續火熱下去。
推薦干貨>>>《漲姿勢！悄然流行的混合型視差網(wǎng)頁(yè)設計趨勢》
如果你仔細觀(guān)察那些最新的使用了視差技術(shù)的網(wǎng)頁(yè)，你會(huì )發(fā)現這些網(wǎng)站所采用的視差設計已經(jīng)似是而非了。這些網(wǎng)頁(yè)中的可動(dòng)元素非常之多，但是并非動(dòng)畫(huà)；配色風(fēng)格和視覺(jué)元素趨近于扁平風(fēng)，并且借用了來(lái)自Material Design的物理隱喻，融合了許多微妙的交互細節。諸多時(shí)下流行的設計手法和新趨勢開(kāi)始被打碎分解揉合到一起，形成了新的混合型視差滾動(dòng)網(wǎng)頁(yè)。
推薦干貨>>>《查漏補缺！極有可能被低估的三種有趣的網(wǎng)頁(yè)設計趨勢》
一種全新的設計手法，融合了最新的設計技巧，展現和前人不同的氣場(chǎng)，用更現代的氣質(zhì)來(lái)承載內容，這樣的網(wǎng)站無(wú)疑會(huì )更加吸引用戶(hù)，讓訪(fǎng)客難以忘懷。今天要聊的三種設計趨勢其實(shí)已經(jīng)出現一陣子了，但是作為一種相對綜合的設計手法，他們并沒(méi)有引起廣泛的關(guān)注。只需要使用現有的元素、色彩和排版手法，就可以實(shí)現這三種設計效果，但是它們不論是從美學(xué)特征上，還是從功能性上，都不輸于其他的趨勢。有興趣么？不妨來(lái)看看吧。
-完
-本期專(zhuān)題互動(dòng)-
簡(jiǎn)約樸素的網(wǎng)頁(yè)和前衛鮮亮的網(wǎng)頁(yè)，
你更喜歡哪種風(fēng)格？
Yosa更喜歡簡(jiǎn)約風(fēng)~
把你的觀(guān)點(diǎn)和大家分享一下吧？
「壹佰干貨鋪」——互聯(lián)網(wǎng)產(chǎn)品、運營(yíng)、設計、職場(chǎng)精品干貨，應有盡有！
咱們下期再見(jiàn)~
聯(lián)系客服
