浅谈网页表单设计中的细节与规范分享

海与Ta的孤独ok

海与Ta的孤独ok

2016-02-16 21:43

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享浅谈网页表单设计中的细节与规范分享,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

就我自己看到的而言,很多平台的表单页面都存在样式混乱的问题,也许是不关注,还未意识到。下面就我个人理解,对表单设计的经验做些分享,首先什么样的表单才能算的上是好的表单?这个得搞清楚。

先撇开交互和产品,若加上这两点,那有的说了。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

1. 能够清晰传递表单信息并使用户快速轻松完成

2. 对于整站而言,能够样式统一减少用户学习成本

3. 方便调整,与维护,具有较高的可持续性

表单是由各独控件按照需求逻辑组合而成,将每种独立控件严格定义样式,再通过统一的定位规则将其组合。

保证样式极高统一,便于开发维护和延展,提高用户可操作性,希望通过调整可提高表单的完成率,也就是最终目的。

样式中为了更加清楚的描述,下面会将表格的组成部分按照从属逻辑关系分为 F1、F2、F3。

F1 为整个表单部分;

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

F2 为整个表单中的一级分类;

F3 为表单中的独立模块(输入框,按钮、文字等)。

后面也可以以此方法与前端配合制作前端表单制作规范。

以下图表单为例:

浅谈网页表单设计中的细节与规范分享,PS教程,图老师教程网

F1 样式

1. 表单位置宽度得按照栅格严格执行,(30+10)*N (栅格规范事先确定,整站统一)

2. 表单页面根据表单宽度定表单位置

1000宽度,表格部分为25格,表单左侧留5格(包含左侧标签部分),右侧留3格 中间自适应 (如下图)

800宽度,表格部分为20格,表单左侧留4格(包含左侧标签部分),右侧留两格 ,中间自适应

浅谈网页表单设计中的细节与规范分享,PS教程,图老师教程网

F2 样式

1. 表单中的文字规范,字号 12px ,行高18px ,段高24px,(颜色等规范与整站的文字规范保持一致);

2. 单行高度为40px ,上下板块间距10px(视实际逻辑定);

3. 对齐方式为中对齐,间距10px;

4. 表单高度26px,长度按照实际需要,并按照栅格对齐,保证相同表单在不同页面保持一致;

5. 输入框中提示文字 12px 宋体/Arial, #888;

6. 图标需使用图标库中字体图标,若需要特殊图标,需要独立制作加入字体图标中(制作完成需内部讨论决定);

浅谈网页表单设计中的细节与规范分享,PS教程,图老师教程网

F3 样式

1. 输入框,单行高度为40px ,为输入框框高26px加上下间距7px,26+7+7=40;

2. 单行文字,单行高度为40px,为文字行高18px加上上下间距11px,18+11+11=40;

多行文字(两行) ,高度为58px,为两行字高加上上下间距11px,18*2+11+11=58;

多段文字(两段,每段两行),高度为四行字高18*4加上段高6px加上上下间距各11px,18*4+11+11+6=100;

以此类推

3. 按钮,单行高度为40px,为按钮高度26px加上上下间距7px,26+7+7=40;

浅谈网页表单设计中的细节与规范分享,PS教程,图老师教程网

表单的制作规范为视觉规范的其中一部分,它需要和视觉规范的其他版块配合使用,不可独立。

此方法在项目工作中能迅速的完成表单制作,作为一个标准去检测开发的实现效果,同时可以使小组内多名成员迅速达到一定的共识,这些都尤为重要。

我一直坚持简化设计,减少的是视觉污染和垃圾,减少开发成本和维护成本,减少用户学习成本,提升效率与体验。

展开更多 50%)
分享

猜你喜欢

浅谈网页表单设计中的细节与规范分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈网页表单设计中的细节与规范分享

分享网页设计中WEB表单设计方法

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
分享网页设计中WEB表单设计方法

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

浅谈网页用户体验中的表单设计技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈网页用户体验中的表单设计技巧

网页表单设计中的主次之分

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页表单设计中的主次之分

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

CSS教程:网页表单设计技巧

Web开发
CSS教程:网页表单设计技巧

优化网页表单设计的输入体验

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
优化网页表单设计的输入体验

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

国外信笺设计佳作欣赏

国外信笺设计佳作欣赏

20位国外顶级设计师的桌面环境分享

20位国外顶级设计师的桌面环境分享
下拉加载更多内容 ↓