豎屏?xí)r代已來，你的內(nèi)容，用戶能看見嗎?移動(dòng)互聯(lián)網(wǎng)時(shí)代，網(wǎng)民的上網(wǎng)設(shè)備和網(wǎng)絡(luò)行為、互聯(lián)網(wǎng)信息內(nèi)容的展現(xiàn)方式，都發(fā)生了新的變化，這不可避免的促使用戶的行為習(xí)慣發(fā)生了改變。在這變化中，既能為用戶提供高效閱讀，又能滿足移動(dòng)互聯(lián)網(wǎng)特點(diǎn)的信息內(nèi)容，已成為信息內(nèi)容生產(chǎn)者不得不研究的一個(gè)課題。 移動(dòng)設(shè)備與PC設(shè)備最大的不同是豎屏與橫屏的區(qū)別，相對(duì)PC設(shè)備而言，移動(dòng)設(shè)備，屏幕尺寸更小，但手機(jī)使用的都是高清屏幕材料，像素密度比電腦屏幕要高(像素密度，即每英寸屏幕所擁有的像素?cái)?shù)，像素密度越大，顯示畫面細(xì)節(jié)就越豐富)。迅誠(chéng)科技在大力發(fā)展網(wǎng)站建設(shè)服務(wù)的同時(shí)，也不忘手機(jī)網(wǎng)站的建設(shè)，還有各類小程序開發(fā)、APP開發(fā)，既方便了用戶，又為企業(yè)進(jìn)一步留住了用戶。

       今天，小優(yōu)就帶大家一起來探索，移動(dòng)頁面的設(shè)計(jì)之道。

       手機(jī)屏幕是縱向展現(xiàn)，因此內(nèi)容的展現(xiàn)方式，也變成了從上往下。再者，手機(jī)屏幕小，無法像電腦屏幕，展現(xiàn)密集、大量的信息內(nèi)容。因此，在有限的屏幕空間，手機(jī)屏展現(xiàn)的內(nèi)容，要足夠少，足夠聚焦，從而營(yíng)造更有視覺力展現(xiàn)效果。

       在海量的信息、匆促的時(shí)間下，用戶閱讀方式、習(xí)慣發(fā)生了變化，淺度和碎片化的閱讀方式，已經(jīng)成為移動(dòng)互聯(lián)網(wǎng)用戶的閱讀常態(tài)。所以，移動(dòng)端的內(nèi)容，必須要精簡(jiǎn)、易懂。

        一、構(gòu)圖

       圖片設(shè)計(jì)，從策劃、攝影到PS設(shè)計(jì)實(shí)施，一開始就應(yīng)有縱向構(gòu)圖的豎屏思維。

       構(gòu)圖比例：當(dāng)前絕大多數(shù)手機(jī)的滿屏比例是9：16，事實(shí)上，因?yàn)橛许撁鏄?biāo)題欄和底部按鈕，會(huì)占用一定空間，如果用9：16構(gòu)圖，會(huì)導(dǎo)致一屏展示不完一張圖的情況，因此在不同尺寸、不同分辨率的手機(jī)屏幕下，展示窗口的豎屏比例不盡相同。所以，推薦圖片設(shè)計(jì)的構(gòu)圖比例為9:12，確保能在一屏內(nèi)完整顯示內(nèi)容。

       構(gòu)圖尺寸：絕大多數(shù)手機(jī)的滿屏尺寸是720*1280像素，按9:12左右的構(gòu)圖比例，構(gòu)圖的尺寸建議為：寬度720px，高度1000px。

       橫向構(gòu)圖，閱讀體驗(yàn)不佳。一屏就是最小的信息單元是手機(jī)屏特點(diǎn)之一，因此把信息切碎到手機(jī)屏的一個(gè)信息單元大小，最適宜手機(jī)用戶閱讀。一屏一主題，內(nèi)容一目了然，用戶只需瀏覽一遍，馬上能在腦海里留下印象。

        二、分欄

       左右分欄變上下分欄：手機(jī)用戶面對(duì)的是豎屏，閱讀的習(xí)慣是從上往下，設(shè)計(jì)師已經(jīng)習(xí)慣的左右分欄，在手機(jī)上已經(jīng)并不適用，既無法體現(xiàn)出設(shè)計(jì)的美感，也無法突出內(nèi)容。因此，設(shè)計(jì)時(shí)改變分欄方式，從左右分欄變?yōu)樯舷路謾?，已?jīng)很有必要。

        三、留白

       加大主題間留白：空白是手機(jī)詳情長(zhǎng)圖的斷句符，控制著表達(dá)的節(jié)奏。一方面，加大主題間空白讓主題間隔明顯，使用戶能很輕松地分辨出每個(gè)主題，方便閱讀。另一方面，留白能使作品節(jié)奏明朗、表達(dá)從容不迫。當(dāng)用戶處于舒服平靜的心境，自然延長(zhǎng)了對(duì)整套圖片的閱讀時(shí)間，大幅提高了信息溝通效率。留出空白，反而更能讓用戶聚焦當(dāng)前看到的內(nèi)容。

        四、文字

       標(biāo)題字高≥1/10屏高：提到字號(hào)，我們腦子里浮現(xiàn)的都是這個(gè)字號(hào)在PC屏上的大小，但實(shí)際上這個(gè)印象和手機(jī)屏上的大小差別很大，會(huì)誤導(dǎo)到我們做正確的設(shè)計(jì)，所以手機(jī)圖片設(shè)計(jì)，文字不以字號(hào)為單位來衡量。我們可以以手機(jī)的“屏高”(屏幕高度)來做參照，建議大膽使用≥1/10屏高的大字來做手機(jī)端標(biāo)題。

       一屏文案字?jǐn)?shù)≤3行30字：手機(jī)詳情圖上，一屏之內(nèi)文案用多少字為好？建議：文字閱讀量(包括標(biāo)題和正文)要控制在兩三行、二三十個(gè)字以內(nèi)，也就是普通用戶者看兩三眼就能看完的范圍。用戶停留在每一屏的時(shí)間只有幾秒鐘，文字的閱讀任務(wù)如果太繁重，就觸碰到了用戶的耐心極限，閱讀質(zhì)量大大降低。

       長(zhǎng)文案整版只用文字：當(dāng)一屏中的文字無法控制3行30字以內(nèi)時(shí)，我們應(yīng)把所有圖片去掉，整版只用文字，想讓用戶聚焦于文字，就盡量別讓用戶的眼睛看到任何圖片，這樣，用戶進(jìn)入到文本閱讀模式。其次，把長(zhǎng)文案切割成小段落(最多四行一段)，并且加上小標(biāo)題，便于用戶輕松閱讀。如果某一段文案特別重要，就把除了這段文案以外的地方全部留空，用空白來襯托文字的重要。

        五、背景

       背景圖上勿蓋字：手機(jī)屏幕像素比較高，色彩絢麗，人眼比較容易疲勞。

       第一，色彩不用太復(fù)雜，減少對(duì)眼睛的刺激，客觀上延長(zhǎng)了用戶的耐心，也就是延長(zhǎng)了對(duì)本屏信息的閱讀時(shí)間。第二，背景圖上不要蓋字，否則文字和圖像傳遞的信息都會(huì)受影響，傳遞效果會(huì)被削弱。

        六、總結(jié)

       商家都希望把自己的所有賣點(diǎn)全都講出來，期望買家對(duì)自己了解多一點(diǎn)。但實(shí)際上，大部分內(nèi)容得不到用戶的認(rèn)真對(duì)待，所以并沒有多少用戶真正看完你的這些表述，一點(diǎn)一劃、匆匆一瞥就已完結(jié)。

      一個(gè)被忽視的邏輯：你和買家之間的有效溝通信息量，并不在于你表達(dá)了多少，而在于用戶看到多少、接收到多少、理解了多少。所以，手機(jī)上的內(nèi)容，不僅要讓用戶一眼看得見，而且要馬上能看懂，在看見內(nèi)容(包括文字、圖片)的瞬間，就能理解你想表達(dá)的意思。