最新消息:文章中包含代码时,请遵守代码高亮规范!

PC-WEB设计规范总结【原创】

UI设计 Shirley 1714浏览 0评论

WEBUI新人入门需要了解各个方面的知识,设计规范便是其中重要的一环,通过遵循规范来入门,再从打破规范来提升。

20150112133353_89786.jpg

 

1、电脑屏幕与分辨率

我们常见的电脑屏幕有:液晶显示屏,笔记本,老式的台式机,等等,这些常见的电脑屏幕分辨率有:1280*1024、1024*768、1440*900、1366*768、1920*1080等等

为了适用于大部分电脑屏幕的分辨率,以及各大浏览器的界面布局,和人体的视线扩散区域,通常情况下我们设计网页的主体内容的宽度在990~1200(px)之间,这样不仅适用于大部分屏幕大小,而且有利于人的浏览阅读!高度的话一般不做具体限制,最低高度建议控制在1080这个样子,这样主要是为了在大屏幕上网页底部不至于出现不合时宜的留白!

 

2、字体字号:网页正文的字号一般为12px,标题可用14px;设计稿一般用微软雅黑(效果:平滑)或者宋体(效果:无);同一网页内避免出现过多字体以及文字的颜色也需要做到尽量统一,除了具有特殊功能的文字(比如说链接入口文字)以及模块内容的标题;特殊文字需特殊对待,例如:logo

1

3、网页设计模块构成:①网页头部(header)②广告位(banner)③内容区(content)④底部(foot)

官网v2

头部header里包含导航nav,在设计一个普通的网页时,主要包含这些元素,构成一个网页的基本框架。

但是要注意的是,每个部分的设计方式有多重多样,不同的设计会给你的网站带来不同的味道。作为新认设计师,我们可以多去看看别人的设计,思考别人的设计理念,多问自己问什么,为什么要这么设计,为什么用这样的配色,为什么用这样的宽度等等,这样会真正意义上理解这套规范,而不是把规范看成是设计的约束。

(本人自己总结,有不足的错误请大家指正,谢谢)

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/19103.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Shirley的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!