優(yōu)惠活動(dòng) - 12周年慶本月新客福利
優(yōu)惠活動(dòng) - 12周年慶本月新客福利
優(yōu)惠活動(dòng) - 12周年慶本月新客福利

移動(dòng)應(yīng)用程序的視覺設(shè)計(jì)

日期 : 2021-11-05 22:45:10

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

相關(guān)文章