豎屏設(shè)計(jì)怎么玩？佛掖！?

現(xiàn)在無線上網(wǎng)人數(shù)早就超過PC用戶，然而我經(jīng)常會在電商網(wǎng)站上看到一些并不太符合手機(jī)瀏覽習(xí)慣的設(shè)計(jì)涌庭，比如說信息密度過大芥被，想表達(dá)的內(nèi)容過多等問題。

對于這個問題坐榆，我還能說什么呢拴魄？

于是就有了今天這篇教程。

首先我們來看看席镀，PC用戶與手機(jī)用戶在使用行為上會有哪些變化匹中。

一、閱讀方式變了

以前PC時代豪诲，我們看網(wǎng)頁都是掃描著看顶捷，一個大頁面，眼睛掃到哪里就看哪里屎篱。

手機(jī)呢服赎，基本上就是跳躍著看，手指一邊拖一邊看交播。

這意味著視線停留時間更短重虑。

二、使用場景變了

我們使用PC的場景秦士，要么在辦公室缺厉，要么在家里，環(huán)境相對封閉隧土，時間更長提针，注意力相對集中。

使用手機(jī)就完全不一樣了次洼，時間和場景完全是碎片化的关贵。你可能在等車、吃飯卖毁、上廁所揖曾。。亥啦。任何一個場景下炭剪，拿出手機(jī)看一眼，或者刷上一個小時翔脱。完全是不可預(yù)計(jì)的奴拦。

（戶外使用手機(jī)要注意安全，社會上有很多壞人＝煊酢）

好了错妖，回到設(shè)計(jì)上绿鸣！

那這兩點(diǎn)改變給設(shè)計(jì)師帶來什么挑戰(zhàn)呢？

首先是頁面內(nèi)容需要精減再精減暂氯，因?yàn)橛脩艨赡苤粫咭谎勰愕膬?nèi)容潮模。

其次是內(nèi)容節(jié)奏要把握好，用戶不停的往下滑頁面痴施，就是希望可以看不到一樣的東西擎厢，因此你需要在視覺上給用戶不停的刺激，讓用戶停下來辣吃，仔細(xì)了解你的內(nèi)容动遭。

說這么多，還是來看看設(shè)計(jì)上到底怎么做吧神得！

這個很好理解厘惦，手機(jī)屏幕是豎的，縱向構(gòu)圖可以充分利用手機(jī)的屏幕面積循头，使得我們的設(shè)計(jì)主體足夠大绵估。我們來看看具體有哪些做法。

1卡骂、大敢裁切，重新構(gòu)圖

下面這張老虎形入，素材是橫向構(gòu)圖全跨，如果直接展示則會顯得重點(diǎn)不夠突出。我們可以大膽的裁切亿遂，將畫面主體放大浓若，使得老虎成為畫面的絕對主角。

老虎顯然更有氣勢了!

2蛇数、上下排版

我們看手機(jī)都是往下滑挪钓，橫向空間是固定的，縱向空間卻是可以無限延伸的耳舅，因此在有文案的情況下碌上，盡量將文案與圖片做上下排版，而不是左右排版浦徊。

文案更突出馏予，圖片的表現(xiàn)力也更強(qiáng)了。

3盔性、去掉左右留白霞丧，保留上下留白

由于手機(jī)是瘦長形的，因此橫向空間有限冕香。為了讓畫面主體更加飽滿蛹尝，我們需要讓主體盡量撐滿左右兩邊后豫。

這種展示雖然圖片信息比較完整，但是整體畫面顯得不夠飽滿突那。

正確的做法是讓畫面主體盡量占滿左右的屏幕空間硬贯，上下的位置可以用來留白。如圖所示：

去掉左右留白后陨收，商品圖顯得更飽滿饭豹，更吸引人了。

如果你是做電商設(shè)計(jì)的务漩，那可能你需要在素材的拍攝階段就考慮到手機(jī)縱向構(gòu)圖的特性拄衰，這樣后期在設(shè)計(jì)的時候就留有更多處理余地。

好了饵骨，縱向構(gòu)圖翘悉，是不是也沒有你想象中的簡單呢？

下面我們看第二招居触。

?前面我們說過妖混，手機(jī)用戶在瀏覽頁面時，停留時間更短轮洋。這就要求我們的頁面設(shè)計(jì)應(yīng)該更精簡制市，更聚焦。每一頁不應(yīng)該有太大的信息量弊予。

具體來說就是需要“大圖大字”祥楣，

來看看案例：

看到這里，有些同學(xué)可能要有疑問了：

如果我的頁面上文案就是多汉柒，而且不能刪減那要怎么辦误褪？

怎么辦？打不過運(yùn)營碾褂，那當(dāng)然只能享受咯兽间。

如果頁面上有段落文字，而且比較重要正塌，不能刪減嘀略，那就大大方方的展示，給用戶以良好的閱讀體驗(yàn)传货。

總之記住屎鳍，內(nèi)容太多反而會讓用戶視而不見。

這招主要是講手機(jī)端的內(nèi)容要精減和聚焦问裕，下一招其實(shí)還是講的這個逮壁。

在手機(jī)上，由于屏幕面積小粮宛，因此我們在給頁面信息劃最小單元的時候窥淆，以一屏為最小信息單元卖宠，是最適合手機(jī)閱讀的。

不僅是內(nèi)容上要一屏一單元忧饭，在排版方式上也盡量做到一屏一種排版扛伍，這樣用戶在閱讀時視線不需要過度跳躍。

我們還是來看例子：

我們把它改成一屏一個主題單元词裤，無論是信息傳達(dá)效率刺洒，還是視覺美觀度上，都有了大大的提升吼砂。

當(dāng)然逆航，我這里說的一屏一主題單元，并不是指每一屏都需要一張大圖來占領(lǐng)渔肩，而是說每一屏盡量是同一個信息模塊因俐。

再來看一個例子：

一屏一單元，可以使得用戶在閱讀和理解內(nèi)容方面周偎，壓力大大減小抹剩，因此也比較容易看得進(jìn)去。

總之呢蓉坎，手機(jī)端的設(shè)計(jì)的根本性原則就是：

給用戶的眼球減負(fù)澳眷，把視覺做輕，把內(nèi)容做輕袍嬉。

體會到要領(lǐng)沒有境蔼？

沒有拉上去再看一遍！

好了伺通，再來回顧一下今天講到關(guān)于豎屏設(shè)計(jì)的三大招：

1、縱向構(gòu)圖

2逢享、大圖大字

3罐监、一屏一單元

今天的內(nèi)容就到這！瞒爬！

看完就想走弓柱？

做作業(yè)！不做作業(yè)的學(xué)習(xí)等于沒學(xué)侧但！

-----------------------

好了矢空，學(xué)到干貨的同學(xué)請大方地點(diǎn)擊一下喜歡作者！禀横！

這樣下一期干貨來得更快屁药！