今天25學(xué)堂跟大家分享2個(gè)APP界面設(shè)計(jì)的知識(shí)點(diǎn)。一個(gè)是視覺(jué)引導(dǎo)(更深入探討就是眼動(dòng)研究課題)，另外一個(gè)是啟發(fā)式設(shè)計(jì)。

都屬于UE的部分，也是交互設(shè)計(jì)中最重要的一環(huán)。算是拋磚引玉！希望高手們劈磚！

第一部分：一個(gè)是視覺(jué)引導(dǎo)(更深入探討就是眼動(dòng)研究課題)

在當(dāng)下快節(jié)奏的生活方式下，用戶對(duì)周?chē)膬?nèi)容進(jìn)行精讀的人少之又少，通常是以掃描（scanning）的方式獲取周?chē)男畔?。那么如何讓你的APP更加高效，快速的使用戶自然的瀏覽到所需信息呢？

傳統(tǒng)的web設(shè)計(jì)中，對(duì)視線的引導(dǎo)通常是從左上方到右下方。移動(dòng)設(shè)備中，沒(méi)有PC瀏覽器這么大的視野，確需要更精確的抓住用戶的視線。移動(dòng)設(shè)備大多數(shù)是碎片時(shí)間，所以，要讓用戶更高效更便捷的掃描。

左邊是：Hotmail的登陸頁(yè)面，你的視線在不停跳來(lái)跳去，你會(huì)很累并且很快失去耐心。

右邊是：Gmail的登陸頁(yè)面。你在不知不覺(jué)中完成了一次操作，流暢舒服。

小結(jié)：設(shè)計(jì)師們也要把握好文字和組件的節(jié)奏，引導(dǎo)用戶的視線，讓APP看起來(lái)更加舒適。使用起來(lái)更加方便喜愛(ài)！

第二部分：APP圖標(biāo)啟發(fā)式設(shè)計(jì)

當(dāng)我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)、APP、印刷品等設(shè)計(jì)作品中看到各式各樣的圖標(biāo)，有些圖標(biāo)為設(shè)計(jì)錦上添花，讓內(nèi)容顯得謹(jǐn)慎、專(zhuān)業(yè)，但是大多數(shù)圖標(biāo)很難做到這一點(diǎn)，尤其是剛剛開(kāi)始做設(shè)計(jì)的新手們，習(xí)慣性的把自己畫(huà)的或者是參考的圖標(biāo)堆放在一起。

下面，我們通過(guò)啟發(fā)式評(píng)估的方法來(lái)分析一個(gè)案例。

粗略一看 好像還行，仔細(xì)一看 就感覺(jué)太粗糙！你們覺(jué)得呢？

上圖中的三個(gè)圖標(biāo)，分別表示體溫，血壓，血氧。

從全局上來(lái)說(shuō)，這三個(gè)圖標(biāo)在尺度是差別太大。

1）從顏色構(gòu)成上來(lái)說(shuō)，第一個(gè)圖標(biāo)中出現(xiàn)了兩種顏色。另外兩個(gè)圖標(biāo)都是單色；

2）從圖標(biāo)構(gòu)型上來(lái)說(shuō)，第一個(gè)圖標(biāo)是縱向圖標(biāo)，第二個(gè)圖標(biāo)是一個(gè)圓形圖標(biāo)，第三個(gè)圖標(biāo)是橫向圖標(biāo)；

3）從筆畫(huà)構(gòu)成上來(lái)說(shuō)，第一個(gè)圖標(biāo)細(xì)節(jié)豐富度大，由線和圓繪制而成，第二個(gè)圖標(biāo)只有圓構(gòu)成，第三個(gè)圖標(biāo)則由很銳利的線構(gòu)成。

根據(jù)圖標(biāo)尺度一致性的原則分析了這組圖標(biāo)之后，找到了這組圖標(biāo)的主要問(wèn)題所在，即尺度差異太大，因此顯得非常粗糙、不專(zhuān)業(yè)。因此，在設(shè)計(jì)圖標(biāo)的時(shí)候，遵循一致性的原則，可以盡量避免這些問(wèn)題。

上面這一組圖標(biāo)則整齊舒適的多，首先，顏色統(tǒng)一。接著從構(gòu)形上面來(lái)看：基本都是正方形。

再看細(xì)節(jié)：構(gòu)形時(shí)的曲線、折線、彎曲程度都遵循了一定的規(guī)則。

通過(guò)簡(jiǎn)單的分析，我們發(fā)現(xiàn)遵循了一定的原則，圖標(biāo)可以顯得更加專(zhuān)業(yè)。

總之：APP界面設(shè)計(jì)之細(xì)節(jié)之處正是體現(xiàn)設(shè)計(jì)師設(shè)計(jì)功底的地方。