做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

政務可視化設計經驗-頁面視覺-下

2020-11-30    周周



三、規劃頁面構圖

講到設計初期的頁面構圖規劃問題,其實這個構圖是服從你的展示方式的,即故事線。設計前期規劃階段,先想好打算怎么表達,再選擇對應的構圖方式。表達上我們講究總分主次關系 ,那么構圖上依舊遵循這個規則,先具體再抽象。


(一)全屏平鋪式

全屏平鋪式的構圖方式是最常見的一種構圖方式,如下圖無意中構成橫平豎直的輔助線將內容一格一格展現出來,界線清晰分割明確。因此模塊之內的內容就會顯得格外的清楚和突出,給人一目了然的感覺。注意哦,平鋪并不代表完全一個一個格子碼好,比如下圖中的深紅色區域,沒有被網格框住但也碼的很清楚,淺紅色區域中有一對一的也有一對二的對應關系,故此類型的構圖中加上這些靈活的變化就會顯得沒那么生硬。并且這種構圖方式是遵循F型網頁閱讀習慣的,因此重要內容放哪大家知道了吧~


(二)中心放射式

圓形就是一個典型的中心放射式,圓是有圓心的,通過構造不同大小的同心圓起到聚焦、凸顯作用。伴隨一個一個同心圓自然而然形成放射線,把重要表述放中間,其他表述按照放射線編排起來。引導用戶的視線聚集在我們重點突出的功能點上,先主后次,有起有落。


(三)視線引導式

視線引導式主要是依靠點線面的關系形成一條清晰的視覺引導線,引導用戶的視線,避免雜亂無章的堆砌。視線流動的軌跡多則是從上至下從左到右移動,故在大屏上從左到右,從主到次,減小用戶的負擔和閱讀疲勞。如下圖是我同事做的一張大屏,指標瑣碎,每個指標與指標間沒有太強的相關性。當時發現大方向上有一定的前后關系,故最后用這種方式把數據串起來。設計稿上需要把樣式給全,看上去有點碎,實際開發后效果還是蠻不錯。


(四)水平羅列式

水平羅列式的構圖方式有點像全屏平鋪式,同樣是利用人從左至右的閱讀習慣。如下圖,不一樣的是四個大類有明顯的前后關系,并且彼此之間存在對比。利用無形之中形成的水平線條把內容串在一起,將同級且對比的意思表達出來。


(五)三角排列式

三角排列式的構圖方式,核心思想就是一個穩!從上至下的三角構圖,能把信息層級羅列得更為規整和明確。這張大屏是我做的某地數字駕駛艙中的一個分頁,用來總覽這個分支的三個內容,每塊內容上面是政策解讀下面是數據結果,清晰明確。


四、營造頁面氛圍

頁面的氛圍個人主要認為是通過恰到好處的細節堆砌出來,這些細節要自然合適不突兀,講究一個“巧”字。對于我來說這些細節就好像歐亨利小說的結局一樣,意料之外又在情理之中。不過講道理這些氛圍的東西并沒有很明顯的一定之規,有些方法在這個場景下合適在那個場景下就不合適了,需要設計師在做的時候不斷嘗試,也是一個緣分。


抄現實是我們在設計中最直接的也是最常用的一種表達方式,它的含義就是提取現實中存在事物的點線面關系。因此往往在發散思維中找到與主題相關的靈感點后,用方式提取其中的內容后,能緊密的結合主題。它將抽象的主題通過實體表達出來,并以之作為內容信息的載體,能夠合適的存在于頁面之中。這個緯度的內容我直接舉幾個案例描述下。


(一)案例-公安項目中的細節

公安的項目是我同事做的,在用戶那邊得到了一致的好評,并且也是團隊前期重點研究的一個DEMO。這個項目好在業務邏輯清晰,并且在表達方式上做到合理合適的程度。如下是項目其中一張大屏的一處細節,需求是需要排列公安系統中處置人員的不同分布,在大屏中也是核心區域。


一般在頁面核心區域我們會花點心思將這塊的內容做充實做飽和,畢竟第一眼需要留下好印象。設計的時候提取了警徽的基礎形狀、警徽的構成、胸徽的線條排布、旌旗的基礎形狀、放射線的構圖方式,然后將文案排布形成設計結果。最后客戶這邊對于這塊內容直接過稿,認為設計環節帶出了警隊的特色,給了高度的評價。


(二)案例-駕駛艙項目中的細節

駕駛艙的項目是我直接參與主導的,當時這個項目的歡迎屏風格稿做了好幾版本的,用戶一直都不認可。過程中去除主觀因素,總結用戶對于駕駛艙的認知和理解。客戶的需求是駕駛艙需要在“駕駛”的時候,眼中不光有艙內的內涵,也要有艙外的風景。如下是歡迎屏的基礎狀態(交互操作并未展開),設計的時候提取了汽車儀表盤的基礎形狀和風格組成、星光點與點的關系、逆光山體風景的天空漸變,然后組合在一起形成設計結果。最后客戶這邊看到后過稿,這個設計也留到了項目最后。


(三)案例-大佬作品山海經中的細節

如下的作品是behance上一個大佬的作品,作品的名字叫做山海經,我們也是經常拿出來學習參考。在人物設定中,作者將古代的烏紗帽、官服、官徽紋樣等內容融入角色的道化服之中,并且角色周邊環境中大量融入一些官府的元素,比如官兵舉得牌子、衙門的建筑體等。整個作品雖然融入大量的古代元素,但是用賽博朋克的方式表達出來,成品沒有一絲違和感。確實給了大家一個方向,原來國風的東西可以這么玩。


總結

1.使用足夠并且容易區分層級的顏色去構造頁面。數據可視化的項目往往信息的量級是不可控的,準備工作需要做充分。

2.合適的字體能讓你的頁面事半功倍。挑選字體得對比,確保不同的使用場景下有一致性的顯示。條件允許下,針對自身業務場景打造對應的顯示字體(羨慕臉.jpg)

3.好的構圖可以讓表達更上一個臺階。根據故事線的講述,挑選對應的構圖方式,做到從總到分、有主有次。

4.氛圍彰顯作品的細膩程度。細節決定成敗,在作品中增添“巧”的細節,會讓觀賞者更加投入獲取信息的節奏中。



文章來源:tob.design        作者:王亮亮同學


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


日歷

鏈接

個人資料

藍藍設計的小編 http://91whvog3.cn

存檔