能讓UI設(shè)計(jì)顯得更簡(jiǎn)約的一些小技巧

2013-11-20    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   sillybuy.com  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請(qǐng)點(diǎn)這里

讓設(shè)計(jì)顯得簡(jiǎn)約的一些技巧

互聯(lián)網(wǎng)界一直在有提倡簡(jiǎn)約設(shè)計(jì)的聲音,可簡(jiǎn)約設(shè)計(jì)有什么小技巧?

作者:龍?zhí)?一個(gè)學(xué)日語(yǔ)的產(chǎn)品經(jīng)理。愛(ài)貓,愛(ài)吐槽。現(xiàn)在在做智能手機(jī)的Rom。

談簡(jiǎn)約設(shè)計(jì)的書(shū)籍有很多,互聯(lián)網(wǎng)界也一直在有提倡簡(jiǎn)約設(shè)計(jì)的聲音。有人說(shuō),看國(guó)內(nèi)的各大門戶的設(shè)計(jì),通通都是文字和功能的粗暴堆砌,難道中國(guó)人真的不擅長(zhǎng)設(shè)計(jì)簡(jiǎn)約嗎?

產(chǎn)品長(zhǎng)什么樣是跟產(chǎn)品的受眾有關(guān)的。我們看國(guó)內(nèi)電視購(gòu)物,從來(lái)都是以“有多少功能”的方向來(lái)推銷產(chǎn)品的。或許我們的目標(biāo)受眾就是喜歡大而全的東西,并不是設(shè)計(jì)師和產(chǎn)品經(jīng)理的錯(cuò)。為了迎合大環(huán)境的產(chǎn)品需求,我們不得不用各種可有可無(wú)的功能點(diǎn)來(lái)吸引用戶。


 

臃腫易煩膩,簡(jiǎn)陋生欲望

產(chǎn)品功能多并不是好事,臃腫的功能會(huì)讓產(chǎn)品本身的定位和識(shí)別度變得稀疏,同時(shí)帶來(lái)的是在視覺(jué)和心理上的壓力。也會(huì)讓產(chǎn)品顯得沒(méi)有深度,感覺(jué)像是一下子就略過(guò)了前戲進(jìn)入高潮了。初期的版本,只要保證那些能讓產(chǎn)品的概念成立的關(guān)鍵功能點(diǎn)和特性就行了。

不過(guò),如果產(chǎn)品太過(guò)簡(jiǎn)陋,僅僅局限于有限的使用場(chǎng)景的話,用戶的使用頻度就會(huì)很低,很容易被遺忘。這也是大多數(shù)旅行網(wǎng)站和 App 的痛處。
每次在斟酌功能點(diǎn)時(shí),大概都會(huì)有這樣的困擾。

能讓產(chǎn)品“看起來(lái)簡(jiǎn)約”的簡(jiǎn)單技巧

我并不認(rèn)為國(guó)外的 App 在功能上會(huì)比國(guó)內(nèi)的要少。在實(shí)現(xiàn)同樣的功能的情況下,國(guó)內(nèi)的 App 設(shè)計(jì)并沒(méi)有有意識(shí)地讓界面看起來(lái)更簡(jiǎn)約。
產(chǎn)品設(shè)計(jì)的簡(jiǎn)約,最直觀的感受就是 UI 設(shè)計(jì)了。在這里分享一些我認(rèn)為可以讓 App “看起來(lái)”更簡(jiǎn)約的幾個(gè)重要的技巧

抑揚(yáng)

抑揚(yáng),就是對(duì)內(nèi)容進(jìn)行有抑有揚(yáng)的對(duì)比處理,通過(guò)對(duì)比的手法能夠讓信息量在視覺(jué)上“顯得”比實(shí)際上少。
錯(cuò)落有致、有強(qiáng)有弱的信息布局,讓用戶更容易地第一眼就把握了整體結(jié)構(gòu),從而快速找到自己想要的信息。就如同報(bào)紙的頭條、各種大小標(biāo)題一樣。這些變化讓人們的閱讀更順暢。想象一下如果報(bào)紙的內(nèi)容全是大小一樣的字體,恐怕沒(méi)人會(huì)有閱讀的欲望吧。
從運(yùn)營(yíng)的角度來(lái)看,通過(guò)對(duì)內(nèi)容的強(qiáng)弱處理,還可以達(dá)到對(duì)用戶的焦點(diǎn)進(jìn)行引導(dǎo)的作用。比如有些網(wǎng)站故意把分享的按鈕做的比其他按鈕要大,位置更顯眼,就是有意識(shí)地想讓用戶多進(jìn)行分享,讓內(nèi)容更好地被傳播。

抑揚(yáng)可以是界面元素的大小、顏色、字體等等,能起到以下作用:
讓界面看起來(lái)更簡(jiǎn)約;
對(duì)用戶行為進(jìn)行引導(dǎo);
幫助用戶快速發(fā)現(xiàn)對(duì)他最重要的信息;
強(qiáng)弱對(duì)比,減少閱讀的壓力感。

留白

亞馬遜-留白

UI 設(shè)計(jì)中重要的要素之一就是留白的運(yùn)用。文字、按鈕等元素周圍的留白越大,越能提升存在感。(這其實(shí)也是上面說(shuō)的“對(duì)比”的一種變形)
留白不意味著頁(yè)面的信息容量降低。
智能手機(jī)上下滾動(dòng)是很舒適的,并沒(méi)有必要為了讓所有內(nèi)容在一個(gè)頁(yè)面內(nèi)全展現(xiàn)出來(lái)而讓字號(hào)變小。這樣做反而會(huì)讓信息更加難以閱讀。
用戶的視覺(jué)需要得到“喘息”。
信息容量大的界面,對(duì)用戶來(lái)說(shuō)是一種閱讀負(fù)擔(dān)。在設(shè)計(jì)這些交互界面時(shí),要注意留白的運(yùn)用。留白能讓界面富有層次感,讓用戶的視覺(jué)得到“喘息”。

icon 也要盡量簡(jiǎn)單

簡(jiǎn)單的 icon
設(shè)計(jì)師通常都是在大屏幕下設(shè)計(jì),而實(shí)際上有些細(xì)節(jié)在大屏幕上的表現(xiàn)和實(shí)際在手機(jī)上的表現(xiàn)會(huì)有意想不到的差異。
有些 icon 放大來(lái)看是很精美的,但放到手機(jī)上看時(shí)總會(huì)覺(jué)得哪里有些不妥,感覺(jué)細(xì)節(jié)多了擠成一坨,適得其反。這時(shí)候可以試試把icon進(jìn)行極端的簡(jiǎn)化,再和原來(lái)的設(shè)計(jì)作對(duì)比,并進(jìn)行細(xì)微的調(diào)整,會(huì)有意想不到的效果。
每個(gè)人對(duì)簡(jiǎn)單的理解可能會(huì)不一樣,但這樣幾次來(lái)回對(duì) icon 反復(fù)打磨,對(duì)簡(jiǎn)單化的努力就可以看出效果來(lái)了。

更多

《寫給大家看的設(shè)計(jì)書(shū)》中提到的四個(gè)設(shè)計(jì)的原則:

  1. 對(duì)比
  2. 對(duì)齊
  3. 重復(fù)
  4. 親密性

這幾個(gè)原則可以用來(lái)作為任何一個(gè)平面設(shè)計(jì)的評(píng)判。在 UI 設(shè)計(jì)中也是很受用的。

題外話,第一部分的“抑揚(yáng)”,其實(shí)還和 IA 設(shè)計(jì)相關(guān),這里就不展開(kāi)來(lái)細(xì)說(shuō)了,先從這幾個(gè)簡(jiǎn)單的小技巧開(kāi)始,讓產(chǎn)品的UI設(shè)計(jì)變得更簡(jiǎn)單吧。

日歷

鏈接

個(gè)人資料

存檔