APP頁面佈局會直接影響APP的視覺效果,好的佈局方式往往會給用戶帶來舒適的視覺效果。但由於手機屏幕尺寸的限制,很多時候我們都無法將所有內容都在一屏內顯示,因此在APP界面設計中,我們就需要進行合理的頁面佈局把信息更好地展示給用戶。
APP常見的佈局方式有哪些?
一、常見的圖文佈局有哪些?
◇ 上圖下文
上圖下文主要強調圖片的重要性,再動人的文案還不如一張抓人眼球的圖片更有吸引力,一個具有商業化目的的產品對首頁版面效率是異常看重的,同樣對圖片質量的要求也是非常的高。
運用方式:
① 以「大圖+文」的上下方式來佈局時,一定要找到版面的平衡點,畢竟手機屏幕尺寸比較小,圖片太大會影響信息傳達和用戶瀏覽的過程。
② 宮格排列式的上圖下文能提升版面效率,此排列式更多地適用於電商平台,能達到提高轉化和流量的作用。但由於宮格排列式缺乏信息完整度,在佈局時需要考慮設備、極限值等帶來的問題。
◇ 左圖右文(右圖左文)
無論是左圖右文還是右圖左文,都應該做好圖和文的比例,圖片的選擇最好採用詳情頁中的圖片進行展示,避免浪費更多的人力和時間重新配圖,此外圖片和文字內容的搭配也是非常重要的。
運用方式:
① 方形縮略圖是最常用的形式,不會太窄或太寬,對右側信息的佈局會顯得更加游刃有餘;
② 橫形圖片雖然會使右側文字顯得空間壓縮,但卻非常適用於視頻APP,這對整個頁面的氛圍感會更好;
③ 豎形圖片會使右側信息有更多的發揮空間,但是如果右側信息過少,會使得頁面過於單調和不完整;
④ 右圖左文適合於資訊類和旅遊率產品中,按照人的瀏覽習慣,如果文字比圖片更重要,把圖片放到右邊會更加合適。
◇ 圖文混排
為了讓信息傳達更一致,且沒有大量文字信息干擾我們,則可選擇文字與圖片混排的佈局方式。
運用方式:
為了適應多變的圖片,文字底部加一層黑色半透明蒙層或一些無傷大雅的陰影。
二、常見的按鈕佈局有哪些?
按鈕使用的場景主要有:主線場景、支線場景以及異常場景,不同的場景使用的按鈕佈局也會有所不同:
◆ 主線場景
一般主線場景的按鈕都是放在頁面底部固定顯示,不會隨着內容滾動,主線場景按鈕主要分為兩種:通欄和非通欄按鈕。
通欄按鈕:適合可滾動的頁面容器,簡單來說就是內容較多在一個屏幕中無發顯示全部內容,按鈕的優先級會更高;
非通欄按鈕:這需要考慮頁面內容,如果頁面內容很長就需要在按鈕底部加上白色背景,盡量不要讓內容穿過按鈕,與通欄按鈕相比,非通欄置底按鈕的優先層級並沒有那麼高。
◆ 支線場景
支線場景按鈕一般分為:圖標、文字、圖標+文字、框+圖文字+圖標等。支線按鈕的使用場景較為複雜,一般需要通過參考上下文的情景來做不同樣式的選擇。但為了不打擾主線流程,盡量不要將支線流程的按鈕做得太過明顯。
◆ 異常場景
異常場景下的按鈕不需要做得特別醒目,一般採用幽靈按鈕或和背景相似的顏色,這種按鈕大多數是希望用戶點擊將頁面恢復狀態,並沒有很強烈的引導。
好的頁面設計離不開頁面佈局,而頁面佈局的好壞會直接影響頁面的美觀。以上是Inspirr Creation提供的APP常見頁面佈局方式,而這只是其中的一些佈局方式,如果你有更多更好的佈局方式,歡迎與我們分享!