&

您的位置：主頁新聞中心

新聞分類

設(shè)計 | 想要制作移動端？你要考慮這幾個方面

2017/02/27| 閱讀次數(shù)：173

在往期我們的內(nèi)容分享中，我們講到了不少關(guān)于移動站的內(nèi)容，今天我們將對于移動端網(wǎng)頁設(shè)計的幾個細節(jié)點，來跟大家聊一聊~

尺寸問題

尺寸問題是最重要的，只有確定好了設(shè)計尺寸，讓其適用于多種手機屏幕，這樣才能產(chǎn)生不錯的視覺效果以及很好的用戶體驗。雖然說現(xiàn)在有那么多種手機屏幕尺寸，尺寸大小基本都有偏差，但在HTML5移動端設(shè)計稿中，一般選擇640x1136px即可。這樣既滿足了顯示需求，又能降低用戶加載圖片需要的帶寬。

字體選擇

字體是基礎(chǔ)。在網(wǎng)頁上，我們通常會使用微軟雅黑。那么，為了讓客戶端設(shè)計稿有較高的還原度，這里雅黑就會弱爆了，這些字體并不適合手機屏幕來顯示，手機系統(tǒng) ios、android 等是不支持微軟雅黑字體的。這里直接為大家推薦字體，IOS：請直接選用冬青黑體或者華文黑體即可，推薦使用冬青黑體，英文字體和數(shù)字字體可使用 Helvetica，字號選擇則不要超過18，其他字號雙數(shù)，同種類別下字號相同。

顏色選用

在移動端界面中通常需要選取主色，標準色，點晴色。移動端與網(wǎng)頁端稍微不同，主色雖然是決定了畫面風格的色彩但是往往不會被大面積的使用。通常在導(dǎo)航欄/部分按鈕/icon/特殊頁面等地方出現(xiàn)，會有點晴，定調(diào)的作用。統(tǒng)一的主色調(diào)也能讓用戶找到品牌感的歸屬，例如網(wǎng)易紅/騰訊藍/京東紅等等。標準色指的是整套移動界面的色彩規(guī)范，確定文本/線段/圖標/背景等等的顏色。點晴色通常會用在標題文本/按鈕/icon等地方，通常起強調(diào)和引導(dǎo)閱讀的作用。在顏色的選擇上要善用高明度或者純度較高的色彩，這樣不僅能吸人眼球而且能增加空間的層次感。另外要適當留白，尤其移動端首屏中對留白的使用，能夠使頁面的空間感更強，視線更開闊，使用戶進入一種輕松的氛圍。

簡單奪目

因為手機的屏幕大小是有限的，所以這就使得移動端網(wǎng)頁一定要簡單但是卻要夠奪目，夠吸引。簡單就是干凈明了，不需要多么復(fù)雜的效果，太多的功能、操作及其他要素。這樣頁面加載的速度也會更快，奪目是指每屏都要又一個核心元素，中心元素不宜過多，突出重點為最優(yōu)，讓用戶輕松看到最重要的信息。

界面排版

界面排版中最常見的方法是靈活運用黃金分割比比如說通欄高度的和間距的設(shè)定。另外在界面排布中，往往圓角和圓形比直角更容易讓人接受，更加親切。直角通常在需要更全面展示的地方，例如商品展示、用戶的照片等地方，在個人類的頭像，板塊的樣式等使用圓角會有更好的效果。另外在排版中要避免單調(diào)，增加版式的節(jié)奏感，并要有輕重緩急之分，這樣讓用戶在觀看的過程中不會感到冗長，無趣。

細節(jié)為王

細節(jié)？對，在web端，由于我們的瀏覽介質(zhì)是顯示器，加上顯示器分辨率及之前的設(shè)計習慣，所以有時候我們可以不用太注重一個像素的移位等等的問題，但對于手機，可就完全不一樣了，如果你是大大咧咧風格粗獷的設(shè)計師，那現(xiàn)在就要加倍細心了，你的粗心和粗狂的風格會在手機上成倍的放大放大再放大，比如發(fā)光比如投影比如字體一像素投影等等效果，這可不是時尚大氣國際化哦，這是丑。當然，這個感覺是需要一定時間才能找到的，唯一的捷徑就是多在手機上預(yù)覽效果圖，多研究其它應(yīng)用的細節(jié)。有時間可以嘗試畫畫圖標，這是個細致活。