需求之頁面設計及布局

2021-09-11 21:57:32 字數 1229 閱讀 7855

(一)首頁

可以分為主要功能入口、主要資訊推薦;

1、首頁設計要求:依據崗位和頻度定首頁

崗位不同,呈現的資訊不同;

崗位不同,入口不同;

首頁應包含高頻功能;

高頻功能應往前放;

(二)定位頁

定位頁:通過和使用者的互動錄入一些資訊,然後定位到工作的頁面。

定位頁的作用是快速找到具體的工作頁,系統應該有快捷入口,而不是每次都要返回首頁重新找功能入口。

注意事項:多入口找工作頁,便捷入口找工作頁。

(三)工作頁

工作頁:完成一項功能的工作頁面,使用者一般在這個頁面停留很長時間,像購物的具體頁面、地圖導航頁面等,例如京東的具體商品頁面。

1、設計工作頁注意事項

設計工作頁時要充分考慮使用者需求,工作頁要設定一鍵返回功能;

思考使用者做這件事的同時還可能看什麼?可以設定快捷入口,看到所需資訊;

做完這件事還可能看什麼?設定推薦功能入口。

常見的頁面布局有三種:上下布局、左右布局、t字布局。

(一)上下布局

1、bs、cs系統、軟體首頁;2、層級關係較簡單或僅有一級選單的系統;3、網頁中的布局;

上下布局多用於展示類的頁面,上部分是logo和系統名稱(以及選單),下部分是展示(操作)內部,層級關係簡單。

例如:360桌面端操作頁面

(二)左右布局

左右布局常用於各行業管理系統、部分cs系統\軟體。這種布局模式的優點是左右功能分割槽非常清楚,選單在左側,操作或展示內容在右側。

(三)t字布局

t字布局常用於多種管理系統頁面、適用多層級選單系統、部分bs系統\軟體、網頁子頁面中。

它的主要特點:有的系統在top區域有一級選單,有的系統top位置無選單;左側區域多為樹形選單;右側是操作(展示)區域。t字布局是最傳統的系統布局模式,也是大家日常工作中接觸最多的布局模式。

頁面布局之動畫及外掛程式

transition 過渡,緩動 div div hover style div body 過渡形式 動畫延遲時間 單位 ms s transform div div hover style div body 瀏覽器 chrome webkit blink webkit safari webkit ...

頁面布局之flex布局

flex布局 flex布局也叫作彈性盒子布局,可以簡便 完整 響應式的實現各種頁面布局,同時也支援所有的瀏覽器。父級元素設定css樣式為 display flex。內容的位置用justify content來控制,常用的屬性有 space between space around center le...

頁面布局 公司頁面設計常見的布局手法盤點,經驗種草

頁面的展示方式直接影響客戶使用 的操作,合理的頁面布局會使使用者立即發現 的重點內容和服務。倘若網頁布局不合理,客戶不知道怎樣獲得所需資訊,那麼就會選擇離開這個 甚至以後也很少訪問這個 網頁布局的基本原則是既要表現 的核心,又要兼顧使用者瀏覽的行為,下面是關於公司頁面設計常見的布局手法盤點。好的內容...