做設(shè)計(jì)的過程，是思大于行的過程。一個(gè)有價(jià)值的設(shè)計(jì)，不是設(shè)計(jì)多么華麗、多么創(chuàng)新就有多么成功，那些優(yōu)秀的設(shè)計(jì)師都會(huì)知道他為什么去做這樣一款設(shè)計(jì)，他的設(shè)計(jì)本質(zhì)價(jià)值是什么?；ヂ?lián)網(wǎng)產(chǎn)品或者手機(jī)產(chǎn)品更是如此，設(shè)計(jì)師要知道你的產(chǎn)品要解決一個(gè)什么核心問題，然后再提出一個(gè)足夠優(yōu)雅的解決方案，這樣才能解決用戶的“痛點(diǎn)”問題，給予用戶最貼心的設(shè)計(jì)。

在我剛開始做設(shè)計(jì)的時(shí)候，就很喜歡在一些細(xì)節(jié)之處增加復(fù)雜的動(dòng)畫效果，來彰顯設(shè)計(jì)的標(biāo)新立異，但是殊不知，每個(gè)動(dòng)畫都是有它的意義所在的，或者是減少操作的等待感，或者是讓過渡變得平滑圓潤，或者是提供有效的反饋，而我想增加的復(fù)雜動(dòng)畫，不過是為了設(shè)計(jì)而設(shè)計(jì)，這樣增加開發(fā)成本又沒有意義的設(shè)計(jì)，多半是被拍死在萌芽狀態(tài)的。

至于橫屏策略，我遭遇過設(shè)計(jì)上的bad case，在掌上百度Android版設(shè)計(jì)之初，完全沒有考慮到橫屏模式，首頁4×4的快捷入口，如果到橫屏模式只是簡單的拉伸適配的話，橫屏模式下的4×4導(dǎo)致了空間的浪費(fèi)，且快捷入口的收起按鈕已經(jīng)在屏幕之外了。工程師到開發(fā)階段，才來問我，于是最后江湖救急，橫屏模式下采用重拍而不是拉伸的策略，那么大概一行顯示6個(gè)，3行就顯示下了，不過由于快捷入口最多16個(gè)，第三行只能顯示4個(gè)了，總之就是玩了一次不對(duì)稱美，非常失敗。之后的每次設(shè)計(jì)，都會(huì)在以豎屏為主的情況下，預(yù)先設(shè)想橫屏方案，這里有一些經(jīng)驗(yàn)跟大家分享。

一、用戶切換到橫屏的動(dòng)機(jī)？

做這個(gè)設(shè)計(jì)之前，讓我們想搞清楚用戶的動(dòng)機(jī)。用戶為什么會(huì)翻轉(zhuǎn)手機(jī)？如果是一個(gè)正在輸入地址的用戶，他橫過屏幕，很可能是為了讓程序展現(xiàn)出更大的輸入空間，以便于更高效的完成輸入任務(wù)；如果是一個(gè)正在閱讀新聞的用戶，他橫過屏幕，很可能是為了在一屏內(nèi)看到更大的字體，或者更多的內(nèi)容，總之一定是為了讓閱讀體驗(yàn)變得更好；如果是一個(gè)正在玩游戲的用戶，他橫過屏幕，很可能是為了兩只手來協(xié)同操作游戲內(nèi)容，達(dá)到沉浸式游戲的使用狀態(tài)；如果是一個(gè)正在看視頻的用戶，他橫過屏幕，目的無非是以更符合比例的方式瀏覽視頻，在有限的屏幕內(nèi)看到更大的視頻現(xiàn)實(shí)區(qū)域；如果是一個(gè)正在進(jìn)行幻燈片瀏覽的用戶，他橫過屏幕，目的一定是看到更大畫幅的圖片，體驗(yàn)更加專注的圖片瀏覽模式；如果是一個(gè)正在錄音的用戶，那么他橫過屏幕（或者翻轉(zhuǎn)屏幕），很可能是為了離麥克風(fēng)更近一些，讓聲音被更清晰的錄制下來。不同的使用場景，用戶對(duì)橫屏模式的預(yù)期是有所差異的，如果你所提供的橫屏模式，不能在特定情況下給予用戶他所預(yù)期的體驗(yàn)，那么不如不要提供橫屏模式。
那么，總結(jié)起來就是：
1. 游戲類——沉浸式體驗(yàn)
2. 閱讀類——更大字體
3. 輸入類——更方便的輸入
4. 視頻類——更合適的比例
5. 圖片類——更大的畫幅
6. 語音類——離麥克風(fēng)更近

可以發(fā)現(xiàn)，用戶在不同的使用情景、不同的應(yīng)用類型下，對(duì)橫屏的預(yù)期還是有所不同的，但是顯而易見的是，橫屏模式大部分情況要么是為了彌補(bǔ)豎屏的不足——字體小、鍵盤小、畫幅比例不合適，要么是用戶希望橫屏模式下能提供更華麗更花哨的感官體驗(yàn)，總之從豎屏到橫屏的征途，并非那么易如翻掌的。

二、各個(gè)平臺(tái)的橫屏差異？

1.IOS

拉伸適配：

• 工具欄和導(dǎo)航欄會(huì)被壓扁
• 操作圖標(biāo)會(huì)被縮小
• 列表項(xiàng)可顯示更多文字
• 地址欄控件自動(dòng)隱藏
• 輸入法鍵盤和表單輔助按鈕壓扁

2.Android

首屏界面：

• 信息重新組織
• 工具欄移動(dòng)到屏幕右側(cè)

啟動(dòng)界面（Dashboard）

一個(gè)簡單介紹應(yīng)用程序的界面，顯示主要功能和內(nèi)容更新（A quick intro to an app, revealing capabilities and proactively highlighting new content）

• Action bar簡單拉伸適配
• 快捷入口簡單重排
• 次要內(nèi)容布局轉(zhuǎn)移

3.S60v3

布局重排：

• 系統(tǒng)狀態(tài)信息欄拆分成兩行，居屏幕上下
• 切換到橫屏模式后，由于實(shí)體按鍵在屏幕右側(cè)，所有跟實(shí)體按鍵相關(guān)的操作要遷移的屏幕右側(cè)，產(chǎn)生對(duì)應(yīng)關(guān)系
• 次要信息由頁面頂端遷移到底端
• 如果是工具類應(yīng)用，界面可以變成左右布局

4.S60v5

簡單重排：

• V5的屏幕比較細(xì)長，橫屏模式下的縱向空間顯得格外寶貴，一般要重新設(shè)計(jì)
• 帶側(cè)滑鍵盤的機(jī)型，和不帶側(cè)滑鍵盤的v5機(jī)型，在橫屏策略上稍有不同
• 帶側(cè)滑鍵盤機(jī)型，展開側(cè)滑鍵盤，工具欄還在屏幕下方
• 不帶側(cè)滑鍵盤的機(jī)型，橫屏模式下，工具欄應(yīng)該放在屏幕右側(cè)

三、一些基本的策略

1.游戲類的

• 游戲類的，如果是橫屏模式下用戶的游戲體驗(yàn)最好，不妨在游戲啟動(dòng)時(shí)，就直接切換到橫屏。
• 強(qiáng)制橫屏，不需要tips提醒用戶，只要用橫向的啟動(dòng)畫面引導(dǎo)
• 當(dāng)用戶看到Splash是橫向的時(shí)候，自然會(huì)知道要把屏幕翻轉(zhuǎn)了
• 如果默認(rèn)橫屏的話，最好把有實(shí)體按鍵的那一邊放在右手側(cè)，這樣方便用戶用它熟悉的那只手進(jìn)行操作

2.視頻類的

• 視頻類的，可以當(dāng)用戶在點(diǎn)播放之后，以一個(gè)合適的引導(dǎo)動(dòng)畫效果，切換到橫屏模式
• 當(dāng)然如果用戶已經(jīng)鎖定為不要旋轉(zhuǎn)屏幕了，還是不要強(qiáng)制橫屏的好
• 橫屏模式下，如果是為了幫助用戶關(guān)注到內(nèi)容本身的應(yīng)用，是可以把導(dǎo)航欄和工具欄設(shè)置為透明的，或者讓導(dǎo)航欄和工具欄可以自動(dòng)隱藏
• 當(dāng)然，如果用戶需要的時(shí)候，單擊一下空白處，又可以以喚起操作欄

3.圖片類的

• 圖片類的，如果是那種相冊集，可以明確的知道橫屏模式是最適合瀏覽的
• 那么可以在進(jìn)入幻燈片模式之后，自動(dòng)切換到橫屏，可以默認(rèn)全屏，只給出關(guān)鍵的操作圖標(biāo)
• 小部分用戶視圖翻轉(zhuǎn)屏幕，切換回豎屏模式，這部分用戶，我們應(yīng)該給他提供一個(gè)鎖屏功能

4.閱讀類的

• 閱讀類的，用戶需要看到更大的字體，盡可能的提升閱讀體驗(yàn)
• 為了把干擾降到最低，導(dǎo)航欄和工具欄是可以自動(dòng)隱藏的，當(dāng)用戶需要的時(shí)候，再次輕觸屏幕喚起導(dǎo)航欄和工具欄
• 盡量不要蠻橫的遮住系統(tǒng)的狀態(tài)欄，如果一定要全屏模式，可以在自己的界面內(nèi)部給出系統(tǒng)狀態(tài)——電量、信號(hào)和時(shí)間

5.工具類的

• 可以有自己獨(dú)立的UI界面，橫屏沿用豎屏的設(shè)計(jì)風(fēng)格，只是布局進(jìn)行調(diào)整
• 注意結(jié)構(gòu)的可識(shí)別性，橫屏的結(jié)構(gòu)要有利于雙手操作，豎屏有利于單手操作

6.其他類的

• 必要的時(shí)候，可以重新設(shè)計(jì)
• 但要注意，最好避免重新載入內(nèi)容，因?yàn)槟菢訒?huì)讓你的橫屏切換效率降低

四、設(shè)計(jì)策略

1. 手機(jī)產(chǎn)品跨平臺(tái)橫屏模式設(shè)計(jì)原則

• 無論什么方向，都保持對(duì)主任務(wù)的關(guān)注
• 注意你的動(dòng)畫效果
• 有時(shí)候需要重新設(shè)計(jì)
• 從豎屏開始
• 導(dǎo)航欄和工具欄會(huì)被壓扁
• 四面兼顧
• 要做就要做全
• 別丟了之前的位置

2.平板產(chǎn)品跨平臺(tái)橫屏模式設(shè)計(jì)原則

• 要在所有方向下都能運(yùn)行，盡力滿足用戶需求
• 考慮改變展示輔助信息和功能的方式
• 避免隨意改變布局
• 如果可能的話，應(yīng)該盡量避免重組信息，重排文字
• 為每一種方向提供獨(dú)特的啟動(dòng)圖片

老外把豎屏模式叫做肖像模式，橫屏模式叫做風(fēng)景模式，雖然肖像模式和風(fēng)景模式在布局上略有差異，但是界面的聚焦點(diǎn)一定是在用戶關(guān)注的功能和流程上，elya關(guān)于橫屏策略這些粗淺的研究僅供拋磚引玉之用，希望對(duì)你能有所幫助。

源地址：http://elya.cc/mobile/955.html