智能手機的快速普及，推動著中國互聯網由PC向移動的高速轉變，據《第 40 次中國互聯網絡發展狀況統計報告》顯示，截止到2017 年6 月，我國網民(min)使用手機上網的比(bi)例(li)達到96.3%，中國已(yi)經跨入移(yi)動互(hu)聯網的時代。
移(yi)動(dong)互(hu)聯網(wang)(wang)時代，網(wang)(wang)民的(de)(de)上(shang)網(wang)(wang)設備和網(wang)(wang)絡行為、互(hu)聯網(wang)(wang)信(xin)(xin)息內容的(de)(de)展現方式，都發生(sheng)了新的(de)(de)變(bian)化(hua)，這不(bu)可避(bi)免的(de)(de)促使用(yong)戶(hu)的(de)(de)行為習(xi)慣發生(sheng)了改變(bian)。在(zai)這變(bian)化(hua)中(zhong)，既能為用(yong)戶(hu)提供(gong)高(gao)效閱讀，又(you)能滿足(zu)移(yi)動(dong)互(hu)聯網(wang)(wang)特點(dian)的(de)(de)信(xin)(xin)息內容，已成為信(xin)(xin)息內容生(sheng)產者不(bu)得不(bu)研究的(de)(de)一個課題。
今天，就帶大家一起來探索，移動互(hu)聯(lian)網時代，信息內容（移動頁面）的設(she)計之道。
移動設(she)備特點
相對PC設備(bei)而言(yan)，移動(dong)設備(bei)（手機），屏(ping)幕尺(chi)寸更小，但手機使用(yong)的都是高(gao)清屏(ping)幕材料，像(xiang)素(su)密(mi)度(du)(du)比電(dian)(dian)腦屏(ping)幕要(yao)高(gao)（像(xiang)素(su)密(mi)度(du)(du)，即每英寸屏(ping)幕所擁有(you)的像(xiang)素(su)數(shu)，像(xiang)素(su)密(mi)度(du)(du)越大，顯示畫面細節就越豐(feng)富。），所以(yi)手機上(shang)看東西更清晰，同(tong)時(shi)也意味著，同(tong)等尺(chi)寸的圖片，在(zai)電(dian)(dian)腦上(shang)看合適時(shi)，放(fang)到(dao)手機上(shang)看一定(ding)會變小了。
手機屏幕是縱向展現，因此內容的展現方式，也變成了從上往下。再者，手機屏幕小，無法像電腦屏幕，展現密集、大量的信息內容；也不擅長表達遠景、廣角、大場面，但手機屏幕非常擅長表達近焦、微距、高清特寫、局部細節；因此，在有(you)限的(de)(de)屏(ping)(ping)幕空間(jian)，手機(ji)屏(ping)(ping)展(zhan)現的(de)(de)內(nei)容，要足夠(gou)少，足夠(gou)聚焦，從而營造更有(you)視覺力展(zhan)現效果。
用戶行為習慣
在海量的信息、匆促的時間下，用戶閱讀方式、習慣發生了變化；跳讀、挑讀、瞄讀、瞟讀，淺度和碎片化的閱讀方式，已經成為移動互聯網用戶的閱讀常態；所以，移(yi)動端的內容，必須要精簡(jian)、易懂。
從移動(dong)設備(bei)的特點和用戶的行為習慣(guan)分析，移動(dong)端(duan)內容設計，應該(gai)做(zuo)到：豎屏構圖、大圖大字、淺顯易懂、少放內容，以(yi)打造(zao)一(yi)個讓(rang)用戶：看得(de)見、看得(de)完(wan)、看得(de)懂、看得(de)爽(shuang)，既符合移動(dong)設備(bei)展(zhan)現(xian)特點，又能滿足用戶閱讀(du)習慣(guan)的優質移動(dong)頁面。
縱(zong)向構思，滿足(zu)移動(dong)設備展現要求
• 構圖思維：
圖片設計(ji)，從策劃、攝影到PS設計(ji)實施，一(yi)開(kai)始就應有縱向構(gou)圖的(de)豎(shu)屏思維。
• 構圖比例：
當前絕大多數手機的滿屏比例是9：16，事實上，因為有頁面標題欄和底部按鈕，會占用一定空間，如果用9： 16 構圖，會導致一屏展示不完一張圖的情況，因此在不同尺寸、不同分辨率的手機屏幕下，展示窗口的豎屏比例不盡相同。所以，推(tui)薦圖(tu)片設計的構圖(tu)比例為(wei)9:12，確保(bao)能在一屏內完整顯示內容。
• 構(gou)圖尺寸：
絕大多數手機的滿屏尺寸是720* 1280 像素，按9: 12 左右的構圖比例，構圖的尺寸建議為：寬度720px，高度1000px。
▼ 橫(heng)向構圖，閱讀體驗(yan)不佳(jia)
▼ 縱向構圖(tu)，閱(yue)讀(du)更舒服
橫向(xiang)構(gou)圖(tu) VS 縱向(xiang)構(gou)圖(tu)，閱讀(du)感(gan)受的(de)體驗效果分(fen)明(ming)。
