About UI-Design,Silverlight,UE.

Mobile UI design tips——how to reduce needless space

与面向桌面电脑的网页设计不同,移动平台的设计中,屏幕空间是一个不可忽视的限制因素.设计需要符合移动平台用户的使用习惯,以最佳的状态呈现屏幕信息.

接下来以当前正在工作的UI做为sample,实战空间优化.

改进原则

• 去除不必要的提示信息

合理减少界面中的文字信息,图形化界面直观的使用户可以完成操作任务.

• 控制字号,使用高亮/对比方式突出类似条目信息

有需要充分利用单屏的空间,在不影响文字显示底线,采用多途径的设计方式描述内容.

• 合理布局功能控件

减少显示中的控件使用, 学会聪明的隐藏低优先级的功能, 对于用户熟悉操作与产品开发都将是有益的.
如在Iphone平台善用标准化的action sheet, 在Android中的collapsed menu.

限制因素

• 平台操作习惯

遵循不同平台的设计准则(你可以从官方的UI开发指南获取这些帮助教程), 避免将错误的理念带给特定的平台. 如你不会在Iphone的设计中使用Android/Symbian的Options. 熟悉这些原则不仅会使产品易用, 善用组合的设计也将提升操作体验.

• 屏幕物理属性

不同尺寸的屏幕不同的UI. 要考虑的产品在所有目标用户的不同屏幕的显示效果. 如果要做一个通版的UI设计, 需要重点考虑带来的负面影响.触摸屏是另外一个需要考虑的情况,滑动使得翻页变的容易,可点击的元素尺寸是否有必要增大以适应大的手指…要知道, mutli-touch 目前只是apple的专利.

我们需要为特定的这个页面做些什么

这个是一个Android平台的程序.
这是优惠券列表页面,优惠券是我们最重要的显示内容, 用户需要在单屏中预览更多的优惠券信息.商店信息次之.tab导航将被保持以保证用户不会迷路.

• 移除标题.
• 默认收起商店信息,点击可弹下显示.
• 为保证用户对商店信息的初步了解与注意,加入商店名称.

接下来我们将得到下面的界面.

UI不只是皮肤, 请用心使界面更加好用.
Enjoy your design~

接上篇设计中的生理色差 (1)。

文章发出去后，很快收到了QUESTER的回复。

这个是科学的，但是并不等于是可行的解决方案。
通常来讲，没有经过训练的常人裸眼，不可能分辨出10%以下的色彩差异。
因此，在普通设计上追求校正眼球色偏差，不如多去考虑一下正常的途径：校正不同的屏幕显示颜色。
这才是比较靠谱的做法，也是实际运用中常常出问题的部分：
例如，绿色和紫色以及大部分的中间灰色，在每一台显示器上都会呈现出不太一样的状态，因此，才会有“安全色”的概念出现。
所以，你显示器上出现的灰色，有可能在你老板的显示器上是粉红色或者粉蓝色，都是说不准的事情。
因此，确认大家都在同一调校过的显示环境下工作，是视觉设计师应该熟悉的工作。

这里，Quester提供了更为广阔的思路。

• 统一显示效果。
• 设计使用安全色。

长话短说，人为参与的软硬件色彩校正，其实是平添了一个不稳定因素。
把大量的时间用来做兼容与测试是低效的，同时也会影响设计本身的质量。
统一显示设备才是正道。

—–Color-Blind——-

之前有计划写设计中的色盲原理与色彩关系，在搜索相关材料时，发现已经有几篇不错的文章了。

Web Accessibility之为色盲设计(一)：他们是谁？
Web Accessibility之为色盲设计(二)：检验设计的工具
How to Design Web Accessible Pages for the ColorBlind

这几篇文章是站在非色盲设计师的角度进行的色盲色彩设计。
对于概念的分析已经到位。
后面追记一些之前了解到有关色盲设计师对于设计的心得。

色盲色弱设计师是可以辨识灰阶的，但这对于设计是远远不够的。影响的原因有很多，不只是大家以为的颜色，还有光线、环境色、饱和度等等，加上色盲色弱的程度有分很多种，所以很难确定工具对于改善设计的程度。

虽然有Adobe Kuler、色盘工具、Color Code、PS纵使有很多工具可以帮助解读颜色，但所显示出来的东西，毕竟是数字，顶多了解到蓝色比较多、红色或绿色比较多之类的信息，RGB任何一个值多了多少少了多少，都会造成颜色上的差异，有时候往往差一点，就让整个配色变调了。就算经验再丰富，知道怎么运用色盘上的色码，但还是有另一个问题。

平常人不会用这些色码沟通，他们可能说”Medium Orchid”、”Steek blue”之类的，这边却也不会跟他解释说这是#AACC22，是的，知道这个颜色偏红、偏蓝，但有时候却无法说出这是什么确切的颜色。

有的时候秀出设计稿，客户或上面会跟说这个什么颜色改一下。其实设计者认为没有用这个颜色，然而事实上，真的用到了那个颜色，只是没有分辨出。这个时候这样的工具就是救星了。这些工具除了提示正确的色码，甚至可以是颜色的名字，这个时候就容易除掉颜色上的错误。

有了这个小工具再配合上其他工具，相信可以使色弱色盲设计师会有大大帮助。

WhatColor

虽然色盲色弱设计师的设计有时候会很痛苦（在我看来），但其实还是有自己主观的色彩感知，那是正常人所感受不到的。有的色盲设计者所设计出来的作品有其独特的色彩风格。

Filipinas

Campaign Management基于Silverlight程序。我们要求merchant的电脑需装有Silverlight插件，提醒merchant为什么要安装Silverlight，并表明我们信赖Silverlight，且能移除安装及使用Silverlight的阻碍。

第一次浏览时会出现的两种情况

1. 安装体验（Installation Experience）——当merchant未安装Silverlight插件浏览时，将会看到的安装提示界面。
2. 预定体验（Default Experience）——当merchant已经安装Silverlight插件浏览时，将会看到的loading界面。

设计目标

1.传达该页面的价值，只要安装Silverlight就能够获得。
2.提供明确的要求，请merchant安装Silverlight。
3.消除阻碍merchant完成安装的疑虑。
4.个性化安装提示界面，符合商业需求。
5.优化程序loading速度，并充分利用loading的时间，提供随机tips帮助merchant使用Campaign Management。
6.防止误关闭以及加入其它帮助信息。

原型设计

参考文档 MSDN