移動(dòng)版專(zhuān)題設計的那些事發(fā)布者：本站     時(shí)間：2020-06-21 11:06:30

響應式設計是否適合于專(zhuān)題設計
tuntundeng：如今越來(lái)越多的移動(dòng)設備出現在我們身邊，作為設計師對網(wǎng)站專(zhuān)題的設計進(jìn)入到一個(gè)新階段，需要考慮更多的用戶(hù)訪(fǎng)問(wèn)環(huán)境，輸入設備，分辨率等不同因素。響應式網(wǎng)頁(yè)是目前熱門(mén)的解決方案，好比一雙男生的休閑鞋，可以與所有褲子進(jìn)行隨意搭配。但是對于專(zhuān)題設計來(lái)說(shuō)，響應式設計并不合適。

專(zhuān)題網(wǎng)頁(yè)的設計通常是短平快，在特定時(shí)間達到一些運營(yíng)需求。而響應式設計通常需要考慮更多不同分辨率下的響應效果，花費的設計和開(kāi)發(fā)時(shí)間成本可能是double。而且專(zhuān)題設計具有很強的形式感，響應式設計的流體布局，必然會(huì )對視覺(jué)造成限制，所以對于專(zhuān)題來(lái)說(shuō)做成響應式的網(wǎng)站需要慎重考慮。最高效的辦法就是傳統的為手機版單獨做一版設計稿，讓手機版網(wǎng)頁(yè)滿(mǎn)足通用的移動(dòng)設備分辨率。

先做PC版的頁(yè)面還是手機版頁(yè)面
看用戶(hù)的訪(fǎng)問(wèn)數據來(lái)定。一般情況下都是先做PC版的頁(yè)面再做手機頁(yè)面，PC端網(wǎng)頁(yè)可以呈現更豐富的內容，用戶(hù)瀏覽網(wǎng)頁(yè)時(shí)更專(zhuān)注，達到最好的體驗。但有很多情況下，頁(yè)面的訪(fǎng)問(wèn)更多的來(lái)自手機端，比如手游的專(zhuān)題，用戶(hù)通過(guò)微信、手Q入口進(jìn)入。如果開(kāi)始就先做PC版的專(zhuān)題，想必手機版的內容將是一個(gè)移植的PC版網(wǎng)頁(yè)，讓移動(dòng)版的體驗大打折扣。世界上最遠的距離不是我在你身邊卻不知道我愛(ài)你，而是我用手機開(kāi)你網(wǎng)頁(yè)，你卻你不知道。

移動(dòng)版專(zhuān)題設計的那些事

酷跑的官網(wǎng)用戶(hù)訪(fǎng)問(wèn)來(lái)源，超過(guò)80%來(lái)自移動(dòng)端，在為酷跑的專(zhuān)題設計時(shí)則先從手機版開(kāi)始設計。

舉兩個(gè)栗子，twitter與instagram的PC頁(yè)面都是從手機端的延展，繼承了手機端的交互，保持了一個(gè)很好的一致性體驗。

移動(dòng)版專(zhuān)題設計的那些事

手機版專(zhuān)題頁(yè)面的注意事項
1. 安全寬度與擴展區域讓頁(yè)面適應主流分辨率

與PC上網(wǎng)頁(yè)的做法一樣，確定一個(gè)安全寬度，把重要信息控制在640PX寬度內（以iphone分辨率為安全寬度。目前手游手機版專(zhuān)題規范的數值如下，僅供參考：

移動(dòng)版專(zhuān)題設計的那些事

目前主要瀏覽器在iphone4S下的首屏高度如下,可以根據具體頁(yè)面投放的渠道做響應的首屏高度

移動(dòng)版專(zhuān)題設計的那些事

2. 控制圖片的大小

專(zhuān)題的頭圖一般有很強的視覺(jué)，對于手機用戶(hù)來(lái)說(shuō)，加載一張圖片的等待時(shí)間比PC上成本大很多，如果一個(gè)頁(yè)面加載時(shí)間超過(guò)5秒，70%的用戶(hù)會(huì )選擇關(guān)閉，那么再出彩的專(zhuān)題也沒(méi)辦法呈現再用戶(hù)面前了,所以需要對設計稿做折中的處理。

在做頭部的延展區域（超出640px范圍），推薦使用純色，漸變，可以平鋪的素材，以便于減少頭圖的大小，提高加載速度，并且延展區域可以無(wú)縫連接。模糊的背景可以最大限度的壓縮圖片質(zhì)量（反正是糊的，再怎么糊都可以）

移動(dòng)版專(zhuān)題設計的那些事

3. 字體

手機中的字號一般上電腦中的兩倍，一般在電腦中用的12px的字體在手機網(wǎng)頁(yè)中就該使用24px。在設計的過(guò)程中，也要使用iOS和安卓默認渲染的字體，以便更真實(shí)的還原真實(shí)環(huán)境。

在規范手游移動(dòng)版專(zhuān)題中，主要字號控制在3個(gè)，大中小都有一個(gè)區間。避免隨意用字體字號，并且字號必須上整數。

移動(dòng)版專(zhuān)題設計的那些事

4. 控件交互區域適合觸控

手機專(zhuān)題的主按鈕高度大于80px，并且根據活動(dòng)的需求放在首屏內。文字鏈接上下的間距大于80px，手指在屏幕上熱區最小感應是44px。

移動(dòng)版專(zhuān)題設計的那些事

5. 移動(dòng)端網(wǎng)頁(yè)少用跳轉

手機用戶(hù)的網(wǎng)絡(luò )環(huán)境不如PC用戶(hù)，頁(yè)面的跳轉會(huì )對用戶(hù)產(chǎn)生更大的心理效力，如果在手機頁(yè)面中能吧信息合理的展示在一個(gè)頁(yè)面中最佳。如果非要跳轉，咱們可以用些假裝不是跳轉的方式，比如展開(kāi)，浮出等。減少用戶(hù)產(chǎn)生的不安全感。