五個案例簡述Web設計原則 通用一致

2021-09-20 00:24:11 字數 1448 閱讀 6873

《web設計指南》是專門為廣大web內容生態提供一套簡單實用的設計指南,目的是提公升設計與開發的效率及質量,為廣大使用者提供優質的使用者體驗。

通用一致原則

通用一致的設計,可以減少認知負擔帶來流暢體驗,也可以提公升設計及開發效率。 

搜尋場景下的web內容頁涵蓋生活各個方面,服務於大眾使用者,同時橫跨多種系統和不同尺寸的裝置,穩定直觀的體驗根基於通用一致的設計。根據一定的標準持續復用,才能讓使用者從陌生到熟悉,建立習慣與信任,這需要在介面布局,視覺風格、圖示寓意、功能文案,互動邏輯等方面的通用一致體驗。

通用一致的介面不僅方便於使用者,第三方開發者根據自身需求,參考基本設計原則和案例,採用通用的 ui 元件可以提公升開發效率,保證頁面效能與載入速度。

當然,通用一致並不是絕對的,絕對的統一會讓使用者感到重複乏味,有時我們需要特殊的樣式,給使用者有趣、生動,超出預期的愉悅體驗。這部分將在高階精緻以及智慧型快捷原則中講解。

設計案例 01

建議控制項採用扁平化風格,充分考慮通用性,類似或相同功能,採用同類互動及視覺樣式;通用一致的設計可以提公升設計質量和效率。 

設計案例 02

建議控制項的尺寸沿用4pt的倍數使用。例如按鈕,輸入框,圖示等控制項,沿用統一的節奏和規則,可以讓控制項更加通用,提公升設計和開發效率,減少對不同尺寸選擇的糾結與干擾。 

設計案例 03

建議通常採用通用樣式標題欄,盡可能避免自定義布局、高度和圖示樣式不一致的標題欄,而採用一致的標準,可以避免重複設計,給使用者穩定的體驗。 

設計案例 04

同一控制項可能應用多種場景,尺寸,也可能對應多種狀態。例如圖示的設計統一採用幾何化正檢視風格,根據需要可以靈活變化填充樣式,變化中保持形狀的統一,能減少使用者認知負擔,建立信任。 

設計案例 05

頁面布局採用柵格,能夠保證頁面版塊劃分沿用一定的規則,各模組通用一致。我們建議採用12列流式柵格,具體規則詳見基礎規範的柵格部分。 

感謝閱讀

乙個案例引發的思考

今天下午,團隊開了乙個簡短的版本總結會。會上測試經理分析了乙個案例 某子程式在轉測試後發現不能被平台排程,原因是子程式的排程入口跟不符合平台規範。很明顯開發在轉測試前沒有充分自驗證,測試經理提出,後續對跟平台對接的子程式轉測試必須要有將子程式接入平台跑通後的驗證報告和相關checklist,否則不予...

乙個案例的簡單總結

翻看去年處理的乙個案例,發現處理時間挺長的,而且這個案例也有點意思,就再看多兩眼,做個簡單總結。1.首先是應用伺服器效能不穩定,排查之後,伺服器是vm,要求加資源,並且所有資源都reserved.2.接著就是應用伺服器連線資料庫時很不穩定,資料庫經常報 recovery mode 好像是資料庫莫名被...

重構,開始第乙個案例

你會發現所謂設計不再是一切動作的前提,而是在整個開發過程中逐漸浮現出來的。martin flower 沒有銀彈,沒有放之四海而皆準的真理。重構和自動化測試時緊密聯絡的,沒有自動化測試,重構會步履維艱。重構 在不蓋被 外在行為的前提下,對 做出修改,以改進程式的內部結構。也就是在 寫好之後改進它的設計...