用户界面设计

Chronilce

上星期熬了几个深夜,完成了这款千千静听的皮肤,昨天给老婆看,被老婆打击的很是泄气,连说丑,一点创意都没有,颜色上也很灰暗。想想,确实是的,一点出彩的地方都没有,很多地方粗糙的很。算了,好歹也完成了,今天提交到千千静听的皮肤大赛的网站上了。

当初做成这样,是因为看到了iconfactory的一款皮肤用了类似的色调,在做的时候,按钮的处理上也多少进行了模仿,只不过整体上根本还是达不到那种意境,没有活力。 Read more »

山东电信网上营业厅

上周末,一天时间,完成效果图,呈现给局方,对方称很满意,我也送了一口气。又花了点时间把结构板块的内容进行了些调整。

这次设计,借鉴了电信集团下其他省份网厅的出色之处,在整体风格上还算没有偏离电信的形象,不过可能是因为块块分的太多,内容部分看上去有点乱。

代码方面,昨天晚上琢磨到深夜,用CSS实现了原计划用Js去写的效果,很有成就感。通过这次完成代码的过程,也把近来碰的比较少的css又加强了下。

一周的设计+前端代码,又获得了不少的实战经验,不管是设计方面还是css方面,虽然很累,但很欣慰。

山东电信网上营业厅

山东电信网上营业厅

milky图标临摹练习

最近在学习画ICON,跟着教程走,往往一个ICON要画一两个小时,几个下来,常用的表现技法也大致熟悉了,就开始找图标来临摹,这几天忙中偷闲,临摹了几个milky系列的图标。

总的来讲,在画ICON中还是有很多不解以及需要努力提高的,如

1.为何会出现锯齿,如何避免?出现了如何处理?

2.对光感的把握还是很不好,尤其是涉及到透视的效果的,还是必须多看多练多揣摩。

3.  图标整体感不强。以刚画好的milky为例,大部分图标都是抛开原图自己去想象着画的,但是画下来,图标的大小和颜色就出现了很不统一的地方。这是比较忌讳的。

继续学习吧。

九月底

最近几天,在安徽移动配合IBM方面的工程师做售前阶段产品界面的开发,经过连续的苦战,终于完成任务且获得还算不错的认可。这期间,接触了一些人、一些事,感触颇多。

1.业务软件(如电信行业运营商的内部支撑系统)的界面,对于任何厂商来说,都还是薄弱又经常需要挂在嘴边的。对于系统集成商来说,新产品的不断推出,界面越来越得到重视,这 是日益加剧的竞争所致。随着各方面对界面的越来越重视,软件行业也会步互联网的后尘,改进用户体验。只不过,在业务软件,由于业务知识晦涩难懂,系统结构 庞大,有些有远见的领导想法很伟大,但落实很困难。路还比较长,但总会总到,接下来经济危机的几年,似乎可以把产品好好改进。只不过,不晓得对于电信行业 来说,是不是一样会有冬天。

2.这应该算是一次高压作业,每天晚上至12点。发现自己经常可以在时间紧任务重的情况面前有不错的表现,反而往往给了充足的时间却迟迟不得好的效果,以至于总是会觉得这一版做的不好也没事,还有时间可以做第二个版本。
这次,也使我更深刻的认识:我平时实在是太美效率了,如果总可以把时间这样利用,那么,一定会进步得更快吧?

3.实力强劲如IBM的软件工程师,实力与态度上也是有极大悬殊的,有的从早上9点干到夜里12点,离开屏幕的时间不会超过1小时,有的左晃晃右晃晃,吹吹牛,看看股票。他们高薪?是的,他们高效?不见得,有东郭。

4.原来IBM和联创有着深厚的渊源。原来系统集成商和平台提供商有着紧密的合作。

5.一直听同事说局方的饭菜很好,果然!

5.气温骤降,始料不及,明日回宁。

软件界面设计的几个方面

最近两天赋闲在家,把好久不玩的实况足球和QQ龙珠痛快的玩了一把,玩到厌了,便四处找文章看,多是UI方面的理论性文章,有早些时候的对设计细节的讨论,也有最近的对交互的一些牛人观点。

看的较多的,还是白鸦04-06年期间对UI的一些资料整理和个人观点,知识点不是很系统,全看自己怎么去消化了。

发现了白鸦提供的一个资料的下载FTP,虽然里面的资料大都也是04-06年的,还是仔细发掘了一下。有一篇,<界面设计及其附加工作>,觉得有必要转载并收藏一下。

原文如下:

软件界面设计介绍(ZT)

界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。具体包括软件启动封面设计,软件框架设计,按钮设计,面板设计,菜单设计,标签设计,图标设计,滚动条及状态栏设计,安装过程设计,包装及商品化 在设计的过程中有较多注意的关键问题,以下列出几点:

(1)软件启动封面设计–Splash

应使软件启动封面最终为高清晰度的图像,如软件启动封面需在不同的平台、操作系统上使用将考虑转换不同的格式,并且对选用的色彩不宜超过256色,最好为216色安全色。软件启动封面大小多为主流显示器分辨率的1/6大。如果是系列软件将考虑整体设计的统一和延续性。在上面应该醒目的标注制作或支持的公司标志、产品商标,软件名称,版本号,网址,版权声明,序列号等信息,以树立软件形象,方便使用者或购买者在软件启动的时候得到提示。插图宜使用具有独立版权的,象征性强的,识别性高的,视觉传达效果好的图形,若使用摄影也应该进行数位处理,以形成该软件的个性化特征

(2)软件框架设计

软件的框架设计就复杂得多,因为涉及软件的使用功能,应该对该软件产品的程序和使用比较了解,这就需要设计师有一定的软件跟进经验,能够快速的学习软件产品,并且在和软件产品的程序开发员及程序使用对象进行共同沟通,以设计出友好的,独特的,符合程序开发原则的软件框架。软件框架设计应该简洁明快,尽量少用无谓的装饰,应该考虑节省屏幕空间,各种分辨率的大小,缩放时的状态和原则,并且为将来设计的按钮,菜单,标签,滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配,将软件商标放在显著位置,主菜单应放在左边或上边,滚动条放在右边,状态栏放在下边,以符合视觉流程和用户使用心理

(3)软件按钮设计

软件按钮设计应该具有交互性,即应该有3到6种状态效果:点击时状态;鼠标放在上面但未点击的状态;点击前鼠标未放在上面时的状态;点击后鼠标未放在上面时的状态;不能点击时状态;独立自动变化的状态。按钮应具备简洁的图示效果,应能够让使用者产生功能关联反应,群组内按钮应该风格统一,功能差异大的按钮应该有所区别。<br><br> (4)软件面板设计<br> 软件面板设计应该具有缩放功能,面板应该对功能区间划分清晰,应该和对话框,弹出框等风格匹配,尽量节省空间,切换方便。

(5)菜单设计

菜单设计一般有选中状态和未选中状态,左边应为名称,右边应为快捷键,如果有下级菜单应该有下级箭头符号,不同功能区间应该用线条分割。

(6)标签设计

标签设计应该注意转角部分的变化,状态可参考按钮。

(7)图标设计

图标设计色彩不宜超过64色,大小为16×16、32×32两种,图标设计是方寸艺术,应该加以着重考虑视觉冲击力,它需要在很小的范围表现出软件的内涵,所以很多图标设计师在设计图标时使用简单的颜色,利用眼睛对色彩和网点的空间混合效果,做出了许多精彩图标。

(8)滚动条及状态栏设计

滚动条主要是为了对区域性空间的固定大小中内容量的变换进行设计,应该有上下箭头,滚动标等,有些还有翻页标。状态栏是为了对软件当前状态的显示和提示。

(9)安装过程设计

安装过程设计主要是将软件安装的过程进行美化,包括对软件功能进行图示化。

(10)包装及商品化

最后软件产品的包装应该考虑保护好软件产品,功能的宣传融合于美观中,可以印刷部分产品介绍,产品界面设计。

用户界面设计的技巧与技术

白鸦的blog点到倒数第二页,我看到了这篇文章,从头到尾读了下来,很有收获。

一篇能让你学到东西的文章是每一个字都不能错过的,每一句话都在阐述一种思想,也许今天用不到,明天用不到,总会有一天会把它从脑里挖出来用一下。最近需要多读一些界面设计的理论性文章和实践案例,主要在行业博客内寻找,哪位朋友有好的文章请推荐。

<用户界面设计的技巧与技术>这篇文章的要点转载如下:

1、一般指南
● 用户界面的一致很关键,
● 设立界面标准并遵循之,
● 采用行业标准,也使你的应用软件看起来或视感上与其它机构开发的软件更趋一致,
● 向用户阐明软件运行规则。有了一致性,规则只会简练,
● 支持生手也支持熟手;
● 文字措辞一致、正面,要用全称,
● 对其它软件不盲从’,要知道不是每个人都懂得如何设计好的用户界面;
● 在桌面上显示快捷方式;
● 根据业务对象及其相应的界面对象去思考,而不是从应用软件本身去思考;
● 界面对象在视觉上、感觉上和行为上应与其在现实世界的表现一致。

2、屏幕设计
● 界面间切换、界面布局都很重要;
● 理解小部件,才能正确地加以应用;
● 使用颜色要谨慎,以指示符补充;
● 遵循对比原则一一在浅色背景上使用深色文字,在深色背景上使用浅色文宇;
● 字体使用要适当和一致;
● 项目不可用时,灰掉而不是移走,用户才有形成精确的心理模型:
● 使用无害的缺省按钮;
● 编辑区域左对齐,相应的标签则应右对齐,
● 整数、浮点数右对齐, 字符串左对齐;
● 避免屏幕拥挤;
● 用方框和间隔对屏幕上有逻辑关联的项目加以组合;
● 在操作焦点处打开窗口;
● 弹出菜单不应是唯一的功能来源。

3、建立原型
● 用户需求决定了原型的开发;
● 原型评估的任务:发现原型的成功之处,失败之处及遗漏之处;
● 在评估过程中只发现少量需求或不再有新的需求时,即可结束原型建立过程;
● 寻找现实对象,确定用户在现实世界中的使用方式;
● 与软件开发完成之后的实际用户共同工作,
● 设定原型开发时间表并执行;
● 使用原型开发工具:
● 用户参与开发,对原型进行测试:
●了解根本业务;
● 别在很可能丢弃的事情上花大时间,
● 一旦界面对象稳定,就应文档化,
● 为原型开发界面流程图:
● 对组成原型的每个界面对象建立文档。内容包括:界面对象的用途、用法;指出与之相关的其它界面对象,每一部件的用徐、用法。

UI尝试

到底什么是UI,我似乎还不是很透彻。但是用户界面的设计对我有着极大的吸引力,这一点表现在我对rokey博客的关注上,为耀眼的效果感慨。

之前尝试过做一些登陆界面的设计,很简单的那种,我的设计总是用来被枪毙的,不过,现在想想,那些东西也还真实幼稚啊。在我的印象里,交互的东西总是UI的应用领地。比如软件的界面,系统的界面,手机的界面,等等。我对web UI这个概念还不是很理解,web UI = designer?还是什么?

今天,根据经典里的一个帖子,自己做了一个手机的界面,似乎用了太多的外发光和内发光,有些不该用的地方也用了,但是,不用这个,又不知道用什么效果才好,有人说,设计到了一定的阶段需要的不是技术而是idea,我却还是那种技术都不精湛的人,凭着时不时的小小激情去发挥一下,甚至于有时候自己对自己做的东西都不满意,半途而废。

还好,这次总算是坚持完成了这样一个图形,还算满意吧。

设计不是我的方向,冥冥中觉得。

http://www.koma-yt.cn/pic/UI_phone.jpg