圖片版權(quán)所屬：站長之家
作為一個直接響應式的功能平臺，在今天，如此多的智能設(shè)備的確給了我們機會去做更多的視覺設(shè)計，但這不僅能激發(fā)和吸引用戶，而且增加了用戶體驗。當然伴隨著機會就以為著更多的挑戰(zhàn)。
鄭州建網(wǎng)站做出總結(jié)，即通過手機網(wǎng)站探索視覺設(shè)計解決方案和相關(guān)的最佳實踐來研究移動設(shè)計，從而做出既美觀又好用的應用。
首先我們來看看移動端web設(shè)計上的物理限制，其中包括最佳實踐案例；然后我們將著眼于通信設(shè)計，用視覺設(shè)計為移動站和應用的內(nèi)容提供支持。
移動設(shè)備和平板設(shè)備的外形和可觸控性，給我們帶來了一些基本的可用性方面的思考。在桌面端，用戶所面對的是更大的顯示區(qū)域和更多的內(nèi)容（相對于移動端），或者將鼠標懸浮在某個元素上時能夠獲得更多的信息。
但是移動端的用戶則只能將視線集中在一塊較小的屏幕上，而且必須以各種不同的方式來與設(shè)備進行交互。通過記住定義一個移動端布局和移動端交互規(guī)范的細節(jié)，我們可以在移動端上創(chuàng)造一個直觀的體驗。
移動端屏幕的空間局限性，給設(shè)計工作帶來了一個有趣的限制——如何在有限的屏幕上以最優(yōu)的方式，顯示內(nèi)容以及提供最好交互方式。具體來說，布局要既精簡又能讓用戶集中注意力。
（1 ）布局的結(jié)構(gòu)
為了給設(shè)計打好基礎(chǔ)（造房先打地基，設(shè)計頁面先設(shè)計布局），我們需要考慮如何最有效地使用屏幕空間。”柵格系統(tǒng)” 1（Grid System）有助于設(shè)計師做到這點：均勻分布的垂直線結(jié)構(gòu)可以作為放置內(nèi)容根據(jù)。
用這個方法，能讓設(shè)計師更容易將按鈕、標題或圖像放在最有效的地方。將頁面組件放在網(wǎng)格上有助于引導正在“使用”頁面的用戶，同時創(chuàng)造一個干凈美觀的視覺體驗。
滾動和滑動的空間：用戶在瀏覽頁面內(nèi)容時，不應該有任何與瀏覽頁面無關(guān)的操作被用戶“激活”，在用戶嘗試滾動頁面時不應該“打開一個鏈接/頁面”，這一點很重要。
換句話說就是，元素之間要有足夠的間距來允許用戶輕松地瀏覽頁面。
在移動設(shè)備上的觸摸屏界面，也意味著視覺設(shè)計必須加強交互。換句話說，元素的大小和位置應確保其易用性，并指出動作之間的重要性和相關(guān)性。
按鈕點擊區(qū)域：足夠的按鈕尺寸和間距將確保它們可以被輕松地激活。，理想情況下，標準屏幕上的按鈕應該在44px到57px之間，在高密度（視網(wǎng)膜）屏幕上按鈕應該在88px到114px之間。 這允許均勻的指尖有足夠區(qū)域去更容易地激活一個按鈕。
可觸及的和顯著的控件：如果相關(guān)連的交互模塊彼此之間很容易點擊，它將允許用戶更快地在它們之間轉(zhuǎn)換。 這將有助于減少用戶在交互連接方面的困惑，并加快更復雜的流程。
物理條件限制這方面只是我們?yōu)橐苿釉O(shè)備設(shè)計時所面臨挑戰(zhàn)的一半，另一半則是在信息傳達方面�！耙苿拥谝弧保╩obile first），這個理論提示我們，移動用戶應該從網(wǎng)站上獲得與桌面用戶相同的信息價值。考慮到這一點，為移動通信而設(shè)計影響了這個方式——所有設(shè)計師需要接觸他們正在交流的消息。
為了加強通信，我們需要充分利用我們對信息的理解和解讀。人腦解讀視覺信息要比文字信息快得多，這就意味著使用視覺和圖像來加強通信是非常有價值的。 良好的視覺樣式能夠增加價值，支撐內(nèi)容或者交互的主體，并改善整體的用戶體驗（移動端和桌面端）。
我們優(yōu)先考慮使用垂直排版來傳達信息，信息結(jié)構(gòu)創(chuàng)建了一個合理的內(nèi)容流，而可視化設(shè)計可以進一步明確區(qū)分內(nèi)容的層級。在內(nèi)容排版上使用合適的尺寸和間距，可以創(chuàng)建一個良好的垂直方向的視覺流，更清晰的傳達不同層級的內(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ā)尺寸和確定間距提供良好的指導。
QQ客服