Posts Tagged ‘界面设计’

无纸化的敏捷型情绪板制作

情绪板(Mood Board),意为情绪收集板,是指对要设计的产品以及相关主题方向的色彩,图片,影像或其他材料的收集,从而引起某些情绪反应,以此作为设计方向或者是形式的参考。我们可以利用情感板去定义颜色和风格,作为设计过程中沟通设计目的的方法。(http://www.imafu.com/content.php?id=88)

更多的关于情绪板,我们可以参考这篇文章,上面对情绪板做了一个比较详细说明还包括一个工作坊。

制作一个情绪板的步骤一般包括:

  1. 我们要为设计的网站、产品设置一组关键词。 
  2. 叫上你的同事,PD、Boss等人,让他们收集杂志里的认为能够描述关键词的图片。
  3. 将符合关键词要求的图片从杂志或相片中剪下来,然后把剪下的照片贴在一起到一张展板上。
  4. 从整理下来贴在展板上的图片中归纳颜色。

大家可以看到传统的情绪板制作耗费比较多的时间,事实上,剪纸、粘帖、归纳颜色等过程不但耗费了许多时间,而且还要花时间寻找素材。我这里,总结了一个无纸化的敏捷型情绪板制作。(中间使用的所有软件、网站全部免费哦~)

在第二个步骤,我们可以让相关人员在网络上较大的图片提供商网站上根据关键字进行图片搜索。这样做既简单,又快捷。例如我们要做一个有关机票和酒店的网站。那么,我归纳了三个关键词:airport,travel,hotel 。登录www.shutterstock.com 按这几个关键词搜索图片。找到相关合适的图片之后,我们就把它们下载到同一个目录上。(直接在浏览器上另存为图片就好,忘掉图片上的水纹印吧,那并不影响我们接下来的操作^_^。)

第三步,拼贴。我们直接使用Google的Picasa3的照片拼贴功能。在Picasa上选择刚才下载的图片之后,点击右下角的Collage(拼贴)。在”拼贴“模式下,左边的Settings(设置)里,拼贴方式选择Grid(网格);Page Format(页面格式)选择Current Display(当前显示),点击Create Collage(创建拼贴),我们的情绪板就这么做好啦!

接下来,别忘了我们还要分析归纳情绪板的颜色呢。这里,我推荐使用Adobe的在线配色工具,Kuler。登录 kuler.adobe.com ,注册登录后,在左边的导航栏选择Create(创建) -> From an Image(从图片),然后上传你刚刚在Picasa里拼贴的图,很快,Kuler就自动归纳出了我们的情绪板中的颜色。(额外的好消息,Photoshop CS4还支持直接从Kuler中获取色盘。)

好啦,自此为止,情绪板的工作就结束啦!你的Boss、PD现在没法不喜欢这套颜色了。继续接下来的设计吧!

 

 

用户在做些什么?(上) What Users Do (Part A)

一下内容节选自《Designing Interfaces》

1. safe exploration 安全地浏览

"Let me explore without getting lost or getting into trouble."

“别让我在浏览的时候迷路也别让我有困难。”

2. instant gratification 即时满足

"I want to accomplish something now, not later."

“我想现在就完成些事情,而不是以后。”

People like to see immediate results from the actions they take. it’s human nature. If someone starts using an application and gets a "success experience" within the first few seconds, that’s gratifying! He’ll be more likely to keep using it, even if it gets harder later. He will feel more confident in the application, and more confident in himself, than if it had taken a while to figure things out.

人们喜欢在操作之后立马看到结果。这是人性。如果某人开始使用一个程序并且在头几秒内体验到了一个“成功”,那真是可喜的! 即使使用这个程序会越来越难,但是他也很可能会继续。比起如果这程序需要一定时间才能理出头绪来,他会对程序对自己都更有信心。

3. satisficing 满意原则/够用就好(最佳设计100细则貌似提到过)

"This is good enough. I don’t want to spend more time learning to do it better."

“这样就足够好了。我不想花再多的时间去学习它以便更好得使用它。”

This means several things for designers:

  • Make labels short, plainly worded, and quick to read. (This includes menu items, buttons, links, and anything else identified by text.) They’ll be scanned and guessed about; write them so that a user’s first guess about meaning is correct. If he guesses wrong several times, he’ll be frustrated and you’re both off to a bad start.
    为扫描而不是阅读。精简文字。

  • Use the layout of the interface to communicate meaning.
    用布局排版来传递信息。

  • Make it easy to move around the interface, especially for going back to where a wrong choice might have been made hastily.
    提供良好的导航系统。

  • Keep in mind that a complicated interface imposes a large cognitive cost on new users. Visual complexity will often tempt nonexperts to satisfice: they look for the first thing that may work.
    一定要记住复杂的界面强迫新用户花费大量学习成本。

4. changes in midstream 中途改变

"I changed my mind about what I was doing."

“我曾经对我现在所做的事情改变想法。”

Occasionally, people change what they’re doing in the middle of doing it. Someone may walk into a room with the intent of finding a key she had left there, but while she’s there, she finds a newspaper and starts reading it. Or she may visit Amazon to read product reviews, but ends up buying a book instead. Maybe she’s just sidetracked; maybe the change is deliberate. Either way, the user’s goal changes while she’s using the interface you designed.

用户偶尔改变一件正在做的事。

5. deferred choices 以后再说

"I don’t want to answer that now; just let me finish!"

“我现在不想回答那些;以后再说!”

This follows from people’s desire for instant gratification. If you ask a user several seemingly unnecessary questions while he’s trying to get something done, he’d often rather skip the questions and come back to them later.

这是第二点即时满足的衍生。

For example, some web-based bulletin boards have long and complicated procedures for registering users. Screen names, email addresses, privacy preferences, avatars, self-descriptions…the list goes on and on. "But I just wanted to post one little thing," says the user plaintively. Why not skip most of the questions, answer the bare minimum, and come back later (if ever) to fill in the rest? Otherwise he might be there for half an hour answering essay questions and finding the perfect avatar image.

  • Don’t accost the user with too many upfront choices in the first place.
    首先不要在一开始就引诱用户做过多的选项。
  • On the forms that he does have to use, clearly mark the required fields, and don’t make too many of them required. Let him move on without answering the optional ones.
    表单里必填项要标出。(这里可以参考LukeW的ppt 《Best Practices for Form Design》)

  • Sometimes you can separate the few important questions or options from others that are less important. Present the short list; hide the long list.
    有时应该将少数的重点问题和次要的区分开来。显示短列表,隐藏长列表。

  • Use Good Defaults wherever possible, to give users some reasonable default answers to start with. But keep in mind that prefilled answers still require the user to look at them, just in case they need to be changed. They have a small cost, too.
    选择合适的默认值(在《Designing the Obvious: A Common Sense Approach to Web Application Design )》同时提到。Nielsen博士也提到该点。)

  • Make it possible for users to return to the deferred fields later, and make them accessible in obvious places. Some dialog boxes show the user a short statement such as "You can always change this later by clicking the Edit Project button." Some web sites store a user’s half-finished form entries or other persistent data, like shopping carts with unpurchased items.
    为用户返回他上次未完成内容的地方提供可能。并且把它摆放在明显的位置。

  • If registration is required at a web site that provides useful services, users may be far more likely to register if they’re first allowed to experience the web site drawn in and engaged and then asked later about who they are. In fact, TurboTax 2005 allows a user to work through an entire tax form before creating a username.
    如果一个提供有用服务的网站需要注册,用户也许会很喜欢先体验一把再注册的方案。