當我們回顧這幾年做的體驗比較優(yōu)秀的交互設(shè)計時,會明顯發(fā)現(xiàn)做的比較好的APP都是注重功能優(yōu)先的。對一個產(chǎn)品來說，好的功能設(shè)計是它成功的關(guān)鍵。美學和視覺細節(jié)同樣重要,因為他們可以有效的提升功能設(shè)計。
陰影和用戶界面的可發(fā)現(xiàn)性
GUI設(shè)計師在設(shè)計時運用陰影是有原因的，他們通過在界面里創(chuàng)建視覺線索來告訴用戶大腦，這就是他們要找的用戶界面元素。
設(shè)計可供性
在早些時候的用戶界面中，投影就被運用到了界面中，它使得圖片和控件在頁面里被凸顯出來，讓用戶理解這些控件是可以直接操作的，盡管每個APP的視覺線索有差異，但是用戶通常可以信賴下面兩個假設(shè)。
1.漂浮起來的元素看起來是可以按下去的（可以用鼠標或者手指點擊），這通常作為一個視覺信號被運用到按鈕中。
2.凹陷下去的元素看起來是可以填充的，這通常作為一個視覺信號被運用到輸入框中。
下圖你可以看到在Windows 2000的對話框中，陰影和高光的使用來幫助用戶理解哪些元素是可以交互的。
感知行動的可能性:注意按鈕的高度。
創(chuàng)建視覺層次和縱深感
現(xiàn)在的界面布局都用到了Z軸，并且對它加以充分利用。元素在Z軸的位置對用戶來說是重要的提示。
Z軸是垂直于屏幕所在的平面，在正軸方向朝向用戶。圖片來自：Material Design
在不同的兩個元素中陰影可以表示兩者的層級，而且在一些案例中，陰影可以幫助用戶理解，一個物體實在另一個物體之上的。
圖片來自：Material Design
為什么它這么重要的可視化元素的位置在三維空間?答案很簡單—物理定律。
為什么物體在三維空間的位置如此重要？答案很簡單，因為物理定律。
物質(zhì)世界中的一切都是有維度的,元素在三維空間互相交互:他們可以堆疊或附加在另一個物體上面,但彼此不能互相穿過。同時它們也投射陰影和反射光線。對這些交互的理解是我們理解圖形界面的基礎(chǔ)。
讓我們看一下谷歌的Material Design。很多人仍然稱之為扁平化設(shè)計,但其實它的主要特色就是它是有維度的。他使用一致的隱喻和借鑒物理屬性的原則，幫助用戶理解界面和解釋在上下文中的視覺層次結(jié)構(gòu)。
物理定律是深深融入我們的認知:沒有一個更大的陰影,就沒有東西表明圓形黃色的圓形按鈕是獨立于背景表面。
圖片來自：Google
用高度來提供視覺反饋
重要的一點是陰影和高度緊密關(guān)聯(lián)。海拔是兩個表面沿著z軸之間的深度或者高度。測量的是從一個表面到另一個表面的距離,一個元素的高度暗示兩個表面之間的距離和陰影的深度。從下圖可以看到,物體離地面越遠，陰影也越大和越模糊。
海拔高度在Material Design中的運用:Z軸深度 =1 非常接近地面,Z軸深度= 5是遠離地面。
有些元素，比如按鈕的高度是動態(tài)的,他們用高度來反饋用戶的操作（例如：正常、聚焦和按下狀態(tài))。陰影對于物體的運動方向和平面面之間的距離是否增加或減少可以提供非常有用的線索。用戶可以很自信的去點擊或者按下某個按鈕，按下之后他們需要立即獲得反饋來確保他們操作成功，而陰影可以為這些提供良好的視覺反饋。
一個物體的高度決定了陰影的出現(xiàn)。顯示的數(shù)值為Android APP。圖片來源:Behance
上半部分先講投影這塊，總結(jié)一下：
投影來源于真實的物理生活中，大家每天都能真實的感受到，所以用投影來進行GUI設(shè)計，可以拉近APP和用戶的距離，降低了用戶的學習成本，這也剝?nèi)チ藱C器冰冷的外衣，讓人機交互變得更加親切自然，這也符合Donald Norman提出的情感化設(shè)計原則，Google Material Design就運用的非常棒，個人非常喜歡。
下一部分會講到模糊效果如何幫助GUI設(shè)計提高用戶體驗，敬請期待！
原文地址：Smashing Magazine
作者：Nick Babich
文章轉(zhuǎn)自：學UI網(wǎng) ? 在GUI設(shè)計中如何運用模糊和投影（上）
