圖片版權(quán)所屬：站長(zhǎng)之家
作為一個(gè)直接響應(yīng)式的功能平臺(tái)，在今天，如此多的智能設(shè)備的確給了我們機(jī)會(huì)去做更多的視覺(jué)設(shè)計(jì)，但這不僅能激發(fā)和吸引用戶，而且增加了用戶體驗(yàn)。當(dāng)然伴隨著機(jī)會(huì)就以為著更多的挑戰(zhàn)。
鄭州建網(wǎng)站做出總結(jié)，即通過(guò)手機(jī)網(wǎng)站探索視覺(jué)設(shè)計(jì)解決方案和相關(guān)的最佳實(shí)踐來(lái)研究移動(dòng)設(shè)計(jì)，從而做出既美觀又好用的應(yīng)用。
首先我們來(lái)看看移動(dòng)端web設(shè)計(jì)上的物理限制，其中包括最佳實(shí)踐案例；然后我們將著眼于通信設(shè)計(jì)，用視覺(jué)設(shè)計(jì)為移動(dòng)站和應(yīng)用的內(nèi)容提供支持。
移動(dòng)設(shè)備和平板設(shè)備的外形和可觸控性，給我們帶來(lái)了一些基本的可用性方面的思考。在桌面端，用戶所面對(duì)的是更大的顯示區(qū)域和更多的內(nèi)容（相對(duì)于移動(dòng)端），或者將鼠標(biāo)懸浮在某個(gè)元素上時(shí)能夠獲得更多的信息。
但是移動(dòng)端的用戶則只能將視線集中在一塊較小的屏幕上，而且必須以各種不同的方式來(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)又能讓用戶集中注意力。
（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è)面的用戶，同時(shí)創(chuàng)造一個(gè)干凈美觀的視覺(jué)體驗(yàn)。
滾動(dòng)和滑動(dòng)的空間：用戶在瀏覽頁(yè)面內(nèi)容時(shí)，不應(yīng)該有任何與瀏覽頁(yè)面無(wú)關(guān)的操作被用戶“激活”，在用戶嘗試滾動(dòng)頁(yè)面時(shí)不應(yīng)該“打開(kāi)一個(gè)鏈接/頁(yè)面”，這一點(diǎn)很重要。
換句話說(shuō)就是，元素之間要有足夠的間距來(lái)允許用戶輕松地瀏覽頁(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)擊，它將允許用戶更快地在它們之間轉(zhuǎn)換。 這將有助于減少用戶在交互連接方面的困惑，并加快更復(fù)雜的流程。
物理?xiàng)l件限制這方面只是我們?yōu)橐苿?dòng)設(shè)備設(shè)計(jì)時(shí)所面臨挑戰(zhàn)的一半，另一半則是在信息傳達(dá)方面。“移動(dòng)第一”（mobile first），這個(gè)理論提示我們，移動(dòng)用戶應(yīng)該從網(wǎng)站上獲得與桌面用戶相同的信息價(jià)值�？紤]到這一點(diǎn)，為移動(dòng)通信而設(shè)計(jì)影響了這個(gè)方式——所有設(shè)計(jì)師需要接觸他們正在交流的消息。
為了加強(qiáng)通信，我們需要充分利用我們對(duì)信息的理解和解讀。人腦解讀視覺(jué)信息要比文字信息快得多，這就意味著使用視覺(jué)和圖像來(lái)加強(qiáng)通信是非常有價(jià)值的。 良好的視覺(jué)樣式能夠增加價(jià)值，支撐內(nèi)容或者交互的主體，并改善整體的用戶體驗(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è)良好的的排版，使用戶更容易閱讀和理解內(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)容段落的可讀性，并且可以使用戶清楚地區(qū)分一段內(nèi)容和整體內(nèi)容的差別。
基線網(wǎng)格在HTML和CSS中很難精確地實(shí)現(xiàn)（implement accurately） ，但是它在設(shè)計(jì)過(guò)程中可以為開(kāi)發(fā)尺寸和確定間距提供良好的指導(dǎo)。
QQ客服