他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

PC端表單設計的研究:如何設計一個優秀的表單頁面

2018-5-11    藍藍設計的小編

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

本文轉自今日頭條的人人都是產品經理,致敬。

最近身邊的一些小伙伴,總會遇見B端設計工作,對于這種偏后臺設計的B端設計,總會有大量的表單設計需要做,結合以前自己也有過不少表單設計的工作,在這里給大家分享一下自己對于PC端表單設計的研究,聊一聊表單在PC端中的運用。

PC端表單設計的研究:如何設計一個優秀的表單頁面

表單的作用

商業離不開數據,而數據總會依賴不同的表現形式,不管是word文檔,還是數據可視化,都是瀏覽者通過表現形式來對數據進行閱讀和分析,因此表單的設計就是一種表現形式,我們將捋一捋如何通過表單更好的讓用戶閱讀順暢、操作方便、總而言之就是更好用啦。

表單信息的分割方式

無線分割:顧名思義,列表的信息之間正常情況下沒有分割線等方法來分隔,僅僅是用間距來分隔開內容。好處是元素更少,畫面更簡潔,但是視覺可能就沒那么清晰了,使用的出場率一般。

PC端表單設計的研究:如何設計一個優秀的表單頁面PC端表單設計的研究:如何設計一個優秀的表單頁面

有線分割:同樣字面意思,就是通過簡單的分割線來分割列表中的信息,讓視線左右移動的時候更加穩定、輕松,在表單設計中使用的出場率非常高。

PC端表單設計的研究:如何設計一個優秀的表單頁面PC端表單設計的研究:如何設計一個優秀的表單頁面

斑馬線:通過深淺交替的色塊,以及色塊產生的對比來分隔列表中的信息,深淺深淺的循環就好像斑馬線,使用時是通過色塊產生對比,所以也可以使用帶有適量飽和度的色塊來區分,占頁面面積比例較大,適當用色可以使得畫面更加活潑、豐滿,斑馬線也是出場率極高的一種展現形式。

PC端表單設計的研究:如何設計一個優秀的表單頁面

斑馬線+分割線:很容易理解,就是斑馬線風格+分割線的結合,用色塊區分的同時又加了分割線,信息之間的區分對比更加強烈,但是畫面層級就多了一些,沒有其他的看起來簡潔,使用出場率也一般。

PC端表單設計的研究:如何設計一個優秀的表單頁面

卡片式:跟卡片式風格其他設計一樣,分別用懸浮的色塊來區分,間隔的地方是背景色,分隔的力度比較強,內容區分的很清晰,弊端是更加占畫面的位置,尤其在信息很多列的時候,會增加大量的高度,用戶需要更多時間進行下翻的操作。使用出場率相對其他形式來說稍低。

PC端表單設計的研究:如何設計一個優秀的表單頁面

可控制頁面顯示數量

場景:用戶需要閱讀大量的表單數據,且需要頻繁的翻頁、跳轉。

如圖,左下角可以設置界面中每頁顯示信息數量的多少,用戶可以根據自己的需要自由設置,當瀏覽的數據較多的時候,不再需要頻繁點擊下一頁來瀏覽信息,只需把每頁顯示的數量調高,如此便減少了大量的操作次數。

PC端表單設計的研究:如何設計一個優秀的表單頁面

像這樣允許用戶可以自由編輯來改進體驗的方式還有很多,比如可以設置顯示密度,就是以一樣的方式自由調整信息與分割線的間距。除了行間距,有的可以自由設置每一列的列間距,用戶可以根據自己的習慣來設置。

列表+可視化

場景:用戶需要瀏覽大量的數據,并需要對數據反復進行計算、分析。

在使用大量的文字列表展示數據的同時,使用數據可視化加以配合,用戶可以更好的預覽到數據的大致情況,又可以在列表表單中閱讀到詳細的數據。

PC端表單設計的研究:如何設計一個優秀的表單頁面PC端表單設計的研究:如何設計一個優秀的表單頁面

根據條件排序

場景:用戶想根據某種條件的大小排序,來先后閱讀數據。

通過點擊第一排小標題行,可以選擇不同的方式調整信息的排序方式,就和電商商品排序一樣,可以選擇金額高到低或者低到高排序,也可以選擇別的方式進行排序,從而更快找到自己所需要的內容。

PC端表單設計的研究:如何設計一個優秀的表單頁面

篩選過濾

場景:從一大堆混雜的數據當中,尋找符合條件的自己所需要的數據。

添加篩選功能,過濾掉自己不想瀏覽的內容,通過條件篩選,更快的更的找到自己想要的內容、縮小查找范圍、減少達到目的所花的時間。一般通過下拉按鈕的形式選擇不同的條件來進行篩選過濾。

PC端表單設計的研究:如何設計一個優秀的表單頁面

關鍵字搜索

場景:已知列表中某信息的名稱關鍵字,想從大量混雜的列表中快速找到。

跟篩選過濾一樣,添加關鍵字搜索功能,用戶提供部分關鍵字,可通過關鍵字查詢,最快最的找到想要的那一條內容。一般該目標內容是用戶已知的,有時候是針對性的。

PC端表單設計的研究:如何設計一個優秀的表單頁面

懸停展現操作

場景:精簡設計風格的界面,不想界面中內容過于繁多。

如圖,鼠標懸停在哪一行,哪一行才會顯示該列表后面的操作按鈕,好處是減少了視覺干擾,能更快的找到捕捉到操作位置,弊端是用戶不進行交互的時候無法發現操作按鈕如何出現。

PC端表單設計的研究:如何設計一個優秀的表單頁面

可展開列表

場景:想快速獲取列表中某信息的其他附屬內容。

如圖,點擊某一行后,展現該行的一些附屬信息??梢圆挥锰D頁面而進一步了解該行信息的詳情。

PC端表單設計的研究:如何設計一個優秀的表單頁面

可編輯列表

場景:在瀏覽列表的同時,需要頻繁的對列表中的信息進行編輯。

用戶可以直接對列表信息進行修改、編輯,省去了跳轉再編輯的麻煩步驟,更節約時間,用戶操作起來更加方便。

PC端表單設計的研究:如何設計一個優秀的表單頁面

快速預覽

場景:需要充分了解列表中不同信息的詳細說明,頻繁跳轉又過于麻煩。

和可展開列表的作用類似,但是可展開列表顯示的內容有限,快速預覽的功能可以用側彈框的方式、彈出對話窗口的方式、以及其他方式對選中的內容直接展示詳細信息。用戶不需要跳轉至詳情頁就可以了解到大量信息,省去繁瑣的交互流程。不再需要頻繁的跳轉到詳情-返回-跳轉到另一個詳情-返回-跳轉-返回。使用快速預覽的功能就可以很好的解決這一問題。

(PS:彈出對話窗口的方式,可以同時彈出好幾項列表的詳情信息進行對比,但是側彈框因為高度優勢,可以展現更多內容)

PC端表單設計的研究:如何設計一個優秀的表單頁面PC端表單設計的研究:如何設計一個優秀的表單頁面

自定義列

場景:列表中每條內容顯示信息參數過多,且很多不想瀏覽。

自定義列表功能是用戶可以自由設置每行信息參數的內容,比如我不想列表中顯示金額這一項,就可以刪除,想要的時候可以添加回來,這樣用戶可以保留自己想要的那幾項內容,可以更快更方便的閱讀到自己關心的那幾項參數,節省了用戶的有效時間。

固定頭部

場景:列表橫向或者縱向過多,下翻或橫拉的時候標題頭被隱藏,不知道自己當前瀏覽到的參數屬于哪一項。

交互過程中,可以把第一排重要的東西固定,列表內容翻動的同時,第一排仍然在原位不移動而且覆蓋列表中的其他信息,很多自帶的框架都是這樣的形式,使用的出場率也是非常高,這樣用戶可以隨時查看到自己看到的內容是屬于哪一項屬性,或者是屬于哪一條信息,可以是橫向固定,也可以固定豎直的第一排標題,也可以固定最后一塊操作點擊區域,具體如何固定、是否固定,根據整體的需求來選擇。

間距的規則

通常表單都是大量的文字,大多數的文字高度都在該行高度的三分之一左右。過于緊密用戶瀏覽不順暢,過于分開顯得畫面過于松散,不同的分割方式,間距也會有所不同。

總結

其實上面的每一條都是一個小總結,每一條在大部分的列表中都可以用到,主要還是根據實際需求來運用這幾點,比如分割的方式根據主體風格來搭配,不要為了設計而設計盲目運用,畢竟設計都是以內容為主,尤其是表單設計,本身就是更好的表達內容。

藍藍設計m.ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://m.ssll180.com

存檔