網(wǎng)頁(yè)設(shè)計(jì)教程：知道這些就夠了！

設(shè)計(jì)師同學(xué)們，我想大家都會(huì)在被指點(diǎn)江山之后，產(chǎn)生這樣一個(gè)疑問(wèn)：該如何讓你的非設(shè)計(jì)師同事更好的了解設(shè)計(jì)，從而避免因彼此的主觀(guān)而導(dǎo)致的理解鴻溝呢？ 想必下面這篇文章，你真該要推薦他們讀一下了。（您也一定要掌握熟記這些理念，方便自己更好的闡述設(shè)計(jì)意圖） 無(wú)論你是設(shè)計(jì)師，還是開(kāi)發(fā)者，即便你是設(shè)計(jì)愛(ài)好者，都應(yīng)該知道這10條 Kyle Fiedler 列出的最基本的設(shè)計(jì)理念。

1，設(shè)計(jì)并不只有視覺(jué) 其體驗(yàn)不只是視覺(jué)性的。視覺(jué)設(shè)計(jì)僅僅是設(shè)計(jì)的一部分。設(shè)計(jì)關(guān)乎到用戶(hù)使用產(chǎn)品、瀏覽網(wǎng)頁(yè)的整體體驗(yàn)。 用戶(hù)為何要使用這款應(yīng)用、這款網(wǎng)頁(yè)？怎樣用？這是設(shè)計(jì)要去解決的現(xiàn)實(shí)問(wèn)題，網(wǎng)站的加載速度如何？這也是設(shè)計(jì)要解決的問(wèn)題。 點(diǎn)擊、觸控、懸停的效果如何？這還是設(shè)計(jì)要解決的問(wèn)題，不僅僅是視覺(jué)，很多細(xì)節(jié)上的整體體驗(yàn)都需要設(shè)計(jì)去規(guī)劃。 你認(rèn)為只有視覺(jué)設(shè)計(jì)師配叫”設(shè)計(jì)師”？其實(shí)不然，一個(gè)項(xiàng)目中，每一位參與者都可以被稱(chēng)之為”設(shè)計(jì)師”，因?yàn)楫a(chǎn)品的體驗(yàn)和交互，是在所有人的共同努力下完成的。因此無(wú)論是前端、后端還是PM，他們都在產(chǎn)品的研發(fā)過(guò)程中思考著屬于自己職責(zé)內(nèi)的產(chǎn)品設(shè)計(jì)。 2， 以用戶(hù)為中心 用戶(hù)為核心，而不是設(shè)計(jì)師、產(chǎn)品為核心 設(shè)計(jì)的中心不是設(shè)計(jì)師，不是產(chǎn)品，更不是開(kāi)發(fā)者，而是用戶(hù)。產(chǎn)品好不好，用戶(hù)說(shuō)的算。以用戶(hù)為中心的設(shè)計(jì)，更容易成功、更有效、體驗(yàn)更好。 在本人帶學(xué)生、帶菜鳥(niǎo)的時(shí)候，我通常會(huì)讓他們注意一點(diǎn)：設(shè)計(jì)要以用戶(hù)為核心。要知道你的用戶(hù)是誰(shuí)？用戶(hù)使用你的產(chǎn)品做什么？用戶(hù)的使用感受怎樣？用戶(hù)在遇到什么樣的情況后，會(huì)放棄你的產(chǎn)品？ 但是當(dāng)遇到更大的項(xiàng)目時(shí)，我會(huì)換一種方法，從一種更廣義的角度思考問(wèn)題，應(yīng)該用人性化的情感進(jìn)行設(shè)計(jì)，通過(guò)“敘事性引導(dǎo)”的手段來(lái)完美表達(dá)設(shè)計(jì)的細(xì)節(jié)和情感，暗示和引導(dǎo)用戶(hù)。 設(shè)計(jì)師不是獨(dú)裁者，不應(yīng)該”統(tǒng)治”用戶(hù)體驗(yàn)，而是應(yīng)該根據(jù)用戶(hù)的具體情況，讓設(shè)計(jì)順應(yīng)用戶(hù)的需求。這才是核心要義。 3，雕琢細(xì)節(jié) 每一個(gè)細(xì)節(jié)都要做到細(xì)膩，例如鏈接使用正確的藍(lán)色色調(diào)，字體間距充余。 細(xì)節(jié)能夠?qū)?yōu)秀的設(shè)計(jì)轉(zhuǎn)化為偉大的設(shè)計(jì)。注重細(xì)節(jié)，才能讓你的作品脫穎而出，才能令用戶(hù)滿(mǎn)意。 細(xì)節(jié)往往很難于捕捉，建議不要在設(shè)計(jì)流程的早期就開(kāi)始抓細(xì)節(jié)，這樣比較耗時(shí)，放到后期較好。 4，設(shè)計(jì)時(shí)需要多畫(huà)草圖 草圖是一個(gè)非常廉價(jià)、迅捷、方便的工具。 它有助于我們進(jìn)行思考，幫我們劃分層級(jí)，為我們建立起合理的工作流程。 只需30秒就能畫(huà)出一個(gè)理念，無(wú)論是布局、體驗(yàn)設(shè)計(jì)還是用戶(hù)流程，都能用草圖體現(xiàn)。 5，留白 蘋(píng)果的留白設(shè)計(jì)突出了自己的產(chǎn)品，這對(duì)很多前端開(kāi)發(fā)者來(lái)說(shuō)似乎是一個(gè)很晦澀的概念，留白能讓頁(yè)面充滿(mǎn)更多的呼吸空間。讓段落和句子更加清爽利落，讓重要的視覺(jué)元素更加突出。 6，柵格線(xiàn)不是CSS中的框架
柵格線(xiàn)的功能：

更緊密的連接多個(gè)對(duì)象間的關(guān)系
視覺(jué)上，提供了基本的對(duì)齊系統(tǒng)
幫助構(gòu)建水平和垂直方向的閱讀節(jié)奏感
打造出視覺(jué)平衡
頁(yè)面中的每一個(gè)元素都是一名士兵，柵格線(xiàn)是規(guī)矩和紀(jì)律，在柵格線(xiàn)的約束下，所有的元素都能緊密結(jié)合，排布有序，形成一個(gè)整齊劃一的”軍隊(duì)” 7，主角只有一個(gè) 如果不分主次，強(qiáng)調(diào)每一個(gè)元素，那么，到底誰(shuí)才是主角？ 這是很重要的一點(diǎn)，一次最好只強(qiáng)調(diào)一個(gè)元素，這樣視覺(jué)層級(jí)會(huì)變得清晰，頁(yè)面會(huì)更加易讀。 8，建立一個(gè)靈感圖庫(kù) 靈感圖庫(kù)要多保存一些能夠激發(fā)你靈感的作品，可以是照片、視頻、海報(bào)、T恤，也可是網(wǎng)站。也許以后用得到的時(shí)候可以回來(lái)參考。 同時(shí)，仔細(xì)觀(guān)察這些設(shè)計(jì)，試圖從更深層次去研究細(xì)節(jié)，或是研究設(shè)計(jì)者的設(shè)計(jì)手法，應(yīng)用到你的設(shè)計(jì)中，或是琢磨設(shè)計(jì)者的靈感，也許會(huì)給你帶來(lái)新的啟發(fā)。 9， 設(shè)計(jì)的意義在于解決問(wèn)題 設(shè)計(jì)的意義在于通過(guò)思考，提供解決方案。 在我看來(lái)頁(yè)面上的每一個(gè)元素都有自己存在的理由，都能夠解決某一問(wèn)題。 因此我個(gè)人的習(xí)慣是去掉一些花哨、不能解決實(shí)際問(wèn)題的功能和元素。從而讓頁(yè)面更具功能性。 10，不光要會(huì)設(shè)計(jì)，還要會(huì)講，會(huì)評(píng)判 你知道設(shè)計(jì)師為什么最煩”指點(diǎn)江山”嗎？因?yàn)橹更c(diǎn)江山的人一點(diǎn)都不懂，他們往往喜歡這么說(shuō)： 這個(gè)紅色的圓變成藍(lán)色的比較好，這段文字距離大一點(diǎn)比較好，這個(gè)Logo小一點(diǎn)吧。 問(wèn)題是，你只告訴了設(shè)計(jì)師怎么做，沒(méi)有告訴他為什么。 你要擺事實(shí)，講道理 要告訴他們?yōu)槭裁催@么做，要從設(shè)計(jì)目標(biāo)、使用流程、用戶(hù)流程、視覺(jué)原則等方面出發(fā)，陳述你的看法。

名稱(chēng)欄目：網(wǎng)頁(yè)設(shè)計(jì)教程：知道這些,就夠了！
文章鏈接：http://redsoil1982.com.cn/news48/312248.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、服務(wù)器托管、電子商務(wù)、網(wǎng)站設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)、定制開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)