移動設(shè)計第三部分:視覺設(shè)計

作為一個直接響應(yīng)式的功能平臺,第一個手機網(wǎng)站只是一個“試驗品”聪全,而不是“成品”泊藕。在今天,如此多的智能設(shè)備的確給了我們機會去做更多的視覺設(shè)計难礼,但這不僅能激發(fā)和吸引用戶娃圆,而且增加了用戶體驗玫锋。當(dāng)然伴隨著機會就以為著更多的挑戰(zhàn)。

第一部分:在信息架構(gòu)(Information Architecture)里讼呢,我們探討了移動端和桌面端在物理表現(xiàn)形式以及規(guī)范上有哪些差異撩鹿;比如何時何地如何的情況下我們會使用移動設(shè)備;以及我們在使用這些設(shè)備時的行為和感受悦屏。然后在第二部分:交互設(shè)計(Interaction Design)中节沦,我們重點研究了這些差異在開發(fā)結(jié)構(gòu)和功能時會有哪些影響。這倆部分為我們?nèi)绾卧谝苿佣撕推桨迳献龀隽己迷O(shè)計提供了基礎(chǔ)础爬。最后我們在第三部分做出總結(jié)甫贯,即通過探索視覺設(shè)計解決方案和相關(guān)的最佳實踐來研究移動設(shè)計,從而做出既美觀又好用的應(yīng)用幕帆。

首先我們來看看移動端設(shè)計上的物理限制获搏,其中包括最佳實踐案例;然后我們將著眼于通信設(shè)計失乾,用視覺設(shè)計為移動站和應(yīng)用的內(nèi)容提供支持常熙。

在束縛下做設(shè)計

移動設(shè)備和平板設(shè)備的外形和可觸控性給我們帶來了一些基本的可用性方面的思考。在桌面端碱茁,用戶所面對的是更大的顯示區(qū)域和更多的內(nèi)容(相對于移動端)裸卫,或者將鼠標(biāo)懸浮在某個元素上時能夠獲得更多的信息,但是移動端的用戶則只能將視線集中在一塊較小的屏幕上纽竣,而且必須以各種不同的方式來與設(shè)備進(jìn)行交互墓贿。通過記住定義一個移動端布局和移動端交互規(guī)范的細(xì)節(jié),我們可以在移動端上創(chuàng)造一個直觀的體驗蜓氨。

可用的布局

移動端屏幕的空間局限性聋袋,給設(shè)計工作帶來了一個有趣的限制——如何在有限的屏幕上以最優(yōu)的方式顯示內(nèi)容以及提供最好交互方式。具體來說穴吹,布局要既精簡又能讓用戶集中注意力幽勒。

?? 布局的結(jié)構(gòu) — 為了給設(shè)計打好基礎(chǔ)(造房先打地基,設(shè)計頁面先設(shè)計布局)港令,我們需要考慮如何最有效地使用屏幕空間啥容。”柵格系統(tǒng)” 1(Grid System)有助于設(shè)計師做到這點:均勻分布的垂直線結(jié)構(gòu)可以作為放置內(nèi)容根據(jù)顷霹。用這個方法咪惠,能讓設(shè)計師更容易將按鈕、標(biāo)題或圖像放在最有效的地方淋淀。將頁面組件放在網(wǎng)格上有助于引導(dǎo)正在“使用”頁面的用戶遥昧,同時創(chuàng)造一個干凈美觀的視覺體驗。


?? 滾動和滑動的空間 — 用戶在瀏覽頁面內(nèi)容時,不應(yīng)該有任何與瀏覽頁面無關(guān)的操作被用戶“激活”渠鸽,在用戶嘗試滾動頁面時不應(yīng)該“打開一個鏈接/頁面”叫乌,這一點很重要。換句話說就是徽缚,元素之間要有足夠的間距來允許用戶輕松地瀏覽頁面。

人性化的交互

在移動設(shè)備上的觸摸屏界面也意味著視覺設(shè)計必須加強交互革屠;換句話說凿试,元素的大小和位置應(yīng)確保其易用性,并指出動作之間的重要性和相關(guān)性似芝。

?? 按鈕點擊區(qū)域 — 正如我們在第2部分:交互設(shè)計中那婉,所討論的那樣,足夠的按鈕尺寸和間距將確保它們可以被輕松地激活党瓮。 理想情況下详炬,標(biāo)準(zhǔn)屏幕上的按鈕應(yīng)該在44px到57px之間,在高密度(視網(wǎng)膜)屏幕上按鈕應(yīng)該在88px到114px之間寞奸。 這允許均勻的指尖有足夠區(qū)域去更容易地激活一個按鈕呛谜。


?? 可觸及的和顯著的控件 — 如果相關(guān)連的交互模塊彼此之間很容易點擊,它將允許用戶更快地在它們之間轉(zhuǎn)換枪萄。 這將有助于減少用戶在交互連接方面的困惑隐岛,并加快更復(fù)雜的流程。

為通信而設(shè)計

物理條件限制這方面只是我們?yōu)橐苿釉O(shè)備設(shè)計時所面臨挑戰(zhàn)的一半瓷翻。 另一半則是在信息傳達(dá)方面聚凹。“移動第一”(mobile first)齐帚。這個理論提示我們妒牙,移動用戶應(yīng)該從網(wǎng)站上獲得與桌面用戶相同的信息價值。 考慮到這一點对妄,為移動通信而設(shè)計影響了這個方式- -所有設(shè)計師需要接觸他們正在交流的消息湘今。

為了加強通信,我們需要充分利用我們對信息的理解和解讀饥伊。 人腦解讀視覺信息要比文字信息快得多(brain interprets visual information much faster than words)象浑,這就意味著使用視覺和圖像來加強通信是非常有價值的。 良好的視覺樣式能夠增加價值琅豆,支撐內(nèi)容或者交互的主體愉豺,并改善整體的用戶體驗(移動端和桌面端)。

垂直排版規(guī)律

我們優(yōu)先考慮使用垂直排版來傳達(dá)信息茫因。信息結(jié)構(gòu)創(chuàng)建了一個合理的內(nèi)容流蚪拦,而可視化設(shè)計可以進(jìn)一步明確區(qū)分內(nèi)容的層級。在內(nèi)容排版上使用合適的尺寸和間距,可以創(chuàng)建一個良好的垂直方向的視覺流驰贷,更清晰的傳達(dá)不同層級的內(nèi)容盛嘿。


除了前面提到的垂直網(wǎng)格系統(tǒng),基線網(wǎng)格(baseline grid)可以在垂直方向上創(chuàng)建一個良好的的排版括袒,使用戶更容易閱讀和理解內(nèi)容次兆。具體來說,基線網(wǎng)格是通過行高的規(guī)范來創(chuàng)建的一種網(wǎng)格結(jié)構(gòu)锹锰。它在排版上明確的規(guī)定了行距和尺寸芥炭,同時也有助于確定垂直方向上不同的內(nèi)容組之間的間距。遵循這些規(guī)則可以確保內(nèi)容段落的可讀性恃慧,并且可以使用戶清楚地區(qū)分一段內(nèi)容和整體內(nèi)容的差別园蝠。基線網(wǎng)格在HTML和CSS中很難精確地實現(xiàn)(implement accurately)?痢士,但是它在設(shè)計過程中可以為開發(fā)尺寸和確定間距提供良好的指導(dǎo)彪薛。

使用顏色

顏色是另外一種非常有價值的傳達(dá)信息的工具,可以有多種方式來保證內(nèi)容和信息交互怠蹂。

?? 傳達(dá)一種色調(diào)或風(fēng)格 — 色彩設(shè)計是非常主觀的善延,它依賴于個人經(jīng)驗和文化。使用特定的色調(diào)和明暗程度可以幫助我們傳達(dá)目標(biāo)的整體印象褥蚯。明亮大膽的色彩營造出一種趣味性挚冤,暗色調(diào)營造出一種優(yōu)雅的氛圍或基調(diào),而加入了灰的淺色調(diào)會營造出一種復(fù)古感赞庶。了解更多的色彩理論(color theory)有助于我們選擇最適合設(shè)計目標(biāo)的顏色训挡。

?? 區(qū)分細(xì)節(jié) — 顏色可以用來突出內(nèi)容項,說明內(nèi)容項之間的聯(lián)系歧强,或維持結(jié)構(gòu)化的內(nèi)容澜薄,比如保持內(nèi)容之間的獨立性。



? 區(qū)分靜態(tài)項和交互功能 — 使用強烈的對比有助于傳達(dá)用途的不同或者在內(nèi)容或功能之間的連接摊册》艟混合使用中性色和明亮色,或者用對比色以確保對于用戶來說這個特定項目是顯眼的茅特。創(chuàng)建一致的用色忘分,例如跨靜態(tài)的、激活的白修、未激活的項目妒峦,通過設(shè)計可以更清晰的展示內(nèi)容和功能之間的不同。


? 傳達(dá)狀態(tài)的變換 — 顏色可以智能的使用兵睛,在用戶對一個元素進(jìn)行交互后肯骇,它可以突出消息窥浪、提示和錯誤等顯示。例如笛丙,許多網(wǎng)站使用綠色來表示成功漾脂,紅色表示錯誤信息來代替更長更復(fù)雜的文本消息。這有助于提高設(shè)計的可用性胚鸯,通過使用一致的顏色約定來快速傳遞新信息骨稿。

使用隱喻

最近,當(dāng)通過視覺設(shè)計進(jìn)行交流的時候隱喻可以作為一個有力的解決方案蠢琳。隱喻通過喚起人們已經(jīng)熟悉的元素或者可視的對象使用戶快速的理解內(nèi)容和功能啊终。擬物化就是視覺隱喻的極致使用,界面元素被設(shè)計成與現(xiàn)實世界中的事物完全相似的模擬現(xiàn)實世界的對象傲须。雖然它最近名聲不怎么好并且Windows8和iOS7都遠(yuǎn)離隱喻設(shè)計(?iOS7 moving further away from it),但這些操作系統(tǒng)和其它移動網(wǎng)站和APP都在使用簡單的隱喻界面設(shè)計趟脂,如可被刪除的垃圾泰讽、照相機的攝像頭和郵箱的信件。

隱喻可以被用于不同的方式去支持傳達(dá)信息和思想昔期。

?? 維持一個根本的思想 — 隱喻可以延伸單個設(shè)計元素所能表達(dá)的含義已卸,從而成為設(shè)計或功能的關(guān)鍵中心點。在Flipboard(飛麗博)? APP硼一,翻轉(zhuǎn)過渡這個動作是用戶交互的一個完整部分累澡,而這一過程的順利實現(xiàn)是應(yīng)用程序成功的一個因素。通過這種方式使用隱喻般贼,可以快速的傳達(dá)概念給用戶愧哟,同時有助于APP展現(xiàn)自己的亮點。


?按鈕和交互 — 設(shè)計按鈕使用的擬物化哼蛆,是一種模擬真實生活互動元素并使功能變得清晰明了的有效途徑蕊梧。然而,值得注意的是腮介,如果扁平風(fēng)格必須符合品牌或風(fēng)格的指導(dǎo)方針肥矢,那么靜態(tài)物料項目的顏色和樣式被清晰劃分時才得以有效實現(xiàn)。Wunderlist軟件按鈕運用了逼真的樣式叠洗。

?? 圖標(biāo)解讀 — 在設(shè)計移動設(shè)備甘改,圖標(biāo)就非常用,用于在有限的屏幕空間允許快速交流復(fù)雜的概念灭抑。圖標(biāo)在視覺隱喻的運用——特殊的圖標(biāo)已成為網(wǎng)絡(luò)標(biāo)準(zhǔn)十艾,例如我們提到的刪除、網(wǎng)絡(luò)攝像頭和電子郵件的圖標(biāo)——也就意味著名挥,人們在工作時可以不需要解釋也可以一目了然疟羹。設(shè)計簡單而清晰的圖標(biāo)是一項具有挑戰(zhàn)性的任務(wù)主守,因此了解圖標(biāo)怎樣影響你的設(shè)計(icons affect the clarity of your design)的清晰性就很重要的。

未來的手機

一個清晰明了的規(guī)范準(zhǔn)則榄融,比如本系列描述的参淫,對任何移動設(shè)計人員都是有價值的。然而只有當(dāng)我們掌握了這些準(zhǔn)則愧杯,我們才能超越準(zhǔn)則涎才,打破規(guī)則,打破創(chuàng)造性的界限力九,創(chuàng)造出一些輝煌而獨特的東西耍铜。隨著對用戶持續(xù)不斷的考慮,會讓我們創(chuàng)造出的主意在功能和美感得以平衡跌前。

移動設(shè)計面臨著一些令人興奮的挑戰(zhàn)和巨大的機遇棕兼。技術(shù)的快速發(fā)展和不斷發(fā)生變化的用戶場景意味著今日的限定可能在幾年后不復(fù)存在。對于這些挑戰(zhàn)抵乓,創(chuàng)新思維和創(chuàng)造力可以幫助我們探索新方法伴挚,并且讓我們在面對設(shè)計問題時可以持續(xù)發(fā)現(xiàn)新的、漂亮的灾炭、具有可解決性的解決方案茎芋。

———————————————————————————————————

名詞解釋:

1、柵格系統(tǒng)(Grid System):柵格設(shè)計系統(tǒng)(又稱網(wǎng)格設(shè)計系統(tǒng)蜈出、標(biāo)準(zhǔn)尺寸系統(tǒng)田弥、程序版面設(shè)計、瑞士平面設(shè)計風(fēng)格铡原、國際主義平面設(shè)計風(fēng)格)偷厦,是一種平面設(shè)計的方法與風(fēng)格。運用固定的格子設(shè)計版面布局眷蜈,其風(fēng)格工整簡潔沪哺,在二戰(zhàn)后大受歡迎,已成為今日出版物設(shè)計的主流風(fēng)格之一酌儒。

原文鏈接:http://www.uxbooth.com/articles/designing-mobile-part-3-visual-design/

往期文章:

移動設(shè)計第2部分:交互設(shè)計

移動設(shè)計第1部分:信息架構(gòu)

40小時出原型

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末辜妓,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子忌怎,更是在濱河造成了極大的恐慌籍滴,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件榴啸,死亡現(xiàn)場離奇詭異孽惰,居然都是意外死亡,警方通過查閱死者的電腦和手機鸥印,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門勋功,熙熙樓的掌柜王于貴愁眉苦臉地迎上來坦报,“玉大人,你說我怎么就攤上這事狂鞋∑瘢” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵骚揍,是天一觀的道長字管。 經(jīng)常有香客問我,道長信不,這世上最難降的妖魔是什么嘲叔? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮抽活,結(jié)果婚禮上硫戈,老公的妹妹穿的比我還像新娘。我一直安慰自己下硕,他們只是感情好掏愁,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著卵牍,像睡著了一般。 火紅的嫁衣襯著肌膚如雪沦泌。 梳的紋絲不亂的頭發(fā)上糊昙,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機與錄音谢谦,去河邊找鬼释牺。 笑死,一個胖子當(dāng)著我的面吹牛回挽,可吹牛的內(nèi)容都是我干的没咙。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼千劈,長吁一口氣:“原來是場噩夢啊……” “哼祭刚!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起墙牌,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤涡驮,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后喜滨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體捉捅,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年虽风,在試婚紗的時候發(fā)現(xiàn)自己被綠了棒口。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寄月。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖无牵,靈堂內(nèi)的尸體忽然破棺而出漾肮,到底是詐尸還是另有隱情,我是刑警寧澤合敦,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布初橘,位于F島的核電站,受9級特大地震影響充岛,放射性物質(zhì)發(fā)生泄漏保檐。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一崔梗、第九天 我趴在偏房一處隱蔽的房頂上張望夜只。 院中可真熱鬧,春花似錦蒜魄、人聲如沸扔亥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽旅挤。三九已至,卻和暖如春伞鲫,著一層夾襖步出監(jiān)牢的瞬間粘茄,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工秕脓, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留柒瓣,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓吠架,卻偏偏與公主長得像芙贫,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子傍药,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,327評論 25 707
  • Bit operation https://leetcode.com/problems/sum-of-two-in...
    Nancyberry閱讀 427評論 0 0
  • 《易經(jīng)》有云磺平,「用九,見群龍無首怔檩,吉」 釋為:用九褪秀,出現(xiàn)群龍共治,何須為首的現(xiàn)象薛训,此為吉媒吗。 成語解釋:現(xiàn)解釋為一群...
    化物有生閱讀 670評論 0 0
  • 吾高中母校兆麟中學(xué),位黑龍江古堡雙城乙埃,源念李兆麟將軍命之闸英,又名曰兆麟園锯岖。其南北紅墻,交相輝映甫何,園中柳樹出吹、榆樹墻巧奪...
    周延龍閱讀 1,873評論 3 8
  • 總有人說:等你成功了捶牢,我就跟你干! 你可知道:我成功了巍耗,你和我的距離已經(jīng)很遙遠(yuǎn)了秋麸! 雪中送炭的時候你在看;抱團取暖...
    快樂天成閱讀 151評論 0 4