提交需求
賽事與廣告咨詢合作,請?zhí)顚懶枨蟊韱?,我們會在第一時間與您聯(lián)系!
在設(shè)計B端項目時,我通常會選擇1440像素的尺寸作為設(shè)計稿的基礎(chǔ)。當(dāng)頁面內(nèi)容不夠豐富時,窄尺寸的屏幕往往能呈現(xiàn)出較好的視覺效果,但當(dāng)屏幕尺寸擴展到1920像素寬時,問題便接踵而至。我經(jīng)常遇到兩種情況:一是內(nèi)容較少,導(dǎo)致在1920像素的屏幕上顯得不夠飽滿,自適應(yīng)布局后元素比例失調(diào);二是單行(列)文本段落內(nèi)容較多,自適應(yīng)后文本寬度過大,嚴(yán)重影響了可讀性。
例如,下面這個設(shè)計稿在1440像素的屏幕上效果是這樣的:
而在1920像素的屏幕上,效果變成了這樣:
如果采用固定寬度的內(nèi)容布局,在1920像素的屏幕上,左右兩側(cè)會留有過多空白;而完全采用自適應(yīng)布局,則在1920像素的屏幕上文本寬度過寬,影響了內(nèi)容的閱讀效率,有時卡片的比例和舒適度也會大打折扣(上圖1920像素的內(nèi)容其實還可以接受)。
這個問題經(jīng)常讓我感到困擾,讓我糾結(jié)于如何做出最佳的設(shè)計決策。我個人傾向于采取一種折中的策略,既不完全固定也不完全自適應(yīng),而是給內(nèi)容寬度設(shè)定一個范圍區(qū)間。比如上述頁面,我將內(nèi)容寬度范圍設(shè)定為960到1360像素,即在寬屏下最寬拉伸到1360像素后寬度固定。這樣在1920像素的屏幕上效果如下:
在16寸MacBook Pro,1792像素寬的屏幕上效果如下:
即使采用了折中的策略,在1920像素的屏幕上左右兩側(cè)可能仍會顯得有些空曠。如果你的注意力總是集中在那,那么勢必會覺得不舒服。但真實用戶通常會聚焦于內(nèi)容區(qū),不會被兩側(cè)的空白所吸引。因此,在做出設(shè)計決策時,我更傾向于這種折中的方案。(設(shè)計驗收方通常會將注意力放在留白處,經(jīng)常出現(xiàn)更“重”設(shè)計而輕體驗的情況)
當(dāng)然,并不是所有頁面都不適合采用完全自適應(yīng)的方式,還是要根據(jù)實際內(nèi)容來決定。例如,下面這種多列內(nèi)容的頁面就更適合完全自適應(yīng)的方案:
在設(shè)計過程中,找到最適合內(nèi)容展示和用戶閱讀習(xí)慣的平衡點是關(guān)鍵。通過不斷試驗和調(diào)整,我們可以創(chuàng)造出既美觀又實用的界面設(shè)計。
Powered by Froala Editor
大牛,別默默的看了,快登錄幫我點評一下吧!:)
登錄 立即注冊