网页设计中上居中 第1篇
一般网站内容显示的区域为996px;国内网站大部分还是以1000个像素为界限,因超过1000像素适合在大屏幕上浏览,小屏幕会显得拥挤。所以网站宽度在1000像素以内可以保证大部分客户舒适的浏览网页。
字体设计的总准则是:可辨识性和易读性。
网页的中文字设计是系统默认的字体:宋体、微软黑体、苹果系统黑体
英文则建议使用Times New Roamn、Arial、Comis Sans MS等无衬线字体
网页设计中上居中 第2篇
网上搜索结果最热的960 gird栅格系统从2009年就开始正式推出,但至今,依然有很多设计师在使用,除了考虑到显示设施的分辨率,还依赖于960 gird的灵活性。所以,对于新晋web ui来说,采用960 grid 依然是最佳的方案,不会出彩但也不会出错。假如是考虑到宽屏的设计(需要舍弃一部分分辨率不高的客户),可以把栅格化系统的宽度建为980甚至以上。但没有栅格化设计经验的设计师需要注意,这里说的960是含边距部分,换句话说,在psd文档中,你的内容部分是950px,栅格化版面可以借助少量非常好用的在线工具,比方知名的,这是12列栅格在内容宽度950下的三种版式规范,你也可以使用24列,灵活度更高。
Grid-Guide自动生成的栅格系统(宽950-12列)
从图中可以看出,这三种方案列宽column width和间距gutter不同,剩下的工作对于ui设计师来说就简单了很多,你可以把版式规范的png格式下载下来,作为你网页设计的基础版块,在此基础上进行列的划分。或者者只是以这个参数为基础,重新建立参考线(我更推荐这种方式,尤其photoshop cc2017的新建参考线版面,装订线对应Gutter,列宽对应column width)。我简单的拿版式规范做了个页面设计示用意,这就是基于栅格系统设计的优点,在划分列时,有理可依,有据可循。
【基于960grid系统的版块划分示意】
当然,既然是设计师,即可以感性的元素再多少量。比方,你希望更多的留白,即可以采用间距值较大的栅格版式,只需整个网站保持一个统一的版式就可。下图是当内容宽度为1200时生成的栅格系统,你还可以尝试很多方案,但Max Width的设定并不是那么随便,这个取决于网站的定位。
Grid-Guide自动生成的宽1180的栅格系统(24列)
至于高度和垂直间距,栅格化系统并没有统一的原则,设计师可以采用少量黄金分割之类满满的都是设计感之类的值,或者者垂直间距与栅格系统的间距相同或者是整倍,总之,也需要一个规范指导全站设计。
栅格系统的参数根据项目的实际情况,尽量建立10的倍数或者8的倍数(google material design推荐)。
网页设计中上居中 第3篇
使用普通的图片格式。为了帮你做出决策,我画了下面这张图:
看看苹果公司怎么费力地将复选标记放入矩形内,以及将矩形放到文本标签旁:
然而他们还是失败了!
没有什么比对齐两个矩形更容易的了。没有什么比尝试对齐被任意数量空白包围的文本更困难的了。
这是一场我们赢不了的游戏。
我们能做些什么:视觉补偿
作为开发人员,我们只能通过数学的方法实现矩形的完美对齐。因此,对于任何需要手动补偿的内容,可以将其放置在一个足够大的矩形中,并在其中实现图标视觉效果的平衡:
我们能做些什么:所有人
请一定注意。请务必小心。糟糕的居中可能毁掉原本不错的 UI:
但恰当的文本对齐可以让你的 UI 美妙如歌:
即使这很难。即使没有便捷的工具。即使你不得不搜寻解决方案。我相信,只要我们齐心协力,就能找到把一个矩形套在另一个矩形里而又不会把它弄乱的方法。
就我个人而言,我希望生活在一个 UI 美丽而平衡的世界里。我相信你也是。最终,一切都是值得的。
网页设计中上居中 第4篇
对于能否采用栅格化设计,采用下面几个案例说明一下:
(企业站之类-以详情几种单一产品为主)
(功能型网站)
(不拘泥形式的设计形式)
针对这三个具备代表性的案例,栅格化设计是没有必要的。理由很简单,栅格的优点也是缺点,规范意味着统一也意味着限制,在以上的案例中,无需用栅格来限制设计师的灵感,毕竟这个社会,还是需要设计感的。
但绝大多数情况下,推荐栅格化设计。尤其是图文混排、版块很多的网站,栅格化设计会让内容杂乱无章的页面呈现清新感。
关于栅格化布局,方案非常多,来看下面几个案例,我们都称之为栅格化设计。
(广义的栅格化系统-无间距的单元格)
(广义的栅格化系统-有间距的单元格)
(广义的栅格化系统-有间距的单元格)
对于不需要考虑页面响应(换句话说,和框架无关)的网页设计,准则可以简化成一句话:“由设计师自由决定”。
网页设计中上居中 第5篇
强调栅格化设计(grid-design)和栅格化布局(css grid)分开形容,是个人了解这完全属于两个不同的工作,前者针对网页设计师,然后者针对前台开发人员。栅格化设计是不需考虑页面的响应的基于栅格系统的设计,主要是为了提高网页的规范性。对于少量中规中矩的网站,或者者说一般创意型的网站,栅格化设计还是非常推荐的,尤其是少量规模大周期长,后期需要不断迭代的项目,栅格化设计让网页呈现出专业可信赖感,并有助于后期的维护。而栅格化布局,特指前台攻城狮使用的css框架,来实现页面的响应式布局。
响应式设计只是网页设计的一个折中方案,依赖于项目实际情况进行选择。对于设计师来说,假如没有必需的要求,可选择广义的栅格系统,并在此基础上自由发挥创意。
网页设计中上居中 第6篇
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu
工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search
滚动条:scroll
内容:content
标签页:tab
文章列表:list
提醒信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap
以上命名规范仅供参考
欢迎关注同名微信公众号:壹念视觉,微信号:YNSJCM001