轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( m.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.lins.im/
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
譯者注:基本的設(shè)計(jì)原則對(duì)整個(gè)設(shè)計(jì)的功能影響很大,它決定了你產(chǎn)品易用程度,也是我們作為設(shè)計(jì)師,要遵循的基本原則。本文介紹了一些基礎(chǔ)的設(shè)計(jì)知識(shí),與大家共享。
如果你在一個(gè)堅(jiān)實(shí)的基礎(chǔ)上建房子,它可以允許你嘗試一遍又一遍,直到你得到想要的效果。但是一個(gè)有缺陷的基礎(chǔ)呢 ?即使你雇傭了最杰出的建筑師,那個(gè)可憐的家伙最終還是會(huì)失敗。
當(dāng)它涉及到我們的網(wǎng)站和應(yīng)用程序,用戶界面也包括基本知識(shí)。這是我們所見(jiàn)所知的,也是我們所記住的。這篇文章強(qiáng)調(diào)了一些設(shè)計(jì)師在設(shè)計(jì)用戶圖形界面時(shí)所需要牢記在心的主要設(shè)計(jì)原則。
? 視覺(jué)分組
設(shè)計(jì)師應(yīng)該根據(jù)功能本質(zhì)的不同進(jìn)行視覺(jué)分組。視覺(jué)分組會(huì)使界面的結(jié)構(gòu)干凈、整齊和功能一致性。最重要的是,它允許用戶把同一類型的任務(wù)放在一個(gè)特殊的區(qū)域。
分組的第一步是確定我們的界面提供了哪些功能。基本的四個(gè)組是:編輯,導(dǎo)航,分享和展示。例如,產(chǎn)品應(yīng)用,通常分為三個(gè)組:(他們典型的不包括分享功能):
? 側(cè)邊欄 允許用戶在整個(gè)項(xiàng)目中導(dǎo)航一個(gè)中心點(diǎn) ,通常使用縮略圖或者節(jié)段
? 工具欄 允許用戶編輯他們的項(xiàng)目
? 畫(huà)布 展示項(xiàng)目的當(dāng)前狀態(tài)
Microsoft word 2012是一個(gè)很好的例子:
雖然規(guī)則非常的直觀,但是還有一件事情需要 避免:混合區(qū)域。例如,有一些編輯工具分散在界面的不同區(qū)域。
看到紅色的區(qū)域?他們打破了功能一致性的界面結(jié)構(gòu)。
但是不要停在大要素。 應(yīng)用相同的頁(yè)面區(qū)域也發(fā)現(xiàn)分組原則。關(guān)注工具欄上的圖標(biāo)怎樣分類為小的,有意義的組,例如 “表格工具” (表格,功能,排序單元)和 “插入工具” (圖表、輸入框、形狀、評(píng)論),個(gè)別的會(huì)包括一些媒體按鈕在插入工具中。
同樣,四個(gè)功能模式(導(dǎo)航、展示、編輯、分享)也從桌面應(yīng)用走進(jìn)了我們的網(wǎng)頁(yè)設(shè)計(jì)中:
·關(guān)于導(dǎo)航,我們經(jīng)常在頭部或者側(cè)邊點(diǎn)擊鏈接
·頁(yè)面最大的部分常用來(lái)展示內(nèi)容
·內(nèi)容/ 反饋形式常用來(lái)編輯頁(yè)面
·社交媒體按鈕常用來(lái)分享信息
另外一個(gè)重要的原則:群組空間,但是不要混淆他們。例如,導(dǎo)航按鈕和社交媒體按鈕有不同的用途,因此應(yīng)該有一些不同之處。
·尊重設(shè)備
與以前的用戶比,用戶使用大量的設(shè)備來(lái)創(chuàng)建、瀏覽、分享和消耗內(nèi)容 —每個(gè)都有它單獨(dú)的形狀、尺寸和輸入方式。因此,我們?cè)谧鲈O(shè)計(jì)決定的時(shí)候強(qiáng)烈需要考慮用戶使用設(shè)備的優(yōu)點(diǎn)和缺點(diǎn)。
在為水平設(shè)備做設(shè)計(jì)的時(shí)候,我們應(yīng)該利用他提供的水平空間,將元素并列排放而不是放在另一個(gè)元素的頂部。舉個(gè)例子來(lái)說(shuō)明不遵守水平設(shè)備設(shè)計(jì)的工程原則是如何影響用戶體驗(yàn)的,看一下微軟 Ribbon的界面。
Ribbon的界面,一組復(fù)雜的菜單作為核心,放在頁(yè)面視圖的頂部。它擴(kuò)展了水平空間,因此,奪走了 垂直空間。垂直空間是非常重要的,它可以在當(dāng)前頁(yè)顯示更多行的內(nèi)容 —–在一個(gè)文字處理器里面是最重要的界面元素。
相比之下,看一下 Kword:
注意沒(méi)有,屏幕的空間如何被浪費(fèi)掉了;用戶在當(dāng)前頁(yè)可以看到更多。側(cè)邊欄提供了必要的工具,以幫助用戶在沒(méi)有視覺(jué)中心的情況下進(jìn)行編輯。
在一個(gè) 30英寸的屏幕上安排界面元素可以相當(dāng)簡(jiǎn)單。但是,為一個(gè) 10英寸的移動(dòng)設(shè)備設(shè)計(jì)整合的功能或者不擁擠的界面內(nèi)容都非常棘手。這就引起了下一個(gè)提示:
·去除干擾,而不是功能
很多界面設(shè)計(jì)師堅(jiān)持一種哲學(xué)為“保持簡(jiǎn)單 ”,提倡這個(gè)原則有一個(gè)點(diǎn),然而,以我的經(jīng)驗(yàn),用戶不會(huì)因?yàn)樗?jiǎn)單易用而選擇應(yīng)用。他們選擇基于他們是否能完成主要的任務(wù)。
設(shè)計(jì)師應(yīng)該盡可能整合有用的功能,去除凌亂的界面。為了完成這些,他們應(yīng)該使用 TABS
、下拉菜單或者其他智能的,有理由的解決方案。他們應(yīng)該理解用戶的意圖,只顯示工具或者最可能對(duì)它們有幫助的信息。
例如:( 1)除非我們鼠標(biāo)移到某一項(xiàng)上,否則工具提示是不可見(jiàn)的,。( 2)除非我們移動(dòng)光標(biāo),否則全屏控制通常是不可見(jiàn)的。標(biāo)簽、按鈕和下拉菜單也是為此工作。一般來(lái)說(shuō),一定是有來(lái)龍去脈的。
否則,在訪問(wèn)一個(gè)信息的時(shí)候,會(huì)在空間和點(diǎn)擊次數(shù)之間妥協(xié):
·如果一個(gè)命令或者內(nèi)容(分類)可能會(huì)被頻繁訪問(wèn),那么可以把他設(shè)置成按鈕 /鏈接,或者做一個(gè)下拉菜單條目。
·如果一組命令可能會(huì)被頻繁訪問(wèn),那么把它儲(chǔ)存為標(biāo)簽,或者儲(chǔ)存這組類別為下拉選項(xiàng)。
·當(dāng)他們相互排斥的時(shí)候,使用單選按鈕。
·當(dāng)提供獨(dú)立的選擇,使用復(fù)選框。
好的設(shè)計(jì)是有前后聯(lián)系的,盡管前面的原則經(jīng)常被后面的這兩個(gè)拒絕:
·如果大量的易點(diǎn)擊標(biāo)簽 /按鈕/ 鏈接存在不確切的數(shù)量,那么使用標(biāo)簽 /按鈕/ 鏈接而不是下拉菜單。這個(gè)數(shù)量將會(huì)隨著屏幕的尺寸變化,輸入設(shè)備(觸屏設(shè)備需要更大的 UI控制),你是否感覺(jué)你仍然顯示足夠的實(shí)際內(nèi)容。
·在特殊情況下如果屏幕的控件是最重要的,使用下拉菜單而不是按鈕 /標(biāo)簽/ 鏈接/單選按鈕。
給出足夠的控件,使用鏈接:
然而,如果空間緊張或者有些類別不經(jīng)常訪問(wèn),那就使用下拉選項(xiàng):
除了一下基本的 UI設(shè)計(jì)原則,設(shè)計(jì)師還必須注意細(xì)節(jié)。這將引出最后 —可以說(shuō)是最重要的—良好的界面設(shè)計(jì)原則。
·同理心
許多公司開(kāi)展了廣泛的可用性測(cè)試,找出用戶為什么會(huì)接納或者拒絕他們的應(yīng)用程序,以及他們?nèi)绾翁岣咦约?。有時(shí)候,他們得到的答案很不滿意,用戶不能很明確的指出是什么困擾這他們,但是他們只是覺(jué)得在使用一個(gè)特定的應(yīng)用時(shí)感覺(jué)不舒服。
這不是一個(gè)用戶困難的案例,相反,看似微不足道的一個(gè)設(shè)計(jì)決策對(duì)用戶的潛意識(shí)層次影響非常深。蘋(píng)果為 OSX Lion發(fā)布郵件,例如,他們以下三點(diǎn)觀點(diǎn)受到了好評(píng):
其實(shí),它看起來(lái)整體嗎?設(shè)置三欄取決于設(shè)備的定位,大界面元素互相緊挨著,它不浪費(fèi)屏幕的任何一個(gè)像素,安排三欄是嚴(yán)格的邏輯,他們準(zhǔn)確的反映當(dāng)前的文件夾層次結(jié)構(gòu)(第一欄:主要文件夾;第二欄:子文件夾;第三欄:在文件夾中選定的文件)。
然而對(duì)于許多用戶來(lái)說(shuō),發(fā)布幾天后,即使它是最理想的,用戶還是會(huì)查詢?nèi)绾伟岩晥D模式回復(fù)到經(jīng)典視圖模式,為了找出原因,還是要站在最終用戶的角度感受。
大多數(shù)時(shí)候,當(dāng)使用郵件的時(shí)候,毋庸置疑會(huì)閱讀郵件。這就意味著,大多數(shù)時(shí)候我看著郵件欄。然而,在新的布局中,郵件欄被放到了應(yīng)用的最右邊緣。這起初可能不會(huì)感到困擾,但是一段時(shí)間之后,我可能會(huì)慢慢的厭倦了看我的屏幕邊緣。
相反,我覺(jué)得這個(gè)地區(qū)應(yīng)該在應(yīng)用程序的中心:
如果你想測(cè)試你的同理心能力,試試下面的:忘記頭欄和導(dǎo)航專欄,問(wèn)問(wèn)你自己,如果你需要連續(xù)只看郵件欄,你想選擇什么樣的界面。
總結(jié)(藍(lán)注:這篇很棒!總結(jié)應(yīng)好好看看)
為了盡可能提供最佳的用戶體驗(yàn),重要的是用戶界面設(shè)計(jì)師要緊跟著基本的設(shè)計(jì)原則,重要的原則:
首先,給視覺(jué)分區(qū),不同的區(qū)域從本質(zhì)上代表不同的功能,界面要保持簡(jiǎn)潔、一致的結(jié)構(gòu)。這給用戶帶來(lái)了清晰的易于理解的導(dǎo)航,可以隨時(shí)找到需要的內(nèi)容。
第二,尊重您設(shè)計(jì)的設(shè)備特點(diǎn)。每個(gè)設(shè)備都有其優(yōu)勢(shì)和劣勢(shì)。分析和利用他們 用戶的優(yōu)勢(shì)。
第三,去除凌亂,而不是功能。畢竟,用戶為什么使用你的應(yīng)用第一位是功能(表面上),使用標(biāo)簽、下拉菜單、智能關(guān)聯(lián)方法,僅提供用戶特殊情況下最可能需要的工具或者信息。
第四,與用戶存在同理心,不要輕易的進(jìn)行設(shè)計(jì)決策。注意,即使一個(gè)最小的設(shè)計(jì)決策也可能對(duì)用戶的潛意識(shí)層面影響非常深,把自己放在他們的位置去創(chuàng)建一個(gè)界面,不僅視覺(jué)順暢,從長(zhǎng)遠(yuǎn)來(lái)看也是非常的方便易用。
遵循這些原則并不容易,但是最終,他節(jié)省了設(shè)計(jì)師、開(kāi)發(fā)人員和用戶的時(shí)間和金錢(qián)。這是一件好事情,對(duì)嗎?