Pixso設計教程:2分钟教會你数据可视化網页設計

admin

網页UI設計區分于平面設計，網页UI設計具有自成一體的設計規范。網页UI設計是指软件的人机交互、操作逻辑、界面雅觀的总體設計。好的網页UI設計可讓全部網站的操作變得流利简略，完善的显現出全部網页想轉达给用户的信息。

那末咱們该若何規范網页設計呢？下面就随着Pixso一块儿設計出一個精彩的網球主题web数据界面吧！

網球活動信息web端数据页

在起頭設計以前，咱們起首来明白一下Web真個設計規范，可以帮忙你在設計路上明白本身每步應當做些甚麼。

图標規范

图標的設計雷同于Logo設計，在設計時都必要做好适當的減法，尽可能用简便的線条及色彩，連结图標的氣概一致，防止视觉上紊乱，比方图標的線条過于紊乱、邊角弧渡過大、图標的高度宽度比例独特、氣概不同一等。

尺寸規范

页面尺寸的巨细重要由显示器的辨别率和屏幕的巨细决议，显示器范畴的局限性對付網页設計来讲是页面最大的阻碍。分歧品牌的显示器，在設計進程都有着分歧的差别，分歧的研發团隊對付分歧显示器的設計方面也有着差别。最佳的解决方場中投注時間表,法就是利用一個可以自顺應屏幕設計的設計东西，如Pixso协同設計东西，页面尺寸自顺應的功效此時可以帮忙到你。

字體規范

字體是傳布網站信息至多的一個元素，字體設計的总原则是：可辨識性和易读性。網站的字體巨细并無硬性規范请求，可以按照現實利用環境来選擇，若是想護胃保健食品,使字體看起来富有条理性，可以扭轉字體色彩或加粗来表現。

图片尺寸

图片尺寸問题，必要排油片,全屏显示的图片，宽度尺寸严酷設計為1920px。可是必要注重的是，图片内容的有用范畴不克不及跨越網页内容的有用范畴，节制在1200px之内，以避免碰到小屏装备時显示不全，而造成视觉信息的漏掉。

以上就是網站設計規范，若是想看網页設計規范更周全的指南，還可以打開Pixso設計技能板块搜刮具體指南，下面咱們就要起頭設計網格信息web数据界面啦！

2.1 条形统计图

第一步，先用使画板构建出布景框。

用矩形东西中的直線画出線条，選擇右上角属性框圆角半径，图片里利用的弧度是15°，起首做出布景数据条，填充RGI数值239.243.254.100%色彩属性。

接着咱們可以起頭建造布景数据条上的数值条了。起首利用矩形东西画出線条，点击線性渐變，顶部色彩選擇RGI数值别离244.71.113，100%，落点色彩RGI数值输入253.41.181，100%，便可以获得图中這個粉色数据条了。

蓝色数据条的建造法子可反复上面步调，鼻炎藥膏,必要注重的是在設計時界面拼接的色彩不要過分跳跃。接着利用文本，输入数值，调解至符合的巨细，再填充RGI数值186.204.253.100%，這個条状统计图就建造完成為了。

2.2 统计排名数据图型

第一步，先用利用矩形东西构建出布景框，填凑数值RGI244.71.113，100%的布景色彩。

第二步，利用外形东西画出三個矩形，点击矩形，拖拽中間圆角，反复上一步调直到做出三個卵形，将它們翻轉拼接在一块儿。

因為是三個圆圈的交代，咱們必要用三個深浅纷歧的色彩来机關一個视觉上的条理感。起首最上面的這個卵形，可以看到它是透明的，以是咱們只必要添加描邊，描邊RGI255.255.255，30%選擇内部填充，必要注重的是，這里不要勾選線性渐變。

接下来咱治療頸椎病,們来做第二個雾蒙蒙的卵形，纯色填充RGI数值255.255.255，30%

最後是第三個椭圆的色彩填充，色彩RGI数值選擇255.113.147，100%。

到此處你必定會疑難，图案建造完成為了，那他們過剩延长出去的部門怎样辦？咱們只必要用鼠標将建造完成的全部图形框起来点击鼠標右键選擇组合，過剩的部門就主動暗藏了。

到這一步這個網球信息Web数据界面就建造完成為了，你也能够測驗考试打開Pixso起頭试着建造這個图表，讓咱們一块儿在設計中找到本身的快活吧！