ui的设计原则
部分网页设计原则
规划目录结构时应当遵循的几个原则:
1.不要将所有文件都存放在根目录下;
2.按栏目内容分别建立子目录;
3.在每个主目录下都建立独立的images目录;
4.目录的层次不要太深;
5.切忌使用中文目录;
6.不要使用过长的目录;
7.尽量使用意义明确的目录。
除创意之外,在网站设计时还需要考虑以下基本原则:
1.网页内容要便于阅读;
2.站点内容要精、专和及时更新;
3.注重色彩搭配;
4.考虑带宽;
5.要适当考虑不同游览器、不同分辨率的情况;
6.提供交互性;
7.简单即为美。
网页设计的通用规则:
1.网站的设计目的决定设计方案;
2.浏览者的需求第一位;
3.页面的有效性;
4.页面布局的保持统一性;
5.使用无语意标签DIV和适当的结构来设计网页;
6.谨慎使用图片;
7.减少Java Applet和其他多媒体的使用
在页面进入草图设计后,需要确认很多细节,我在检查页面设计稿是否可以进入切页面和制作时候,遵循以下原则:
1 界面统一性。一样的功能在一样的地方。一个页面无非由一些基本模块组成,每一种基本模块在UI设计上,不同的应用实例是否元素一致,包括字型、字号、颜色、按钮颜色、按钮形状、按钮功能、提示文字、行距等。说来容易,执行的时候很多设计师会有一些随意的想法,可能某些想法是挺好的,但是我们必须执行统一的界面标准。设想windows里面,如果不同的窗口关闭按钮在不同的地方,并且颜色还不一样,这会是什么样混乱的状况。
2 留住用户而不是骚扰用户。引导,不是强制。国内的网站对于骗取点击量是很有心得,记得有一段时间sina的新闻标题都是危言耸听,结果点进去一看不是那么回事情,这样的用户体验就不好了。除了进行角色用户模型分析用户关心的内容以外,我这次也采用了比较极端的做法来避免用户对于点击的处理。弹出新页面恐怕也是中国互联网特有的现象,向前向后这些按钮在中国用处不大。好在我们有各类多选项卡的浏览器,不怕,但是,良好的连续性体验被破坏了。你愿意看一本每页印两个字的书吗?用户感兴趣才看某个网页,我们要做得是引导用户看到他想看的内容,既不能硬塞,也不能骗取。
3 安静的浏览器。曾几何时,我在看网站的时候,是选择不显示所有图片的,这样的干净在某些领头羊的带领下,已经不复存在了。诸多的flash闪烁,一碰就显示的层,甚至还有不请自来的视频,这些都不是NI自然界面理论能允许的,我们要的是一个给用户安安静静阅读内容参加互动的网页。根据NI第二原则:网站设计要满足人们的需要,包括个人化的和社会化的。用户到网站上来有个人的需求,尽可能简洁的版式,容易阅读的内容,方便的导航,这些对于用户来说都是容易接受的,从web2.0风潮开始,有一点至少是好的,就是国内网站也开始注意这些方面,而不是将内容一股脑的堆砌在那里。如果还是没有很明白的话,大家可以发现绝大多数国外网站在点击一个链接的时候,是在本页打开,而国内的网站基本上都是新开页面。
以上这些归纳为设计时候要注意的要点如下:
1 每一个模块的边框,标题,按钮(如果有的话),“更多”“详细”功能,这些元素的颜色、大小尺寸、位置、对齐方式、字体、字号、行距等都要一致。
2 整个页面的基调颜色要一致,不同的模块除非有很大意义的差别,颜色应该一致。
3 可以点击的文字、按钮、图片,鼠标应该呈现出统一的可点击样式,区别于不可点击区域。
4 呈现的日期格式的统一,比如都用长日期格式“2007-2-1”或者都用短日期格式“07-3-1”,样式不同的日期呈现方式还不如不呈现。
5 可以点击的图片最好用不同的样式显示,比如鼠标滑过时候的辉亮效果。因为网页会大量的使用图片做修饰效果,区分可以点击和不可以点击的图片是值得去做的。
6 有没有不必要的弹出窗口。(从netscape开始这个设计真的很糟糕,ie也完全继承了,解决的办法是用js方式来呈现弹出窗口。)
7 文字描述。很多时候会忽略这个问题,在我们做demo的这个项目中有很多的文字描述,各有其用,统一描述的方式,统一人称,统一语气,都是给用户带来良好体验的途径。
8 图片风格。我不是这方面的专家,从欣赏的角度,图片应该是尽可能的统一风格,素描样式和点阵样式共存总不是太好的事情。
9 图标。很多时候会用图标来描述功能,漂亮的带点阴影和倒影的图标是非常抢眼的,使用图标的话要注意风格、透视角度、分辨率、辨识度的一致性。
ui的设计原则的更多相关文章
- 移动UI布局设计原则(一)
学习笔记1 Learning notes one 移动UI布局设计的布局原则 Layout Principles of Mobile UI Layout Design 移动UI视觉交互设计法则 Des ...
- 优秀设计师应当知道的20大UI设计原则
世界级图形设计大师Paul Rand(保罗.兰德)曾经说过:"设计绝不是简单的排列组合与简单地再编辑,它应当充满着价值和意义,去说明道理,去删繁就简,去阐明演绎,去修饰美化,去赞美褒扬,使其 ...
- 移动端UI界面设计:APP字体排版设计的七个原则
移动端UI界面设计:APP字体排版设计的七个原则 发布于: 2015 年 2 月 9 日 by admin 再来谈移动端APP字体排版设计,也许有人会说,这个还有什么好说的呢?但是真正能够运用好APP ...
- 9个永恒的UI设计原则
很多人都在寻找那些能够帮助他们快速提升设计能力的方法,但你是否想过,自己身上的哪些方面会对你的设计产生影响呢?是使用工具的技巧,对设计的理解和态度,还是你的生活习惯呢?我想说所有这些都是决定你的设计是 ...
- Atitit. Api 设计 原则 ---归一化
Atitit. Api 设计 原则 ---归一化 1.1. 叫做归一化1 1.2. 归一化的实例:一切对象都可以序列化/toString 通过接口实现1 1.3. 泛文件概念.2 1.4. 游戏行业 ...
- REST简介及设计原则
rest,即REST(Representational State Transfer表述性状态转移)是一种针对网络应用的设计和开发方式,可以降低开发的复杂性,提高系统的可伸缩性. 简介 REST (R ...
- 游戏UI框架设计(一) : 架构设计理论篇
游戏UI框架设计(一) ---架构设计理论篇 前几天(2017年2月)看到一篇文章,国内王健林.马云等大咖们看好的未来十大最有"钱途"产业中,排名第一的就是"泛娱乐&qu ...
- 回顾2017系列篇(一):最佳的11篇UI/UX设计文章
2017已经接近尾声,在这一年中,设计领域发生了诸多变化.也是时候对2017年做一个总结,本文主要是从2017设计文章入手,列出了个人认为2017设计行业里最重要的UI/UX文章的前11名,供大家参考 ...
- mySql 数据库设计原则
mysql数据库设计原则: 必须使用InnoDB存储引擎 解读:支持事务.行级锁.并发性能更好.CPU及内存缓存页优化使得资源利用率更高 禁止使用存储过程.视图.触发器.Event 解读:高并发大数据 ...
随机推荐
- oc语言--语法
一.OC简介 1.简介 它是C语言的基础上,增加了一层面向对象语法 OC完全兼容C语言 可以在OC代码中混入C语言代码,甚至是C++代码 可以使用OC开发mac OS X平台和IOS平台的应用程序 2 ...
- Qt编程之QImage类小结
最近用Qt做图像处理,以下references是需要用到的 references: http://blog.csdn.net/lyc_daniel/article/details/9193881 ht ...
- Linux下(主要针对Ubuntu)下桌面分辨率的添加
系统版本: Linux (Ubuntu) 其他桌面发行版应该也行. 相关命令: lspci, cvt, xrandr 在桌面分辨率不正常显示桌面或者没有最佳的分辨率时,需要修改添加适合的桌面分辨率模式 ...
- hdu 2202 最大三角形_凸包模板
题意:略 思路:直接套用凸包模板 #include <iostream> #include <cstdio> #include <cmath> #include & ...
- 【LeetCode练习题】Pow(x, n)
Pow(x, n) Implement pow(x, n). 计算x的n次方. 解题思路: 考虑到n的值会很大,而且可为正可为负可为0,所以掉渣天的方法就是用递归了. 对了,这题也在<剑指off ...
- 为 Python Server Pages 和 Oracle 构建快速 Web 开发环境。
为 Python Server Pages 和 Oracle 构建快速 Web 开发环境. - 在水一方 - 博客频道 - CSDN.NET 为 Python Server Pages 和 Oracl ...
- linux内存操作----kernel 3.5.X copy_from_user()和copy_to_user()
前面的一篇文章中简单的描写叙述了一下内存映射的内容,http://blog.csdn.net/codectq/article/details/25658813,这篇文章作为用户把内存规划好之后,在用户 ...
- zTree实现清空选中的第一个节点的子节点
zTree实现清空选中的第一个节点的子节点 1.实现源代码 <!DOCTYPE html> <html> <head> <title>zTree实现基本 ...
- 编解码学习笔记(十):Ogg系列
Ogg是一个自由且开放标准的容器格式,由Xiph.Org 基金会所维护.Ogg格式并不受到软件专利的限制,并设计用于有效率地串流媒体和处理高质量的数字多媒体. Ogg意指一种文件格式,能够纳入各式各样 ...
- python中使用mahotas包实现高斯模糊
高斯模糊 import mahotas as mh import numpy as np from matplotlib import pyplot as plt image=mh.imread('i ...