雖然策劃優(yōu)雅的用戶體驗(yàn)以及調(diào)整每種交互很重要，但是也不能忘記使這一切成為可能的像素。當(dāng)然，我談?wù)摰氖且曈X設(shè)計(jì)，即移動(dòng)應(yīng)用程序的實(shí)際外觀。設(shè)計(jì)優(yōu)秀的移動(dòng)應(yīng)用程序?qū)言S多學(xué)科集中到一起，但是我堅(jiān)持認(rèn)為視覺設(shè)計(jì)息其中最重要的。你可以把所有適當(dāng)?shù)牟糠纸M裝起來，并且完美地計(jì)劃每個(gè)屏幕界面，但是如果你的設(shè)計(jì)很糟糕，那么隨著時(shí)間的推移,所有這一切都會(huì)變得毫無意義。優(yōu)秀的視覺設(shè)計(jì)師就像能夠擊中投球手投出的90英里1小時(shí)(mph)的快球的天才。一些設(shè)計(jì)師從- -開始就讓人驚艷，而其他設(shè)計(jì)師會(huì)有較好的表現(xiàn)，并且隨著時(shí)間的推移通過實(shí)踐變得讓人驚艷。一些 人開始時(shí)身體里沒有藝術(shù)細(xì)胞, 但是他們]極其努力地工作，并且在整個(gè)職業(yè)生涯中一直在磨練他們的技能。 不管你多么有才華，總是可以利用一些通用的原則使自己的作品更上一層樓。我的頭腦中自始至終都會(huì)想著這些珍貴的話語。就像高爾夫球手在揮桿擊球時(shí)會(huì)牢記幾條關(guān)鍵的原則-樣。
-
對(duì)比
良好的對(duì)比對(duì)于移動(dòng)應(yīng)用程序至關(guān)重要，因?yàn)樗鼤?huì)影響用戶查看設(shè)計(jì)的方....確確實(shí)實(shí)是這樣。對(duì)比指不同或類似的元素相對(duì)于彼此是如何顯示的。如果設(shè)計(jì)中的所有內(nèi)容看起來都非常相似，那么用戶將不知道首先觀看哪里:屏幕上將是一-堆亂七八槽的RGB值。如果你對(duì)用戶應(yīng)該先觀看哪些界面元素不敏感，那么將不能夠有效地設(shè)置每個(gè)元素的優(yōu)先級(jí)。不佳的對(duì)比可能需要用戶在界面中觀看第二次或第三次才會(huì)注意到的最重要的功能，或者根本就不會(huì)看到它。為了獲得良好的對(duì)比，不同的元素應(yīng)該能夠讓人很明顯地看出它們是不同的。如果它們看起來只是稍有不同，那么用戶將會(huì)混淆，并忽略它們之間的視覺關(guān)系。強(qiáng)烈的視覺對(duì)比可以沿著屏幕指引用戶的眼睛從一個(gè)元素移到另一個(gè)元素。如果處理得當(dāng)，那么用戶將以你想要的精確順序查看所有的元素。如果處理不當(dāng)，那么可能會(huì)掩蓋重要的元素,從而引起混淆。
-
重復(fù)
要使用戶信任和熟悉你的應(yīng)用程序，你. 需要使他們感到可以舒適地使用它。有多種方式可以達(dá)到這個(gè)目的。就視覺設(shè)計(jì)而言，可以通過注意你在整個(gè)應(yīng)用程序中編排相關(guān)項(xiàng)的樣式來建立信任。通過為相似的元素重復(fù)使用樣式，可以使用戶適應(yīng)應(yīng)用程序的含義及其元素的重要性。忽視這一點(diǎn)將產(chǎn)生混淆。因此, 要使相關(guān)的元素看上去和感覺上是相關(guān)的，尤其是在一行中出現(xiàn)多個(gè)這樣的元素時(shí)。一個(gè)剪貼板管理器，用于存儲(chǔ)文本、圖像、URL及復(fù)制到; iPhone中的其他項(xiàng)目。復(fù)制項(xiàng)目的列表是應(yīng)用程序中的一個(gè)關(guān)鍵屏幕，不管存儲(chǔ)的項(xiàng)目類型是什么，視覺設(shè)計(jì)都是熟悉的，并且相關(guān)的動(dòng)作將保持一致。由于每個(gè)項(xiàng)目都沒有它自己的外觀，用戶就知道他們將能夠以一致的方式操作這些項(xiàng)目。
-
對(duì)齊
對(duì)齊是優(yōu)秀視覺設(shè)計(jì)的標(biāo)志，它在移動(dòng)應(yīng)用程序中特別重要。元素應(yīng)該對(duì)齊到某個(gè)物體:其他元素、網(wǎng)格、黃金比例框架、屏幕的邊緣。沒有對(duì)齊的界面元素和構(gòu)件看上去好像出錯(cuò)了，就像它們居無定所、沒有穩(wěn)固的基礎(chǔ)一樣。不需要許多設(shè)計(jì)技能即可正確地排列元素，但它確實(shí)可以吸引敏銳的眼睛:某個(gè)元素是否完美地與別的元素對(duì)齊。只是接近還不夠，它必須是完美的。為了把元素對(duì)齊到像素精度，我通常會(huì)放大畫布，直到我可以清晰地看見像素的開始和結(jié)束位置。我還會(huì)拖人一些水平和垂直輔助線，以使對(duì)齊更容易。不要用目光粗略地測量它,要確保它是完美的。在兩條邊緣之間居中顯示按鈕或構(gòu)件時(shí)，是進(jìn)行對(duì)齊的關(guān)鍵時(shí)刻。在為移動(dòng)應(yīng)用程序設(shè)計(jì)界面時(shí)，我發(fā)現(xiàn)自己執(zhí)行該操作的次數(shù)比所有其他的對(duì)齊任務(wù)都要多。在工具箱中居中顯示按鈕、在標(biāo)簽中居中顯示文本、在按鈕中居腫顯示圖像、在方框中居中顯示控件一-它們隨時(shí)都會(huì)發(fā)生。 像素完美的對(duì)齊可以使設(shè)計(jì)從合格上升到優(yōu)秀。在用于iPone的Twiter中可以找到對(duì)齊的最佳示例。當(dāng)用戶在時(shí)間線中點(diǎn)擊推特時(shí)，一組圖標(biāo)將漸現(xiàn)， 提供了用于推特的快捷動(dòng)作。無論推特有多長，這些圖標(biāo)都是跨行均勻分布的，并且在行內(nèi)居中顯示。除非你習(xí)慣于各個(gè)像素或者極小的移動(dòng)屏幕，否則確定蹩腳的對(duì)齊可能需要少許實(shí)踐。但是一旦你開始注意到拙劣的對(duì)齊方式，那么到處就可以看到它。
-
接近度和分組
應(yīng)該把相似或相關(guān)的元素組織在一起，構(gòu)成一個(gè)聚合的整體。其好處是，用戶將能夠更快地瀏覽項(xiàng)目集合，并且更容易確定元素間的關(guān)系。為了能夠通過接近度顯示項(xiàng)目的關(guān)系，首先必須理解項(xiàng)目的層次結(jié)構(gòu)。MoneyWell (一款用于iPhone的個(gè)人理財(cái)應(yīng)用程序)具有清晰地設(shè)計(jì)的界面。它的主要財(cái)務(wù)屏幕顯示了一個(gè)簡單的表格視圖，以及每一行上的開支。開支的類型作為標(biāo)簽顯示在左邊，那個(gè)項(xiàng)目的費(fèi)用則右對(duì)齊。為什么不把開支直接放在左邊的標(biāo)簽旁邊呢?下面的模擬圖顯示了這樣做的效果。
-
紋理
物理物體的表面并不是完全平坦或均勻的:它們具有瑕疵和棱角。像皮革、紙張、衣服和木頭這樣的有機(jī)物質(zhì)都有許多瑕疵。使界面逼真意味著要注意紋理。沒有什么東西只具有一種單調(diào)的顏色。任何物體都有細(xì)微的紋理，甚至在最亮的表面上也是如此。環(huán)顧你的工作空間: 觀察每個(gè)表面和物體.上的紋理。作為練習(xí)，嘗試在你所選的設(shè)計(jì)工具中再現(xiàn)其中一些表面。要在你的工具箱中保存許多紋理,以便使你能夠制作出更豐富的界面類型。
-
光線
何時(shí)使用漸變是合適的?陰影是用于什么的?邊緣高光色怎么樣?所有這些事情具有什么共性?它們]都通過適當(dāng)?shù)厥褂霉饩€使界面元素看起來更逼真。漂亮的用戶界面設(shè)計(jì)的秘訣是真實(shí)感:使屏幕上的2D物體看起來好像位于3D空間里，并且它們具有可以在現(xiàn)實(shí)生活里發(fā)現(xiàn)的體積、表面性質(zhì)和棱角。這些偽造的3D物體具有高光和陰影,就像你看到的桌子上的物體一樣。為了使2D物體看起來像三維的，必須欺騙用戶的眼睛，認(rèn)為它是從屏幕中凸出來的，可以通過操縱光線來實(shí)現(xiàn)這種效果。在設(shè)計(jì)界面時(shí)，要使之看起來好像光源位于屏幕頂部，向下照射所有的文本、構(gòu)件和按鈕。這種光源應(yīng)該投射陰影并創(chuàng)建高光色，這依賴于它以什么順序照射到什么。圓角按鈕看起來就像是扁平的，除非光線好像正在照射它，并且漸變、高光色和陰影都在這種騙術(shù)中起著各自的作用。
相關(guān)文章
精彩導(dǎo)讀
熱門資訊
