亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

分享一個(gè)前段時(shí)間的設(shè)計(jì)需求，大體是要對一個(gè)高速路況監(jiān)控的系統(tǒng)做一個(gè)視覺提升，以提供更直觀、更易于理解的監(jiān)控體驗(yàn)。先來看下改版前后效果對比：

原稿界面

改版后效果

怎么樣？對氣質(zhì)這塊提升的可不是億點(diǎn)點(diǎn)。那么究竟是如何構(gòu)思的？來跟大家分享下設(shè)計(jì)經(jīng)驗(yàn)和思路。

第一步、定個(gè)設(shè)計(jì)方向

在開始設(shè)計(jì)前必須要明確設(shè)計(jì)方向，要不然就是無止盡的草稿、推翻......

本次設(shè)計(jì)的關(guān)鍵詞必然是和“高速”相關(guān)的，那么很好理解，我們從業(yè)務(wù)角度出發(fā)去發(fā)散思考。

分享一個(gè)我自己的方法論公式：衍生屬性>視覺表現(xiàn)>用戶感受，一般場景都可以用這套公式，帶給用戶真實(shí)的感受和體驗(yàn)。

如下圖，就用了這個(gè)方法分析：

根據(jù)上圖總結(jié)了幾個(gè)設(shè)計(jì)緯度： 

• 風(fēng)格定義：扁平化的，現(xiàn)代化的，工業(yè)的，偏科技風(fēng)的； 
• 顏色定義：藍(lán)色系，延用原版官方藍(lán)； 
• 字號定義：大字號標(biāo)題和數(shù)據(jù)；
• 用戶群體：青年到中年的管控專員，24小時(shí)制。（從客戶了解到）

第二步、優(yōu)化頁面布局

減少頁面視覺層級，弱化信息的復(fù)雜結(jié)構(gòu)，調(diào)整視覺重心。

原稿頁面：看起來有4層結(jié)構(gòu)，我們都知道視線的聚焦主次是：圖片 > 彩色 > 深色 > 淺色；所以視覺會過多的停留頂部系統(tǒng)欄上（下圖標(biāo)“1”區(qū)域）

這會形成觀感上、操作上的干擾，對于需要具備“嚴(yán)謹(jǐn)”條件的，在某些情況下可能是致命的！！

所以我們將內(nèi)容重新做了規(guī)劃，首先調(diào)整為左右布局，清晰層次；

然后在內(nèi)容區(qū)域中將頂部系統(tǒng)欄和導(dǎo)航數(shù)據(jù)內(nèi)容結(jié)合，再賦予配圖，就有了空間感和通透感，也順勢引導(dǎo)用戶的瀏覽順序，將視覺重心聚焦在內(nèi)容區(qū)域上（下圖標(biāo)“3”區(qū)域）。

第三步、頁面元素設(shè)計(jì)

1、我們對菜單欄，做了更多精細(xì)化的處理：

• 頂部將要素信息融合，選用硬邊字體和科技感背景元素設(shè)計(jì)。體現(xiàn)項(xiàng)目的嚴(yán)謹(jǐn)性和科技感；
• 傾斜的分割元素設(shè)計(jì)，營造速度感和靈動性；
• 菜單設(shè)計(jì)以簡潔為主，干凈利落，清晰表達(dá)功能邏輯即可；將更多的精力花在icon的設(shè)計(jì)上。

2、內(nèi)容區(qū)頭部設(shè)計(jì)：

結(jié)合路段圖、信號燈、路牌等隱性設(shè)計(jì)，營造場景體驗(yàn)。元素簡化，選用配圖，體現(xiàn)出一種很高級的空間感和通透質(zhì)感。

3、監(jiān)控卡片設(shè)計(jì)優(yōu)化：卡片交互設(shè)計(jì)，狀態(tài)和“忽略”操作邏輯優(yōu)化，更快一步觸達(dá)目標(biāo)。

4、最后再給大家展示下深色版效果：

如果有用，可以分享給好朋友一起看哦～

Powered by Froala Editor