2018-8-9 藍(lán)藍(lán)設(shè)計(jì)的小編
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
版權(quán)申明：本文原創(chuàng)作者酷秀，感謝酷秀原創(chuàng)經(jīng)驗(yàn)分享！致敬哈
作為一個(gè)直接響應(yīng)式的功能平臺(tái)，第一個(gè)手機(jī)網(wǎng)站只是一個(gè)“試驗(yàn)品”，而不是“成品”。在今天，如此多的智能設(shè)備的確給了我們機(jī)會(huì)去做更多的視覺(jué)設(shè)計(jì)，但這不僅能激發(fā)和吸引用戶(hù)，而且增加了用戶(hù)體驗(yàn)。當(dāng)然伴隨著機(jī)會(huì)就以為著更多的挑戰(zhàn)。
本文是做出總結(jié)，即通過(guò)探索視覺(jué)設(shè)計(jì)解決方案和相關(guān)的最佳實(shí)踐來(lái)研究移動(dòng)設(shè)計(jì)，從而做出既美觀又好用的應(yīng)用。
首先我們來(lái)看看移動(dòng)端設(shè)計(jì)上的物理限制，其中包括最佳實(shí)踐案例；然后我們將著眼于通信設(shè)計(jì)，用視覺(jué)設(shè)計(jì)為移動(dòng)站和應(yīng)用的內(nèi)容提供支持。
移動(dòng)設(shè)備和平板設(shè)備的外形和可觸控性，給我們帶來(lái)了一些基本的可用性方面的思考。在桌面端，用戶(hù)所面對(duì)的是更大的顯示區(qū)域和更多的內(nèi)容（相對(duì)于移動(dòng)端），或者將鼠標(biāo)懸浮在某個(gè)元素上時(shí)能夠獲得更多的信息。
但是移動(dòng)端的用戶(hù)則只能將視線集中在一塊較小的屏幕上，而且必須以各種不同的方式來(lái)與設(shè)備進(jìn)行交互。通過(guò)記住定義一個(gè)移動(dòng)端布局和移動(dòng)端交互規(guī)范的細(xì)節(jié)，我們可以在移動(dòng)端上創(chuàng)造一個(gè)直觀的體驗(yàn)。
移動(dòng)端屏幕的空間局限性，給設(shè)計(jì)工作帶來(lái)了一個(gè)有趣的限制——如何在有限的屏幕上以最優(yōu)的方式，顯示內(nèi)容以及提供最好交互方式。具體來(lái)說(shuō)，布局要既精簡(jiǎn)又能讓用戶(hù)集中注意力。
（1 ）布局的結(jié)構(gòu)
為了給設(shè)計(jì)打好基礎(chǔ)（造房先打地基，設(shè)計(jì)頁(yè)面先設(shè)計(jì)布局），我們需要考慮如何最有效地使用屏幕空間?！睎鸥裣到y(tǒng)” 1（Grid System）有助于設(shè)計(jì)師做到這點(diǎn)：均勻分布的垂直線結(jié)構(gòu)可以作為放置內(nèi)容根據(jù)。
用這個(gè)方法，能讓設(shè)計(jì)師更容易將按鈕、標(biāo)題或圖像放在最有效的地方。將頁(yè)面組件放在網(wǎng)格上有助于引導(dǎo)正在“使用”頁(yè)面的用戶(hù)，同時(shí)創(chuàng)造一個(gè)干凈美觀的視覺(jué)體驗(yàn)。
滾動(dòng)和滑動(dòng)的空間：用戶(hù)在瀏覽頁(yè)面內(nèi)容時(shí)，不應(yīng)該有任何與瀏覽頁(yè)面無(wú)關(guān)的操作被用戶(hù)“激活”，在用戶(hù)嘗試滾動(dòng)頁(yè)面時(shí)不應(yīng)該“打開(kāi)一個(gè)鏈接/頁(yè)面”，這一點(diǎn)很重要。
換句話說(shuō)就是，元素之間要有足夠的間距來(lái)允許用戶(hù)輕松地瀏覽頁(yè)面。
在移動(dòng)設(shè)備上的觸摸屏界面，也意味著視覺(jué)設(shè)計(jì)必須加強(qiáng)交互。換句話說(shuō)，元素的大小和位置應(yīng)確保其易用性，并指出動(dòng)作之間的重要性和相關(guān)性。
按鈕點(diǎn)擊區(qū)域：足夠的按鈕尺寸和間距將確保它們可以被輕松地激活。，理想情況下，標(biāo)準(zhǔn)屏幕上的按鈕應(yīng)該在44px到57px之間，在高密度（視網(wǎng)膜）屏幕上按鈕應(yīng)該在88px到114px之間。 這允許均勻的指尖有足夠區(qū)域去更容易地激活一個(gè)按鈕。
可觸及的和顯著的控件：如果相關(guān)連的交互模塊彼此之間很容易點(diǎn)擊，它將允許用戶(hù)更快地在它們之間轉(zhuǎn)換。 這將有助于減少用戶(hù)在交互連接方面的困惑，并加快更復(fù)雜的流程。
物理?xiàng)l件限制這方面只是我們?yōu)橐苿?dòng)設(shè)備設(shè)計(jì)時(shí)所面臨挑戰(zhàn)的一半，另一半則是在信息傳達(dá)方面?！耙苿?dòng)第一”（mobile first），這個(gè)理論提示我們，移動(dòng)用戶(hù)應(yīng)該從網(wǎng)站上獲得與桌面用戶(hù)相同的信息價(jià)值。考慮到這一點(diǎn)，為移動(dòng)通信而設(shè)計(jì)影響了這個(gè)方式——所有設(shè)計(jì)師需要接觸他們正在交流的消息。
為了加強(qiáng)通信，我們需要充分利用我們對(duì)信息的理解和解讀。人腦解讀視覺(jué)信息要比文字信息快得多，這就意味著使用視覺(jué)和圖像來(lái)加強(qiáng)通信是非常有價(jià)值的。 良好的視覺(jué)樣式能夠增加價(jià)值，支撐內(nèi)容或者交互的主體，并改善整體的用戶(hù)體驗(yàn)（移動(dòng)端和桌面端）。
我們優(yōu)先考慮使用垂直排版來(lái)傳達(dá)信息，信息結(jié)構(gòu)創(chuàng)建了一個(gè)合理的內(nèi)容流，而可視化設(shè)計(jì)可以進(jìn)一步明確區(qū)分內(nèi)容的層級(jí)。在內(nèi)容排版上使用合適的尺寸和間距，可以創(chuàng)建一個(gè)良好的垂直方向的視覺(jué)流，更清晰的傳達(dá)不同層級(jí)的內(nèi)容。
除了前面提到的垂直網(wǎng)格系統(tǒng)，基線網(wǎng)格（baseline grid）可以在垂直方向上創(chuàng)建一個(gè)良好的的排版，使用戶(hù)更容易閱讀和理解內(nèi)容。
具體來(lái)說(shuō)，基線網(wǎng)格是通過(guò)行高的規(guī)范來(lái)創(chuàng)建的一種網(wǎng)格結(jié)構(gòu)。它在排版上明確的規(guī)定了行距和尺寸，同時(shí)也有助于確定垂直方向上不同的內(nèi)容組之間的間距。遵循這些規(guī)則可以確保內(nèi)容段落的可讀性，并且可以使用戶(hù)清楚地區(qū)分一段內(nèi)容和整體內(nèi)容的差別。
基線網(wǎng)格在HTML和CSS中很難地實(shí)現(xiàn)（implement accurately） ，但是它在設(shè)計(jì)過(guò)程中可以為開(kāi)發(fā)尺寸和確定間距提供良好的指導(dǎo)。
顏色是另外一種非常有價(jià)值的傳達(dá)信息的工具，可以有多種方式來(lái)保證內(nèi)容和信息交互。
傳達(dá)一種色調(diào)或風(fēng)格：色彩設(shè)計(jì)是非常主觀的，它依賴(lài)于個(gè)人經(jīng)驗(yàn)和文化。使用特定的色調(diào)和明暗程度，可以幫助我們傳達(dá)目標(biāo)的整體印象。明亮大膽的色彩營(yíng)造出一種趣味性，暗色調(diào)營(yíng)造出一種優(yōu)雅的氛圍或基調(diào)，而加入了灰的淺色調(diào)會(huì)營(yíng)造出一種復(fù)古感。了解更多的色彩理論（color theory）有助于我們選擇最適合設(shè)計(jì)目標(biāo)的顏色。
區(qū)分細(xì)節(jié)：顏色可以用來(lái)突出內(nèi)容項(xiàng)，說(shuō)明內(nèi)容項(xiàng)之間的聯(lián)系，或維持結(jié)構(gòu)化的內(nèi)容，比如保持內(nèi)容之間的獨(dú)立性。
區(qū)分靜態(tài)項(xiàng)和交互功能：使用強(qiáng)烈的對(duì)比有助于傳達(dá)用途的不同，或者在內(nèi)容或功能之間的連接。混合使用中性色和明亮色，或者用對(duì)比色以確保對(duì)于用戶(hù)來(lái)說(shuō)這個(gè)特定項(xiàng)目是顯眼的。創(chuàng)建一致的用色，例如：跨靜態(tài)的、激活的、未激活的項(xiàng)目，通過(guò)設(shè)計(jì)可以更清晰的展示內(nèi)容和功能之間的不同。
傳達(dá)狀態(tài)的變換：顏色可以智能的使用，在用戶(hù)對(duì)一個(gè)元素進(jìn)行交互后，它可以突出消息、提示和錯(cuò)誤等顯示。例如，許多網(wǎng)站使用綠色來(lái)表示成功，紅色表示錯(cuò)誤信息來(lái)代替更長(zhǎng)更復(fù)雜的文本消息。這有助于提高設(shè)計(jì)的可用性，通過(guò)使用一致的顏色約定來(lái)快速傳遞新信息。
最近，當(dāng)通過(guò)視覺(jué)設(shè)計(jì)進(jìn)行交流的時(shí)候隱喻可以作為一個(gè)有力的解決方案。隱喻通過(guò)喚起人們已經(jīng)熟悉的元素，或者可視的對(duì)象使用戶(hù)快速的理解內(nèi)容和功能。
擬物化就是視覺(jué)隱喻的使用，界面元素被設(shè)計(jì)成與現(xiàn)實(shí)世界中的事物完全相似的模擬現(xiàn)實(shí)世界的對(duì)象。雖然它最近名聲不怎么好并且Windows8和iOS7都遠(yuǎn)離隱喻設(shè)計(jì)（ iOS7 moving further away from it），但這些操作系統(tǒng)和其它移動(dòng)網(wǎng)站和APP都在使用簡(jiǎn)單的隱喻界面設(shè)計(jì)，如可被刪除的垃圾、照相機(jī)的攝像頭和郵箱的信件。
隱喻可以被用于不同的方式去支持傳達(dá)信息和思想。
維持一個(gè)根本的思想：隱喻可以延伸單個(gè)設(shè)計(jì)元素所能表達(dá)的含義，從而成為設(shè)計(jì)或功能的關(guān)鍵中心點(diǎn)。在Flipboard（飛麗博） APP，翻轉(zhuǎn)過(guò)渡這個(gè)動(dòng)作是用戶(hù)交互的一個(gè)完整部分，而這一過(guò)程的順利實(shí)現(xiàn)是應(yīng)用程序成功的一個(gè)因素。通過(guò)這種方式使用隱喻，可以快速的傳達(dá)概念給用戶(hù)，同時(shí)有助于APP展現(xiàn)自己的亮點(diǎn)。
按鈕和交互：設(shè)計(jì)按鈕使用的擬物化，是一種模擬真實(shí)生活互動(dòng)元素并使功能變得清晰明了的有效途徑。然而，值得注意的是，如果扁平風(fēng)格必須符合品牌或風(fēng)格的指導(dǎo)方針，那么靜態(tài)物料項(xiàng)目的顏色和樣式被清晰劃分時(shí)才得以有效實(shí)現(xiàn)，Wunderlist軟件按鈕運(yùn)用了逼真的樣式。
圖標(biāo)解讀：在設(shè)計(jì)移動(dòng)設(shè)備，圖標(biāo)就非常用，用于在有限的屏幕空間允許快速交流復(fù)雜的概念。圖標(biāo)在視覺(jué)隱喻的運(yùn)用——特殊的圖標(biāo)已成為網(wǎng)絡(luò)標(biāo)準(zhǔn)，例如：我們提到的刪除、網(wǎng)絡(luò)攝像頭和電子郵件的圖標(biāo)——也就意味著，人們?cè)诠ぷ鲿r(shí)可以不需要解釋也可以一目了然。
設(shè)計(jì)簡(jiǎn)單而清晰的圖標(biāo)是一項(xiàng)具有挑戰(zhàn)性的任務(wù)，因此了解圖標(biāo)怎樣影響你的設(shè)計(jì)（icons affect the clarity of your design）的清晰性就很重要的。
一個(gè)清晰明了的規(guī)范準(zhǔn)則，比如本系列描述的，對(duì)任何移動(dòng)設(shè)計(jì)人員都是有價(jià)值的。然而只有當(dāng)我們掌握了這些準(zhǔn)則，我們才能超越準(zhǔn)則，打破規(guī)則，打破創(chuàng)造性的界限，創(chuàng)造出一些輝煌而獨(dú)特的東西。隨著對(duì)用戶(hù)持續(xù)不斷的考慮，會(huì)讓我們創(chuàng)造出的主意在功能和美感得以平衡。
移動(dòng)設(shè)計(jì)面臨著一些令人興奮的挑戰(zhàn)和巨大的機(jī)遇，技術(shù)的快速發(fā)展和不斷發(fā)生變化的用戶(hù)場(chǎng)景，意味著今日的限定可能在幾年后不復(fù)存在。對(duì)于這些挑戰(zhàn)，創(chuàng)新思維和創(chuàng)造力可以幫助我們探索新方法，并且讓我們?cè)诿鎸?duì)設(shè)計(jì)問(wèn)題時(shí)可以持續(xù)發(fā)現(xiàn)新的、漂亮的、具有可解決性的解決方案。
名詞解釋?zhuān)?/span>
1、柵格系統(tǒng)（Grid System）：柵格設(shè)計(jì)系統(tǒng)（又稱(chēng)網(wǎng)格設(shè)計(jì)系統(tǒng)、標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計(jì)、瑞士平面設(shè)計(jì)風(fēng)格、國(guó)際主義平面設(shè)計(jì)風(fēng)格），是一種平面設(shè)計(jì)的方法與風(fēng)格。運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡(jiǎn)潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設(shè)計(jì)的主流風(fēng)格之一。
原文鏈接：http://www.uxbooth.com/articles/designing-mobile-part-3-visual-design/
本文由 @兔子翻譯組 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
相關(guān)文章：
－－－－－－－－－－－－－－－－－－
創(chuàng)意設(shè)計(jì)的方法—無(wú)窮關(guān)聯(lián)法
UI設(shè)計(jì)師的日?！猆I設(shè)計(jì)師平常都干些什么
幫助您做出漂亮版式設(shè)計(jì)的八個(gè)實(shí)用技巧
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net