资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划
从策略到执行的一站式服务

web页面原型设计原则

来源:奇兵网络 | 2020-07-07 | 浏览:510次

web页面做了不少,总结一下心得:



1 色调:


- 主色调不超过三个。


- 基本颜色为蓝色(主体背景色)、灰色(边框)、白色(背景)、黑色(字体)、深红色(错误)、绿色(表示通过)、橙色(高亮、警告)




2 操作:少点击,少切换,少刷新。


- 不要让用户点来点去,尽量让每一次点击做尽可能多的工作;


- 走一个业务流程,不要让用户从这里个窗口跳到那个窗口,从这个页面跳到那个页面,尽可能一个页面搞定;


- 尽量避免刷新(少刷新、自动刷新、局部刷新);


- 总说:页面跳转尽量少、弹出框尽量少、刷新尽量少、用户操作尽量少;




3 导航:


- 常用:将最常用的或者说最主要的功能放在主页或者最醒目的位置(不需要点击或者打开什么,直接可以开展操作)


- 其他:其他不常用的功能,有一个统一的入口,然后使用列表或者树形结构;(需要点击一个按钮后才能看见);


- 参考:windows操作系统、IPhone操作界面;




4 图标:


- 尽量使用图标显示状态或者进度, 同时用户可以看到图例说明或者鼠标悬浮显示tip;


- 或者将图标和文字做到一起,形成一个先图标后文字的图片;




5 自适应:


- 页面元素的大小、位置,更好是根据浏览器页面大小进行动态设置;


- 常见包括:窗口大小、弹出框大小、分页数量、图标位置;




6 统一:


- 相同性质的元素样式要统一,包括:图片风格、背景色、字体大小、字体颜色;




7 动画:


- 列表或者按钮设置常见动画效果:


- 点击效果


- 选中效果


- 悬浮效果


- 激活效果




8 提示:


- 尽可能将元素的title补上,作为给予用户的提示说明;


- 图片添加alt;




9 对其:


- 页面元素上下左右摇对其;




10 留白:


- div和div之间、文字和div之间 适当留白,避免紧迫感;


- padding 和 margin




11 行高:


- 设置适当的行高;


- 推荐30px到35px;




12 提示:


- "操作成功"种类提示可以有,但是提示框会自动消失,不可以让用户确认之后提示才消失(就是不可使用alert提示成功)


- 操作失败或者警告一类提示,需要用户点击确认一下;


- 表单验证:验证失败,不要弹出alert,直接在页面给红色高亮出提示;




13 日志:


- 系统运行状况更好有日志;


- 系统业务流程的过程原则是必须有日志;


- 对于系统中运行的sql语句原则上必须有日志记录;




14 sql语句:


- sql语句独立于java文件(xml或者property),参数使用占位符并写上详细的说明(不可以有select * );





15 在线帮助文档:


- 在系统里边,更好有一个在线”帮助文档/系统使用手册“等,入口是一个非常小的图标;




16 用户反馈模块:


- 为了不断完善系统、挖掘或者细化需求、尽快发现并解决bug,在系统里边更好有一个"用户反馈/bug管理"的模块,入口是一个非常小的图标;






17 窗口和内容:


- 先弹出窗口(窗口默认内容为空白或者显示正在加载),然后再获取数据、显示数据;


- 禁忌先去后台查内容,然后页面卡死,直到数据返回再显示内容;






18 正在加载:


- 涉及到请求服务的内容,默认显示正在加载,给予友好提示(返回数据后再显示内容)。


—— 微信公众号 ——

热门标签

上一条———————

yii2+PhpSpreadsheet导入execl数据踩坑记

下一条———————

做网页设计时都会有原型图吗?
十六年 建站经验

多一份参考,总有益处

联系奇兵网络,免费获得《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:151-1127-5288 / 客户专线   长沙:13975129722 0731-85502318