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