ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# 字体 ### PC端 1. 字体的要求也是蛮多的,都是数据,**一般去设计的时候标题的大小设置在偶数,20px、16px或者14px**,**注意不要设置成15px,尽量避免出现一些单数的值。** 2. 正文的大小也是**用户最小能接受的字体大小:12px**,这个就没必要设计得那么大。**英文的最小码可以设置到9px**(或者根据情况而定)这个大小的话也已经能看清楚。 3. 还有一个是使用什么样的字体,因为这个网站设计出来之后是要上线给别人浏览的,所以为了避免一些字体不能显示出来,所以采用的字体会要求采用系统自带的,像**中文的有微软雅黑、黑体、宋体这些,英文的有Tahoma、Arial、Verdana**。这些也是我们应该考虑的问题。有些图片里面的字体可以跟着设计的风格走,**还有些标题可以考虑好看一些的字体,因为前端可以采取切图模式。** ### 手机端 **标题字号:40-42px,用偏小的40px字号,会显得精致些。在内文展示中字号大小:大的正文字号32px,副文是26px,小字18-20px**。在内文的使用中,根据不同类型的App会有所区别。 1. 像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性,正文字号36px,会选择性的加粗。 2. 而列表形式、工具化的APP普遍是正文32px,不加粗。副文案26px,小字18-20px。 3. 26px的字号还会用于划分类别的提示文案,因为这样的文字希望用户阅读,但不要抢过主列表信息的引导。 4. 36px的字号还经常运用在页面的大按钮中。为了拉开按钮的层次,同时加强按钮引导性,选用了稍大号的字体,见下图中的退出按钮。 5. 在选用字体大小的时候一定要选择偶数的字号,因为在开发界面的时候,字号大小换算是要除以二的。常用字号的大小基本就这几个,根据版式设计需要也会采用异样大小的字号来特殊处理。这种更高的是要求设计师的全局把控能力。 ### 网页栅格 响应式 (Responsive Design) 先解释什么是网页栅格: 网页栅格就是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。简单的理解就是可以通过这些网页栅格去区分内容,将内容归类。它的计算是比较复杂的,我们这里大概的了解一下就行了。 ![](https://box.kancloud.cn/92021aad3b5a0c5a9f910cdf2bc9f68c_682x502.jpg) 上图中以980px为例子,将栅格分了两栏和三栏的时候他们之间的间距为10px。如果分成四栏,那又会有所不一样。 ![](https://box.kancloud.cn/7d412f28f69642a394345f5f547a0e73_597x457.jpg) 这是四栏的情况,而且也分成了两类,一类是二级页面,一类是三级页面,宽度分别为40px和30px。