設(shè)計(jì)必須掌握的10條理念
設(shè)計(jì)師同學(xué)們,我想大家都會(huì)在被指點(diǎn)江山之后,產(chǎn)生這樣一個(gè)疑問(wèn):該如何讓你的非設(shè)計(jì)師同事更好的了解設(shè)計(jì),從而避免因彼此的主觀而導(dǎo)致的理解鴻溝呢?
想必下面這篇文章,你真該要推薦他們讀一下了。(您也一定要掌握熟記這些理念,方便自己更好的闡述設(shè)計(jì)意圖)
無(wú)論你是設(shè)計(jì)師,還是開(kāi)發(fā)者,即便你是設(shè)計(jì)愛(ài)好者,都應(yīng)該知道這10條 Kyle Fiedler 列出的最基本的設(shè)計(jì)理念。
01. 設(shè)計(jì)并不只有視覺(jué)
比如這款產(chǎn)品,其體驗(yàn)不只是視覺(jué)性的。只有在用戶喝過(guò)之后,才能感受到其產(chǎn)品的核心體驗(yàn)——純凈的水,和諧的味道。視覺(jué)設(shè)計(jì)僅僅是設(shè)計(jì)的一部分。設(shè)計(jì)關(guān)乎到用戶使用產(chǎn)品、瀏覽網(wǎng)頁(yè)的整體體驗(yàn)。
用戶為何要使用這款應(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)目中,每一位參與者都可以被稱之為”設(shè)計(jì)師”,因?yàn)楫a(chǎn)品的體驗(yàn)和交互,是在所有人的共同努力下完成的。因此無(wú)論是前端、后端還是PM,他們都在產(chǎn)品的研發(fā)過(guò)程中思考著屬于自己職責(zé)內(nèi)的產(chǎn)品設(shè)計(jì)。
02. 以用戶為中心
用戶為核心,而不是設(shè)計(jì)師、產(chǎn)品為核心
設(shè)計(jì)的中心不是設(shè)計(jì)師,不是產(chǎn)品,更不是開(kāi)發(fā)者,而是用戶。產(chǎn)品好不好,用戶說(shuō)的算。以用戶為中心的設(shè)計(jì),更容易成功、更有效、體驗(yàn)更好。
在本人帶學(xué)生、帶菜鳥(niǎo)的時(shí)候,我通常會(huì)讓他們注意一點(diǎn):設(shè)計(jì)要以用戶為核心。要知道你的用戶是誰(shuí)?用戶使用你的產(chǎn)品做什么?用戶的使用感受怎樣?用戶在遇到什么樣的情況后,會(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)用戶。
設(shè)計(jì)師不是獨(dú)裁者,不應(yīng)該”統(tǒng)治”用戶體驗(yàn),而是應(yīng)該根據(jù)用戶的具體情況,讓設(shè)計(jì)順應(yīng)用戶的需求。這才是核心要義。
03.雕琢細(xì)節(jié)
每一個(gè)細(xì)節(jié)都要做到細(xì)膩,例如鏈接使用正確的藍(lán)色色調(diào),字體間距充余。
細(xì)節(jié)能夠?qū)?yōu)秀的設(shè)計(jì)轉(zhuǎn)化為偉大的設(shè)計(jì)。注重細(xì)節(jié),才能讓你的作品脫穎而出,才能令用戶滿意。
細(xì)節(jié)往往很難于捕捉,建議不要在設(shè)計(jì)流程的早期就開(kāi)始抓細(xì)節(jié),這樣比較耗時(shí),放到后期較好。
04. 設(shè)計(jì)時(shí)需要多畫(huà)草圖
草圖是一個(gè)非常廉價(jià)、迅捷、方便的工具。
它有助于我們進(jìn)行思考,幫我們劃分層級(jí),為我們建立起合理的工作流程。
只需30秒就能畫(huà)出一個(gè)理念,無(wú)論是布局、體驗(yàn)設(shè)計(jì)還是用戶流程,都能用草圖體現(xiàn)。
在上學(xué)時(shí),我的大學(xué)老師禁止我們使用計(jì)算機(jī)而是用紙,這直接培養(yǎng)了我畫(huà)草圖的習(xí)慣。在畫(huà)草圖的過(guò)程中,我們會(huì)不斷的更新理念,不斷的進(jìn)行思考,探索各種可能性。然而,我身邊依然有很多設(shè)計(jì)師,不畫(huà)草圖就直接開(kāi)始設(shè)計(jì),這樣的設(shè)計(jì)過(guò)程缺少了很多”可能性”。
而且草圖人人都能畫(huà)。每個(gè)人都會(huì)畫(huà)方框、箭頭、以及曲線,因此草圖絕對(duì)是非常有用的設(shè)計(jì)工具。
05. 留白
蘋(píng)果的留白設(shè)計(jì)突出了自己的產(chǎn)品,這對(duì)很多前端開(kāi)發(fā)者來(lái)說(shuō)似乎是一個(gè)很晦澀的概念,留白能讓頁(yè)面充滿更多的呼吸空間。讓段落和句子更加清爽利落,讓重要的視覺(jué)元素更加突出。
06. 柵格線不是CSS中的框架
柵格線的功能有以下幾點(diǎn)
- 更緊密的連接多個(gè)對(duì)象間的關(guān)系
- 視覺(jué)上,提供了基本的對(duì)齊系統(tǒng)
- 幫助構(gòu)建水平和垂直方向的閱讀節(jié)奏感
- 打造出視覺(jué)平衡
頁(yè)面中的每一個(gè)元素都是一名士兵,柵格線是規(guī)矩和紀(jì)律,在柵格線的約束下,所有的元素都能緊密結(jié)合,排布有序,形成一個(gè)整齊劃一的”軍隊(duì)”
07. 主角只有一個(gè)
如果不分主次,強(qiáng)調(diào)每一個(gè)元素,那么,到底誰(shuí)才是主角?
這是很重要的一點(diǎn),一次最好只強(qiáng)調(diào)一個(gè)元素,這樣視覺(jué)層級(jí)會(huì)變得清晰,頁(yè)面會(huì)更加易讀。
08. 建立一個(gè)靈感圖庫(kù)
靈感圖庫(kù)要多保存一些能夠激發(fā)你靈感的作品,可以是照片、視頻、海報(bào)、T恤,也可是網(wǎng)站。也許以后用得到的時(shí)候可以回來(lái)參考。
同時(shí),仔細(xì)觀察這些設(shè)計(jì),試圖從更深層次去研究細(xì)節(jié),或是研究設(shè)計(jì)者的設(shè)計(jì)手法,應(yīng)用到你的設(shè)計(jì)中,或是琢磨設(shè)計(jì)者的靈感,也許會(huì)給你帶來(lái)新的啟發(fā)。
09.設(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)、使用流程、用戶流程、視覺(jué)原則等方面出發(fā),陳述你的看法。
原文地址:creativebloq
本文地址:http://irelandcustomcontracting.com/tutorial/di1760.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏