网站建设 网站建设 锐志网络 橡树动画 求创科技 黑蚁互动 Web新势力互动 沪江网 注册 - 登录 | 在线投稿
创意在线首页
平面设计交互设计CG动漫工业设计建筑环境数码影像论吧创意搜教育
 首页大赛征集资讯教程欣赏访谈招聘作品集竞赛台专题 创企同盟矢量库图片库酷站营设计网址大全
交互设计首页
当前位置:首页 > 交互设计 > 观点 > 正文
高分辨率下文字字体、图像、界面布局的解决方案
作者:刘大鹏 来源:UI花园 发表时间:2007-7-18 10:22:05 浏览:

为什么要保证我们的软件产品或应用程序中的文本、图像和字体、布局等问题呢,因为我们用户的终端显示设备通常型号和设置各异,如最近出现的16×9,低于8”的等最新款式移动手提电脑,我们的应用程序和软件产品通常会在这样的终端变得面目全非,而这显然给用户的使用带来了严重的问题,直接导致的问题如:操作易用性Usability、功能可接近性Accessibility、文本可读性Readability 等,而这样的问题并非不可逾越,要解决如何让我们的应用程序在高分辨率的显示下仍然保持正常可视,重点需要解决四个方面的问题文本和字体、图像(图形、图标和鼠标指针)、版面设置和重绘等。

前言

所有的应用程序都可以工作在高分辨率下显示吗?答案当然是否定的。现在比较标准的计算机显示器都已经可以支持显示大概96像素点/英寸的分辨率了,而且越来越多的应用程序都可以运行在这种分辨率下,但是却仍然面临分辨率日益增长的带来的危险。现在,我们可以轻松的买到一台133-DPI显示分辨率的笔记本电脑,甚至还有170DPI的,也许几年以后200-DPI的显示分辨率已经随处可见了,著名的工业杂志DisplaySearch曾经预言在2002年底有40%的膝上电脑已经超过100-DPI的屏幕分辨率了,而且这个数字还在增长。

例图 1.各种常见分辨率下字体外观

点此在新窗口浏览图片

现在大多数的应用程序要想显示正常都依赖于分辨率,我们有些应用程序如果没有高分辨率的支持将会变得非常丑陋并且导致用户易用性降低,与此同时越来越多的用户使用了大字体。但是遗憾的是当分辨率在130-DPI和200-DPI的时候是不成比例的,在96-DPI下的同一个应用程序在这种分辨率下会变得无法使用,有的时候这些应用程序的字体或控件会一律变得很小,但是更多的情况是一部分界面元素的尺寸正确的(例如,应用程序使用了缺省的字体,那么将会在这个基础上比原来大一些)而另外一部分不正确,如下图所示:

例图2. 改变分辨率带来的影响

点此在新窗口浏览图片

由此可见,增强和改善我们应用程序在高分辨率下的显示支持是非常有必要的,那么重要的标准应该是:图片看起来更好,文本也应该看起来更清晰。比如文本在200-DPI分辨率显示器上清晰的像激光打印机输出的一样(因为计算机显示有更多的颜色像素和灰度缩放支持,200-DPI的显示器的质量相当于600-DPI的打印机)所以PDA和Smartphone的厂商相对于纸介更看重高分辨率下的显示。

开发一个适应多分辨率的应用程序不是很简单,尤其对于一个已经成形的应用程序和系统来说,动静可能不小,但是它的好处是可以使我们不必再假设分辨率的各种情况,避免不能缩放带来的质量下降(比如说位图和位图字体),而且开发支持高分辨率的应用程序有时候会觉得有些单调和乏味,但是如果我们的产品或应用程序是为了服务于特定人群的(比如说视力不好、和需要长时间工作的人以及视弱人群),那么我们的工作就会变得非常有必要(在高对比度下和使用扩展大字体的情况都和高分辨率有关)。

系统韵律

Windows平台本身提供了帮助解决用户系统高分辨率问题的解决途径,我们可以通过一个小函数GetDeviceCaps()先获得当前的显示分辨率,然后通过GetSystemMetrics()这个系统韵律函数和读取系统信息和参数的SystemParametersInfo()函数提供的方法来改变windows中的图形以及控件元素、和字体的尺寸,从一个3d的边框效果乃至到一个小图标的尺寸,都可以随心所欲的改变。

点此在新窗口浏览图片

大概原理是首先利用GetDeviceDaps()这个函数获得当前分辨下的X、和Y轴的数值作为基准;然后再确定要缩放到多少。

关键问题

在设计高分辨率的应用程序过程中,我们要特别注意四个重要的方面:文本和字体、图像(图形、图标和鼠标指针),版面设置以及重绘。


在线编辑:52design
本文链接:


推荐阅读:
·扬帆青春,快乐起航----首届中国大学生游艇设计大赛
·教育培训精选课程推荐,打造教育培训第一平台!
·引导用户追求更高的潮流风向标--访设计师“谢荣光”
·泾渭新区形象标识揭晓
·2010名城会吉祥物揭晓
·一万元 同程网征集广告语
·一万元 西安沣渭新区征集宣传语

52design素材资源库52design图片库52design酷站营
免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息。对本文有异议,请联络本站!
转载要求:文章作者及来源信息必需保留。转载之图片、文件请不要盗链本站地址,且不准打上各自站点的水印!

创意素材推荐 矢量 | PSD | 模板 | 高清 | PNG | 网页背景
2009-02-06
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站
个性展示 网站教学 工 作 室 学校教育 卡通漫画 文化艺术 体育运动 美容健身 食品饮料
近期推荐报道 返回首页更多精彩等着你!

Illustrator| 用AI创建精细矢量插图徽章Photoshop| PS经典合成张开血盆大嘴樱桃
Photoshop| Photoshop自制个性的黑色翅膀摄影佳作| 德国Thomas Wuhrer长腿女郎性
Photoshop| Photoshop制作超酷的边缘发光的荧CorelDraw| CorelDRAW制作编织效果详细教程
Illustrator| illustrator制作潮流海报字体摄影佳作| 惊艳的Francesco Marconi
Photoshop| 利用画笔及图层样式制作方格子艺术纹理背景Photoshop| Photoshop制作简单时尚的彩色放射
创意焦点 大赛征集 | 产业资讯
创意欣赏 新锐 | 海报 | 摄影 | 插画
巴西Nfxdesig我好害怕—天才画家G
巴基斯坦ShakilPhil Wrigg
以鱼为元素标志设计欣德国Thomas W
原创作品集 平面 | 插画 | 网页 | 包装
教程更新 | 高清 | PNG

韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站 个性展示 网站教学 工 作 室 学校教育
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站 文化艺术 体育运动 美容健身 食品饮料
网站名称:porto-cruz
网站地址:http://www.porto-cruz.com/
加入时间:2010-9-2 16:00:26
网站名称:jeans
网站地址:http://mjeans.metersbonwe.com/
加入时间:2010-9-2 15:48:56
网站名称:kodak
网站地址:http://playvideo.kodak.com/
加入时间:2010-9-2 15:46:54
网站名称:discover
网站地址:http://discover.sonystyle.com/innovations/hd3d/#/hd3d
加入时间:2010-9-2 15:45:34
网站名称:danonino
网站地址:http://www.danonino.de/
加入时间:2010-9-2 15:44:02
网站名称:lococurry
网站地址:http://www.lococurry.co.kr/
加入时间:2010-9-2 15:41:30
关于本站 | 联系方式 | 商业服务 | 合作伙伴 | 站点地图 | 免责声明 | 版权声明 | 在线投稿