2018-8-9 藍(lán)藍(lán)設(shè)計的小編
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
版權(quán)申明：本文原創(chuàng)作者酷秀，感謝酷秀原創(chuàng)經(jīng)驗分享！致敬哈
作為一個直接響應(yīng)式的功能平臺，第一個手機(jī)網(wǎng)站只是一個“試驗品”，而不是“成品”。在今天，如此多的智能設(shè)備的確給了我們機(jī)會去做更多的視覺設(shè)計，但這不僅能激發(fā)和吸引用戶，而且增加了用戶體驗。當(dāng)然伴隨著機(jī)會就以為著更多的挑戰(zhàn)。
本文是做出總結(jié)，即通過探索視覺設(shè)計解決方案和相關(guān)的最佳實踐來研究移動設(shè)計，從而做出既美觀又好用的應(yīng)用。
首先我們來看看移動端設(shè)計上的物理限制，其中包括最佳實踐案例；然后我們將著眼于通信設(shè)計，用視覺設(shè)計為移動站和應(yīng)用的內(nèi)容提供支持。
移動設(shè)備和平板設(shè)備的外形和可觸控性，給我們帶來了一些基本的可用性方面的思考。在桌面端，用戶所面對的是更大的顯示區(qū)域和更多的內(nèi)容（相對于移動端），或者將鼠標(biāo)懸浮在某個元素上時能夠獲得更多的信息。
但是移動端的用戶則只能將視線集中在一塊較小的屏幕上，而且必須以各種不同的方式來與設(shè)備進(jìn)行交互。通過記住定義一個移動端布局和移動端交互規(guī)范的細(xì)節(jié)，我們可以在移動端上創(chuàng)造一個直觀的體驗。
移動端屏幕的空間局限性，給設(shè)計工作帶來了一個有趣的限制——如何在有限的屏幕上以最優(yōu)的方式，顯示內(nèi)容以及提供最好交互方式。具體來說，布局要既精簡又能讓用戶集中注意力。
（1 ）布局的結(jié)構(gòu)
為了給設(shè)計打好基礎(chǔ)（造房先打地基，設(shè)計頁面先設(shè)計布局），我們需要考慮如何最有效地使用屏幕空間?！睎鸥裣到y(tǒng)” 1（Grid System）有助于設(shè)計師做到這點(diǎn)：均勻分布的垂直線結(jié)構(gòu)可以作為放置內(nèi)容根據(jù)。
用這個方法，能讓設(shè)計師更容易將按鈕、標(biāo)題或圖像放在最有效的地方。將頁面組件放在網(wǎng)格上有助于引導(dǎo)正在“使用”頁面的用戶，同時創(chuàng)造一個干凈美觀的視覺體驗。
滾動和滑動的空間：用戶在瀏覽頁面內(nèi)容時，不應(yīng)該有任何與瀏覽頁面無關(guān)的操作被用戶“激活”，在用戶嘗試滾動頁面時不應(yīng)該“打開一個鏈接/頁面”，這一點(diǎn)很重要。
換句話說就是，元素之間要有足夠的間距來允許用戶輕松地瀏覽頁面。
在移動設(shè)備上的觸摸屏界面，也意味著視覺設(shè)計必須加強(qiáng)交互。換句話說，元素的大小和位置應(yīng)確保其易用性，并指出動作之間的重要性和相關(guān)性。
按鈕點(diǎn)擊區(qū)域：足夠的按鈕尺寸和間距將確保它們可以被輕松地激活。，理想情況下，標(biāo)準(zhǔn)屏幕上的按鈕應(yīng)該在44px到57px之間，在高密度（視網(wǎng)膜）屏幕上按鈕應(yīng)該在88px到114px之間。 這允許均勻的指尖有足夠區(qū)域去更容易地激活一個按鈕。
可觸及的和顯著的控件：如果相關(guān)連的交互模塊彼此之間很容易點(diǎn)擊，它將允許用戶更快地在它們之間轉(zhuǎn)換。 這將有助于減少用戶在交互連接方面的困惑，并加快更復(fù)雜的流程。
物理條件限制這方面只是我們?yōu)橐苿釉O(shè)備設(shè)計時所面臨挑戰(zhàn)的一半，另一半則是在信息傳達(dá)方面?！耙苿拥谝弧保╩obile first），這個理論提示我們，移動用戶應(yīng)該從網(wǎng)站上獲得與桌面用戶相同的信息價值。考慮到這一點(diǎn)，為移動通信而設(shè)計影響了這個方式——所有設(shè)計師需要接觸他們正在交流的消息。
為了加強(qiáng)通信，我們需要充分利用我們對信息的理解和解讀。人腦解讀視覺信息要比文字信息快得多，這就意味著使用視覺和圖像來加強(qiáng)通信是非常有價值的。 良好的視覺樣式能夠增加價值，支撐內(nèi)容或者交互的主體，并改善整體的用戶體驗（移動端和桌面端）。
我們優(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)容之間的獨(dú)立性。
區(qū)分靜態(tài)項和交互功能：使用強(qiáng)烈的對比有助于傳達(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è)計，如可被刪除的垃圾、照相機(jī)的攝像頭和郵箱的信件。
隱喻可以被用于不同的方式去支持傳達(dá)信息和思想。
維持一個根本的思想：隱喻可以延伸單個設(shè)計元素所能表達(dá)的含義，從而成為設(shè)計或功能的關(guān)鍵中心點(diǎn)。在Flipboard（飛麗博） APP，翻轉(zhuǎn)過渡這個動作是用戶交互的一個完整部分，而這一過程的順利實現(xiàn)是應(yīng)用程序成功的一個因素。通過這種方式使用隱喻，可以快速的傳達(dá)概念給用戶，同時有助于APP展現(xiàn)自己的亮點(diǎn)。
按鈕和交互：設(shè)計按鈕使用的擬物化，是一種模擬真實生活互動元素并使功能變得清晰明了的有效途徑。然而，值得注意的是，如果扁平風(fēng)格必須符合品牌或風(fēng)格的指導(dǎo)方針，那么靜態(tài)物料項目的顏色和樣式被清晰劃分時才得以有效實現(xiàn)，Wunderlist軟件按鈕運(yùn)用了逼真的樣式。
圖標(biāo)解讀：在設(shè)計移動設(shè)備，圖標(biāo)就非常用，用于在有限的屏幕空間允許快速交流復(fù)雜的概念。圖標(biāo)在視覺隱喻的運(yùn)用——特殊的圖標(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)造出一些輝煌而獨(dú)特的東西。隨著對用戶持續(xù)不斷的考慮，會讓我們創(chuàng)造出的主意在功能和美感得以平衡。
移動設(shè)計面臨著一些令人興奮的挑戰(zhàn)和巨大的機(jī)遇，技術(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)格。運(yùn)用固定的格子設(shè)計版面布局，其風(fēng)格工整簡潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設(shè)計的主流風(fēng)格之一。
原文鏈接：http://www.uxbooth.com/articles/designing-mobile-part-3-visual-design/
本文由 @兔子翻譯組 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
藍(lán)藍(lán)設(shè)計( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
相關(guān)文章：
－－－－－－－－－－－－－－－－－－
創(chuàng)意設(shè)計的方法—無窮關(guān)聯(lián)法
UI設(shè)計師的日?！猆I設(shè)計師平常都干些什么
藍(lán)藍(lán)設(shè)計的小編 http://www.cqzjtgb.com