Experience10  Creative, Develop, UX, Wireframe, Productivity

#UX & Design

你不知道的metro design细节 – Grid

metro设计风格所定义的页面由网络系统(Grid)组成,其中所定义的每个单元的大小是20x20px。而每一个单位格中又以5x5px为单位定义更小单位的子单元。在一个标准的1366×768屏幕上,单元格数量为68.25×38.5

内容区域的上边距为7个单元格

页面顶部的高度为5个单元格

页面的左边距为6个单元格

紧凑的列表项目中的二个元素的间距为一个单元格

适中型列表中的元素间距每隔一个元素,对齐到下一单元格 (1.5个单元格)

宽松型列表中的元素,间距为每二个单元格

 

January 11th, 2012 at 4:40 pm by . 0 Comments
filed under Metro UI, UX & Design, WP7

Syfy for XBOX 上线

有XBOX的童鞋应该自动收到了今年的Metro UI更新。如果有兴趣可以下载我们团队开发了近半年的Syfy官方XBOX App。基于全新的XBOX Metro UI设计。这里是官方说明

December 27th, 2011 at 1:45 pm by . 0 Comments
filed under Metro UI, UX & Design

设计Metro应用

当计划一个Metro应用的时候,尽可能的去思考你的应用给你的用户带来什么样的体验,而不是考虑这个应用会有什么样的功能。如果你还没准备了,你可以先阅读What are Metro style apps?

1. 定义你的用户体验目标

假设你正在创建一个照片相关应用。你会思考你的用户使用该应用的原因,如保存和分享,以及你会设想你的用户希望通过照片来回忆及与朋友交流,以及保证照片的安全性。这些正是你的应用的独到之处,你将这些想法作为你的用户体验的核心目标贯穿在整个设计过程中。

常用的技巧包括:脑力风暴、关系流程图及脑图。

你的应用到底是做什么的?从一个最广泛的问题开始,列出所有你设想的你希望用户使用你应用的原因。例如,你想创建一个帮助人们设计旅程行程的应用,当你设想这样一个应用的时候,你也许会产生下面这些想法:

  • 应用将帮助你获得将所有你的航班到达的城市的地图来帮助你旅行。
  • 找到你要去的城市中的有趣的活动。
  • 帮助你创建一个可分享的参加活动的列表,或是一定要参观的景点列表。
  • 帮助你整理照片并与朋友和家庭分享。
  • 根据航班价格获得推荐的目的地列表。
  • 找到你的目的地的餐馆、商店和活动以及折扣信息。

你的应用程序好在哪里?再回去看看你的想法,看看这 些场景真的能让你的应用程序出色吗?挑战一下自己尝试去除一些场景,专注在唯一的一个真正重要的场景上。在整个过程中你可能会获得无数个想法,但一定要学会对这些想法说“NO”,才能帮助你获得最好的想法。

你会专注在单一的使用场景,来向人们介绍你的应用到底是什么样的,例如:

  • 我的旅行应用最棒的卖点是能让我的朋友与我一起协同创建团队出游计划。
  • 我的健身应用最棒之处是能让我和朋友们记录我们的健身进度,目标以及分享。
  • 我的购物应用最棒之处帮助我的家庭组织超市购物活动,不会让大家重复购买或漏掉重要的物品。

这便是所谓的“最棒”之处,来帮助你对你整个应用程序的设计和开发做出有用的决策。专注在用户的使用场景,小心别陷入了过份多的功能的设计。应当永远去考虑,你的用户在做什么,而不是你的应用在做什么。

2. 决定应用与用户的交互方式与流程

流程指的是你的用户在使用你的应用达成目标的一组交互场景。每一个流程应当充分展现所谓的“最棒”之处。最好的应用程序应当是让用户简单学习并以最少的步骤完成目标。

技术:

  • 关键流程图:从哪里进入,哪里退出?
  • 故事板流程图:用户在你的UI上如何操作及完成交互的?
  • 原型:使用快速原型进行试用测试。

用户能做什么?例如,你的旅行应用是关于“帮助我和我和朋友协同创建团队出游计划”。让我们列出会有什么样的情况发生:

  • 创建行程的基本信息。
  • 邀请朋友加入行程。
  • 加入朋友的行程。
  • 查看其它人推荐的行程安排。
  • 将目的地及相关活动加入到行程中。
  • 编辑和评估别人创建的目的地及活动。
  • 分享行程给朋友,让他们follow。

3. 决定如何设计应用的界面

这是有关于如何把应用最基础的事情做好。现在你已经知道你应用的最棒之处,以及你将提供什么样的流程,接下来可以开始思考一些基础。

应当如何组织你的UI内容?大部分应用内容可以以成组或是上下层级的方式来组织内容。你所决定的应用程序第一层应当完全与你所思考的应用程序最棒之处相吻合。最棒的内容最先让用户看到。

使用旅行应用举例,有多种方式来组织行程单。如果应用的专注点是有关发现有趣的目的地,那么你也许会按兴趣点来组织你的内容。如冒险、阳光行程或浪漫旅行。但,因为应用程序是针对于与好友一起制定行程,所以更好的思路也许是根据你的社交圈来组织,如家庭、同学或同事。

当选择了使用何种方式来组织内容的时候,也就是选择了有多少个页面或是视图来展现你的应用。在Microsoft Visual Studio 11 Express中提供的一些项目模板能帮助你使用一些通用的UI设计模式来设计你的应用。

你需要什么样的UI外观和操作?评估你之前的流程,针对每个流程画出用户在每个步骤中能进行的操作。

例如这个有关“分享行程给朋友,让他们follow”的流程。我们假设用户已经创建了行程。那么分享就需要以下的一些步骤:

  1. 用户打开应用程序,查看到他创建的所有行程列表。
  2. 用户点击其中一个想分享的行程。
  3. 显示出行程详情。
  4. 用户通过UI上的点击,开始进行分享画面。
  5. 选择朋友的电子邮箱。
  6. 通过点击UI来完成分享操作。
  7. 应用在行程的细节中展现了她刚分享给了哪些朋友。

通过这样的过程,你已经看到了你的UI将会如何呈现(就像给朋友写一个如何使用你应用的教程一样)。你同样可以继续减少一些步骤。也许用户在分享前根本不必看到行程详细。越简单越方便使用。

查看 Choosing the right UI surfaces 去了解如何使用不同的UI样式。

如何组织操作?描述出每个流程中的步骤来找到你需要设计哪些必要的操作。然后思考这些操作命令如何体验在你的应用程序中。

  • 永远尝试先使用内容。只要可能,让用户直接与内容进行操作,而不是添加各种新的按钮。例如在旅行应用中,让用户直接在行程列表中拖动单个行程来移动位置,而不是选择某个行程,再使用上下按钮进行操作。
  • 如何不能使用内容,再尝试放置按钮:
    • 放置在app bar上:尽可能将按钮放在app bar上。app bar一般会隐藏起来直到用户向上滑动。
    • 放在应用的画面上:如何用户的操作集中在UI上的单个操作上,可以将这些操作以按钮或其它方式呈现在画面上,当然,越少越好。
    • 关联菜单上:可以使用关联菜单操作剪贴板(Cut, Copy, Paste),或一些不能直接被选择的操作(如在地图上放置记号)。

设计每个视图的界面。Windows Developer Preview支持横向、纵向、Snapped及fill view。用户应当能在任何时候使用这些视图,而你也会希望你的应用在任何一个视图下都能表现良好。这意味着你需要针对每个视图都精心设计UI元素及实现。当你做到这些后,你的应用程序在视图间的切换会非常平滑。

了解更多,查看 Supporting viewsChoosing a layout, and Guidelines for snapped and fill views.

4. 决定在你的流程中如何使应用及Windows提供的功能特性

如何让应用脱颖而出?

你已经知道了如何设计符合你用户需求的应用,现在可以尝试看看在Windows平台上所提供的特有的功能,看看哪些可以被你的应用程序所使用。并确保每一个实施都符合相关的用户体验规范。

通用技术:

  • 平台调研:找到哪些功能是平台能提供给你的。
  • 关联流程图:从流程图中找到与这些功能连接的地方。
  • 原型:确保这些功能是你所需要的。

App contracts 你的应用程序可以通过app contracts功能来进行跨应用、跨功能的用户流程操作。

  • Search 让用户能够在使用操作系统的时候从你的应用中搜索相关的内容,包括从其它应用中操作。
  • Share 让用户分享内容给其它人,或接受从其它处来的分享内容。
  • Play To 从你的应用中播放媒体内容,或是从其它设备及家庭风格中获得内容。
  • Settings 让用户使用系统标准的设置面板来进行应用程序级别的设置工作。
  • File Picker and Picker extensions 让用户读取或保存文件。同时你可以提供相应的扩展,让其它应用程序能直接从你的应用中读取内容。

更多信息,访问 Windows application contracts or File Pickers.

针对不同设备的视图 Windows Developer Preview让用户能够充分使用你的应用。你也希望你的应用能够在任何设备、分辨率及设备方向上完美呈现。了解更多designing for different form factors.

触控优先 Windows Developer Preview提供了独特的触摸体验与鼠标控制能完好的结合。

例如,semantic zoom是专门针对大量内容的触摸操作进行优化的交互方式。用户可以平移或滚动来浏览内容,然后放大进入每个分类了解更多详情。你可以使用这种方式让你的信息呈现更视觉化而来替代传统的tab式导航。

当然,你可以使用更多触控的手势来完成更多的操作,如rotate, pan, swipe, cross-slide等,了解更多有关touch features.

新鲜的体验 在使用标准体验的情况下,让用户感觉到新鲜感:

  • 动画 使用我们的动画样式库来保证画面的流畅。帮助用户理解画面间的视觉转换。了解更多animating your UI.
  • 通知 使用通知让用户第一时间知道与特定时间有关的,或是与其个人相关的内容相关的即时消息,从而引导用户返回你的应用程序。
  • content tiles 将有趣和内容放置在开始菜单的tiles上,当用户点击tiles时,直接直接到相关的内容页。
  • app tiles 提供新鲜和相关的更新,让用户返回到你的应用中。在下一章节将了解更多相关内容。

个性化

  • 设置 让用户能够保证应用程序有关的设置。保证用户能使用统一的设置面板来进行操作。
  • 移动 让应用使用起来更方便,无论用户在使用家庭电脑或移动设备,应用都应当保持着一致的设定和状态。
  • User tiles 让应用本身变得更加个性化,如使用用户自己的图像。

最大化设备能力 保证你的应用能够使用当下设备的最大性能。

  • Proximity gestures Let your users connect devices with the human gesture of a ‘tap’ to light up experiences where you expect multiple users to be physically nearby (multi-player games). Learn more about proximity gestures.
  • 摄像头 连接设备摄像头,让用户可以视频录音或是头像拍照。
  • 加速器与传感器 当下的设备有众多新的传感器可以使用。你的应用可以来调节亮度,或是针对显示器的变化来调整UI,或是对其它物理动作做出反映了解更多sensors.
  • 地理信息 使用地理信息来帮助用户获得周边及地图的信息,或是周边的朋友,活动以及目的地等信息。
  • SMS
  • Print
让我们再返回旅行应用的例子。为了更好的帮助应用程序达成目标,你可以充分的考虑使用某些特性,如:
  • 分享: 用户可以将他们的行程通过社交网络分享。
  • Snapped, filled views: 用户可以将旅行应用放在画面的一边 ,同时在另一边上网冲浪进行订酒店等操作。
  • 搜索:用户可以搜索其它公开的行程信息,并引用到自己的行程中。
  • 通知:当同伴的行程更新时,用户可以获得提示。
  • 设置:用户可以配置自己的行程的稳私信息等。
  • User tiles: 用户可以使用自己的图像来代表自己。

Explore the Developing Metro style apps and Differentiating Metro style apps sections for more ideas.

5. 建立良好的第一映象

设想一下当用户第一次打开你的应用程序时所获得的信息。回到我们所谓的“最棒之处”。即时你没有办法在第一时间就能让用户体验到最棒之处,但仍然可以尽力做到一些:

Tile & 开始画面 tile是应用程序的脸面。试想在众多应用程序的tile中,为什么用户想要运行你的应用?确定你能够品牌化你的应用。确保tile能及时刷新,让用户一次又一次的返回并使用你的应用。

开始画面 开始画面是最好的展现应用品牌的地方。

首次启动 当用户注册和登录你的服务的时候还能看到什么?尝试展现你的应用程序的特性和信息。考虑展现一些样例内容让用户能够理解你应用的意图。

首页 首页是每次用户都将来到应用的入口。内容应当简明,专注以及第一时间告之用户你的应用所能达成的意图。让这个页面专注在最棒的一件事情之上,相信用户能够继续深入探索你的内部。尝试在首页解决过于混乱的问题,而不是解决内容可发现性的问题。

6. 结合设计规范与需求来校验你的设计

在你进入实现开发之前,你应当校验你的设计或是原型以避免未来不必要的重复工作。每一个功能都有相关的用户体验规范来帮助你进行优化。另外商店中的一些需求也来帮助你更好的在Windows Store中销售你的应用。你可以使用Windows App Certification Kit来进行技术测试。

使用 Checklist for design 来帮助你专注在最重要的特性上。

December 23rd, 2011 at 11:56 am by . 0 Comments
filed under Metro UI, UX & Design, WP7

什么是Metro风格的应用

Metro风格的应用是针对你的用户需求而设计的全屏幕应用程序。他针对其所运行的设备所设计,针对触摸屏幕及Windows用户界面优化。Windows帮助你与你的用户进行交互,从而使用户与你的应用产生互动。本文将帮助你了解Metro风格的应用设计以及一些基本的开发技巧。

针对你的用户所设计的应用

当用户使用Metro应用时,他应该能体验到:

沉浸式:你的Metro应用应该是全屏幕的,让用户沉浸在你所创建的体验之中。在这种全屏体验中,用户能极力享受到他所喜爱的内容。为了充分展示你的内容,我们移除了不是必须的操作系统的边框。你的应用程序就是Windows的核心体验。请充分利用屏幕的空间来设计你的应用程序,但不要让他过于杂乱。让用户专注于他需要专注的任务之中。

增进与活跃:你的Metro应用能帮助用户找到他们关注的信息。Live titles的更新帮助用户在第一时间找到有用的兴趣,并引导用户进入你的应用程序。

开始画面帮助展示你应用最好的一面。App tiles上呈载了实时的状态与更新,来鼓励用户进入你的应用。当我们设计tiles,我们应当:

  • 突出你的品牌。app tile能帮助你视觉化你的品牌。应当设计得有足够吸引力以及与其它应用的差异化。
  • 在app tile上尽可能的展现用户关注的信息以及更新。你会寄希望于用户经常来查看你的tile,查看最新的应用中的更新。你寄希望于这些更新能吸引你的用户点击使用你的应用。考虑周全的信息设计能充分增进你的用户与应用的联系。

有关更多的设计app tile的信息,请查看 Guidelines and checklist for tiles 以及 Guidelines and checklist for notifications.

保持连接:你的用户能够分享内容到他的社交网络或设备上。了解更多有关Searching, sharing, and connecting (JavaScript).

交互性与触控优先:你的应用应当为触控以及自然操作方式而设计,Windows会自动针对键盘、鼠标及图像缩放进行处理。了解更多,请访问Designing for touch 以及 Responding to user interaction.

自动适应性视图:应用中的控件应当支持流式布局,这样内容会自然的根据不同的设备进行适应性排版。相应的平台上提供了自动缩放功能能帮助我们处理多分辨率以及屏幕方向问题。了解更多Designing for different form factors.

可信赖的应用:用户可以安全的下载、安全、使用及更新,而不会影响到其它应用。

为多任务而设计

当应用程序全屏幕运行时,Windows同时也能支持多任务操作。

  • Snapped View。用户喜欢同时做多件事情。他们希望使用你的应用时同时还能聊天、上网、看视频或其它,所以请让你的snap view能满足用户的需求,同时在Snap以及非Snap状态时能流畅的切换。
  • Filled View。用户可能将其它应用作为Snap View而把你的应用作为Filled View。注意考虑到水平方向减少面积时你的应用如何更好的适应。

为你定制的开发者体验

开发者同样能受益:

选择你钟爱的开发语言:你能够使用JavaScript加HTML5以及CS3,或C++/C#/VB加XAML。

新的布署方法:你的用户可以安全和简单的安装和删除应用。你无需过多的考虑系统性能。

  • Metro应用发布方式:你的应用程序将使用全新的Metro应用的发布方式,安装、更新与删除的过程非常干净,不会改动操作系统。
  • Windows Store

新的UI与触控输入:你可以直接按你用户所能接受操作方式来设计你的应用,所有的UI控件都直接支持这些操作方式。

本地化:你可以开发一次即可布署应用到不同的区域和语言。不仅如此,Windows Developer Preview提供的API能让你的应用响应用户的语言和文件设定——如日期、时间及货币格式,只需要简单的开发。最终的结果能让你开发国际化的应用程序。了解Globalizing your app.

开发工具:Microsoft Expression Blend与Microsoft Visual Studio 11 Express的预览版目前免费提供,你将获得完整的开发环境和模板来设计、开发、打包、调试及布署你的应用。

原文:What are Metro style apps?

December 22nd, 2011 at 6:34 pm by . 0 Comments
filed under Metro UI, UX & Design, WP7

UX设计师礼物包2011

这里整理出了2011年与UX有关的大全,包括软件,免费或收费的。可下载的资源,还有T恤书籍等内容,有兴趣的可以下载。而且在原贴中还能找到10,09,08等其它过往年份整理的UX资源:

http://www.nickfinck.com/blog/entry/gifts_for_user_experience_geeks_2011/

December 14th, 2011 at 6:19 pm by . 0 Comments
filed under UX & Design

关掉PS 拿起铅笔:创作缩略草图

screenshot
在Web UI之前,印刷设计师们使用一种称之为缩略草图(thumbnail sketching)的方法来尝试表达及完善创意。这种方法在现在的PC工具时代似乎已经失传。

这里我们将简要介绍什么是缩略草图,以及一些技巧来帮助把这门技术应用到你的工作之中。

在画线框图之前,先草图

screenshot
线框图(wireframing)的话题由来已久。不需要回避这个话题,许多设计师以及UI/UX专家们认为线框图是一个最基本以及整个项目中第一个步骤,让我们能专注在基础的架构上而不是多余的设计风格上的干扰。

另一种定义说的是线框图帮助我们关注于页面如何在最基本的层面上被构建。实际上,我经常在想为什么大家没有讨论比线框图更久远和成熟的一门兄弟方法:缩略草图。

缩略草图是类似于线框图的方法,只是他比线框图的所谓基础上,更加基础。让我们看看什么是缩略草图。

什么是缩略草图

名字听起来比较有趣,但你仔细去想的话,你会知道缩略(Thumbnail)是完全不搭的一个概念。例如当我提到缩略图相像(Thumbnail Gallery)的时候,你会自然想到这是一个有很多小图片组成的一个相册的概览页,点击之后能看到各种大图。

正是这种含义,你可能能猜到缩略草图可能是一种小尺寸的手绘图。缩略草图的意义正是通过很短的时间在纸上创作大量的创意。简单说他是一种视觉化的脑力风暴的方法,当你不需要担心各种困扰和细节调整的时候,创作尽可能多的可能性。在某种形式上,他很接近线框图,只是更小,更快速一些。一般来说设计师可以创作很多小草图,然后再选择几个最好的继续跟进线框图。

screenshot

如何去做

开始创作的话,只需要拿起一个铅笔先画几个简单的空方块代表你的浏览器外框、页面边框或任何你需要工作的东西。你甚至可以找到一些可以打印的模板来帮助你快速开始。

screenshot

现在起 ,你可以开始你的创意了。这并不需要你专注于你的手头画功,相反你需要专注在如何生成创意。缩略草图是一个快速的甚至可以说是偷懒的作法。使用最基本的形状,不要在单一图形上花太多时间,只要你找到了你想要的基本构图或创意是什么样子,就可以停止继续下一步。

为什么这样更好?

screenshot

你能从纸上的小草图中获得什么呢?你可能会吃惊,作为设计师,我们很容易陷入到狭窄的认知中,在使用电脑创作的过程中,我们太容易创作一个接近完成的事物。

问题在于当你花费时间在一个创意上的时候,你会不自觉的在心理上保护你的创意。不幸的是,你的第一个创意通常来说并不是你最好的。

当你已经把你的主意开始付出实现的时候,放弃他再从事一个新的创意就变得更加困难。你继续在旧的创意上发展因为你的大脑已经卡住了。就算你没有这样的问题,你还是会花很多时间去发展新的创意。

这种方法的缺点是你并没有将发展创意作为一个重要的思考。“重要的思考”是指真正有价值以及逻辑上合理。相反的,你可能只是有三个创意,然后在这三个里面选择。你可能有办法想出10个更好的主意,甚至有机会比这三个更好,但你没有时间去完成。

使用缩略草图方法,你有可能真正发挥你大脑的作用,并强迫你自己开始真正意义上的创意工作,创作更多更丰富的选项。使用这种方法你可以找到更多的创意并仔细评估哪种方法更合适,并继续推进。

节省时间?

有些人可能认为按预定的设计时间表和节奏,已经足够完成最终的设计工作,不需要再花费额外的时间!但如果能成功的实施缩略草图的,学有可能在未来节约更多的时间。

首先,你不需要花一整天做这个工作。有时候生成创意可能只需要花十分钟,二十分钟,三十分钟,这完全取决于你。更重要的是,这个步骤的工作让你有机会在设计最终开始创作前能够审视和评估。你会发现你后面的设计更加快速因为你已经想得足够,而且知道哪个是最好的主意。

并不仅是排版?

screenshot

一般来说,当我提到缩略草图的时候,可能指的是有关排版方面的创意,其实这种方法可以作用于任何类型的设计。例如,LOGO的草图设计在开始可能就是一种很粗略的草图设计方式。

拿起铅笔,开始创作上百种创意似乎是非常自然的一种LOGO设计的方式,所以为什么不这种技术到其它的设计领略呢?

招贴、网页设计、手册、名片、应用程序界面、字体设计,所有这些类型的设计都可以从几分钟的缩略草图开始。

缩略草图的技巧?

screenshot
现在你知道了什么是缩略草图以及如何应用他到你的工作流之中,让我们用一些技巧来帮助你更好的开展。

保持低精度

我们中的一些人非常善于绘画。但有一部分人却非常惧怕铅笔因为无法表达绘制出完整的草图。

但在我们现在的例子中,这些不善于绘画的人也许更有优势。如果你不能画,太好了,你非常适合创作缩略草图。那些非常善于绘画的人们可能会花更多的时间去创作缩略草图因为他们太追求每一条直线是否平直,以及圆是否更圆。

我们只需要知道的是,应用这种技术的关键在于量而不是质。我并不是反对完美的草图,事实上,我非常喜欢看那些顶级艺术家的草稿,但你只需要确定你的目标是将这些创意从你的脑子中转到纸上即可。例如,你只需要画一个长方块,事后你记得这个代表着这上标题文字就好了,而不需要再去逐字字句的写上文字。

向前推进

另一事需要记住的是避免花太多时间去打磨一个创意。如果你画下了一个创意然后你觉得并不喜欢它,千万不要擦掉再重新开始。简单的放在一边继续你的下一个创意。也许几小时后你再回头看的时候会发现这个创意也许不错。

越多越好

当你绘制创意时,不要在5到6个的时候就停止。你是创意专家,你应该有更多的方向。我知道设计专业的教授有时候会让学生每次为同一个项目创作25个或更多的草图。这样的数量会更加激励创作。

不要画同一个东西50次

当我们开始创作更多的草图的时候,你的第一直觉可能会使得你大部分创意看上去都差不多。这种情况非常常见。努力去让大脑发挥 他的作用,去创作更多的独特和不同方向的概念。记住现在这个阶段只是脑力风暴阶段,所有的一切都不一定是不好的创意。更疯狂,出格一些。

完成时注意留存

如果可以,尽量把这些画下的草图留下来供以后参考。当你更深入的进入到项目中的时候,你也许会回头再看看之前的创作。你也许已经失去了专注点你需要看看这些开始的主意来帮你找回来,你的客户也有可能不喜欢你的创意你可以再回到草图中寻寻宝。

screenshot

我常干的一些事情是找一支压感笔在我的iPad上使用像Adobe Ideas或iDraw一类的软件创作一些草图。使用数字产品记录我的草图对我来说非常有帮助,因为可以帮我留存这些记录。然后再导入到Illustrator或Photoshop中进行下一步的处理。

总结

让你最终的想法画成缩略草图也许在一开始比较烦恼,但是一代你这么去做了,你会发现你会非常享受这个过程。对我来说,一个项目中最美妙的阶段就是开始的时候,在我开始为细节烦恼前,去创作无数的可能性。

也许缩略草图并不适用于每一个人。如果你不觉得这个有帮助,那就不用浪费时间。但是,我推荐你在一些项目中做一些尝试。看看你是否能够真正开动脑子发现一些更棒的创意。

如果你使用这个方法,不妨留下链接让我们看看你画的这些草图!

照片版权:Dan Lurie, Tobias Soft (1)(2), nunileJeremy KeithShawn Campbelland CannedTuna.

 

原文链接:Design shack

翻译:Experience10.com

 

 

November 25th, 2011 at 2:43 pm by . 0 Comments
filed under Uncategorized, UX & Design

如何成为设计领导者

一篇很好的有关如何成为设计领导者( Leader)的演讲笔记,摘译自LukeW
  • 管理者(Managers)是被指派的。领导者(Leaders)往往从团队中自然形成。
  • 你如何知道你是一个领导者?因为人们经常向你询问问题?寻找建议?领导者能够影响其它人完成目标。
  • 你不知道一个明确的职位(Title)才称为领导者,但你需要获得其它人及组织的尊敬。
  • 有效的领导者能让人们成为自愿者。为什么是自愿者:我发自内心相信他以及他的远景吗?他们重视我及我的技能?我能相信他们吗?
  • 有效的领导者知道团队成员的风格。你有什么假设及如何去执行?你如何才能做到最好?喜欢大创意还是专注在小事情上? 我们每个人都有一定范围的技能长处,寻找能够弥补你短处的人。
  • 许多公司寻找UX领导者。但这类人并不是很多,这使得公司的处境很难。
  • 许多公司寻找“独角兽”-那些能一手顶天的人。其实这样公司根本不知道自己在寻找什么。
  • 当公司找不到合适的候选人时,往往会从团队中找有潜力的人来培训。但这可能要花10000个小时才能使其成功。几乎是5年。
  • 每3-4个设计师应当需要一个资深的指导者和领队。
  • 并不是每个高级设计师喜欢指导或善于指导别人。
  • 在把一个很好的主意放到最终用户的手上的时候,有太多的障碍。而打破这些障碍正是一个领导者的职责。

November 25th, 2011 at 11:01 am by . 0 Comments
filed under UX & Design

WP7新书已经上市

和微软的MVP们合著的一本WP7的书已经上市了,在里面负责了二个章节,还有封面设计。欢迎大家捧场。

Windows Phone 7应用开发指南

http://product.china-pub.com/198693

October 18th, 2011 at 1:33 pm by . 0 Comments
filed under UX & Design, WP7

20个用于WP7原型与设计的工具

列举了20个用于原型与设计的模板和软件插件,其中还包含了年初我们团队制作的一个omnigraffle的Stencil,不得不支持一下

http://microsoftfeed.com/2011/20-free-prototyping-mockup-and-wireframing-resources-for-windows-phone-7/

 

September 23rd, 2011 at 5:43 pm by . 0 Comments
filed under UX & Design, WP7

如何成为网页设计专家

你是否想与客户侃侃而谈让他们认真的对待你的观点,因为看上去你就是个专家?如果你的答案是肯定的,那么恭喜你,有许多人与你一样。如果希望有一天能真正做到,那么你需要退后一步再想想,成为专家对你来说为什么如此重要?

为什么我们都希望看上去像个专家

我们都希望成为专家是因为我们希望我们的观点能够被其它人认真对待。被人尊敬,让自己更有价值,也为了满足自己的自负,当然,最主要的是我们希望自己能成为最棒的,同时有自己独特的有力的行事方式。

无论如何,就像我们接下来要讲的,成为专家绝不仅仅是让别人听从我们。如果我们仅能做到这点并不能真正意义上达到我们的期待和被其它人所认可。

让人尊敬并不是我们成为专家的唯一期望。有些人认为也许专成主家会让我们有更多的工作机会,以及更多的话语权。但不幸的是,有很多情况下,许多专家并没有比人懂得更多,甚至在他们熟悉的领域,并没有获得更多薪水。成为一个小众的专家对职业上的提升并不大。

尽管如此,被视为专家的能够帮助我们与客户工作,并让我们有创造更高质量工作的潜力。那么,如何让我们成为专家呢?

如何让我们成为专家?

在 《异族》(Outliers)一书中,作者Malcolm Gladwell建议成为一个专家(高手)在通常情况下需要花费近10000小时的练习与实践。对于大多数全职工作的网页设计师来说,这相当于整整4年不休假的8小时并有成效的工作。

我觉得10000小时的值得怀疑之处,我能看见将这种理论到一些类似于乐器训练,或是体育运动中也许会有效,但我不确定将这种理论应用于其它如网页设计。如10000小时的Photoshop使用经验不会让你成为网页设计专家,及充其量仅仅让你成为一个Photoshop高手。

当然,Gladwell的说法在某些程度上是有一定道理的。成为专家,你必须需要时间与经验。

Facts in How To Become A Web Design Expert

很多人宣称自己是专家,但只有仅少数的人真正投入了数千小时的努力。图片来源 Brett Jordan.

时间和经验

无需怀疑的是专业技能必须通过花费时间并持之以衡的练习来达到。绝不是一夜灵感闪现,没有任何捷径去达到高水平的技能。随着经验的不断丰富,学得越多,越会发现自己更加需要学习。

当然,你可以说网页设计领域的变化非常之快,四年前的知识在现在几乎毫无用处。但是我不觉得这是个问题。在我的经验之中,尽管技术在变化,但使用技术的人不变。在开发一个网站的时候永远是在与用户或是用户体验中的细节在打交道。同时,数年的经验能提高你解决问题的能力。尽管挑战是全新的,你所解决问题的方式将会越来越熟练。你积累的理论知识以及工作流程使得你更出色。因此,数年前学到的知识在今天仍然用得上。

偏执般激情

我并不是说经验就是一切。例如,我不觉得你应该花上数年的时间给某人朝九晚五打工就能获得足够的经验。相反,永远寻找值得学习的内容,在你的企业中富有创造性的工作,最重要的是需要有激情来对待你所注的事物。

以我自己来说,我的事业从IBM开始,数年后我觉得并没有在技能上有多大提高。许多在我身边的人并不能充满激情的工作。没有激情,就没有学习新东西的渴望和推动力。

我相信对网页设计拥有偏执般的激情是成为专家所必需的。

另外,我IBM的同事们从不愿承担风险。而勇于尝试以及偶尔的错误都会是成为一个专家所必须经历和学到的

犯错误的重要性

成为一个真正的专家不能回避一个事实:你必须愿意去犯错误,而且犯非常多的错误。

不幸的是,我们并不是生活在一个表扬失败的社会文化之中。我们需要成功人士。但成功并不光是灵感闪现,而是努力和汉水。Winston Churchill说过:

事业上的成功和成为一个专家不光是需要你经历过一两次失败,而是不停的经历。

失败是我们成过专家的一个重要环节,Charles Willson说过:

不经历失败,我们不能学会做事情的最佳方式。从他人的失败中也可以学到很多,但没有什么比得上我们自己亲身经历过的失败。

我们需要战胜我们对失败的恐惧。当项目中出错时,人们总是会本能的有二种反应。有些人不停的纠结其中,否则问题的存在,不愿意接受投入但不产出的结果,这时候重要的是学会什么时候放手。另外一些人则尽可能的逃离这些问题假装其从来没有发生过。但这样意味着你永远不会从你的错误中学到东西。我们需要在最后花上一些时间去审视我们项目中的错误,并从中学到东西。这个过程很难,特别是当你与已经不郁快的客户打交道的时候。

而从没有经历过失败的人,他们可能胆心不愿去尝试,担心他人的批评,或在一开始根本就对成功没有任何渴望。

怎样确定你已经是一个专家

有时候并不是人人都认同你是一个专家。光有足够的知识是不够的,我们还需要有人认同我们所获得的知识。

这可能是你会经常经历的问题。你已经完成了你的10000小时的学习,也从错误中学到了。尽管如此,你的客户或老板并没有认同你所累积的知识与经验。

如何说服他们你已经是一个专家了,应该认真考虑你的建议呢?

展现一些谦虚

第一步要做的是不要过份表现我就是专家的态度。真正的专家往往是最后一个称自己为专家的人。事实上,专家往往会积极承认他们的知识的有限从而带动其它人更好的接受他们的观点。

人们往往会怀疑自称专家的人。让你自己的知识替你说话比起主动引起别人的注意更有效。直接说自己是专家显得并不明智,你可以用多种不同的方式来暗示这一点。其中很重要的一种方法是使用情景。

用情景展示你的优点

当你把一些现代艺术绘画从画廊中拿下,放在小学时,很有可能被误认为是小孩的涂鸦。因为环境影响了事物接受时的辨标准。想象一下有时候经理们会非常认真的听从某些外聘顾问的观点,而忽略自己员工的观点,尽管二人说的都是同样的事情。因为付了顾问更多钱,所以他们的观点冒似更加有价值。

你也许没有办法提高你的劳务价格;尽管如此,你可以改变你的表达方式,让人们提高对你的价值认同。

就像画廊中的作品一样,你的专业技能在某些合适的场合下会被认同。例如,相对于在会议室里发言,或是只在自己工位上表达观点来说,在会议室里可能会更加有份量一些。同样,如果你的专业知识来自某些书本,这会比你在会议室里夸夸其谈更加有价值得多。

Paul-boag-fowd in How To Become A Web Design Expert
作为一个专家我经常犯错误,因为我站在舞台上. 照片来源 Marc Thiele.

并不是人人都有机会出书或是在会议上发言。如果这样的话,也可以自己出书,或是做一些播客、博客或是参与一些开源项目。像专家一样展示自己比你想的要简单一些。

如果获得会议演讲或是写书的邀请的话,意味着你的技能已经被某些人认同。会议组织者和出版商就好像是质量保证,如果他们认同你,那么人们会在开始就认定你所要讲的事情。

当然,情景并非一切。更重要的是你所表达的观点和如何去表达你的观点。

风格和主旨

写书、演讲、博客或播放比起简单的交谈来说更有效果。因为这些比起交谈来说,表达结构和方式更加缜密严谨。

表达自己的重要性。当有些事情对你来说非常明确时,其它人可能不这么看,特别是一些重复出现的问题。当客户让你把他们的Logo变大一些或是多些留白时,你必须要精心对待这些小事。你会很容易不耐烦或是无所谓因为这样的事情总是在发生。但是细心的考虑你的应对方式和对策会使得你更具说服力。除了主旨,你辨论和交流的风格同样重要。专家应该充满信心,交谈时富于表达和权威性。听众并不会因为你的意见不同而不爽,只要表达得当,他们会转换他们的观点。如果你想被认同为一个专家,了解你自己、放松并充满信心的表达。

不幸的时候,有时候问题还是发生,因为另一方早就准备好了自己的观点。

过多偏见

在你现有的老板和客户前开始充当专家的角色可能是个挑战。特别是你以前的曾是初级员工,他们对你的态度不会一夜改变。幸运的是,你可以做一些有效的工作来帮助你转换角色。

第一,为你的观点提供有效的证据。当你老板担心你的提议上不了台面的时候,给他看看有效的证据,如下面这个滚动条行为报告。

Unfolding-the-fold in How To Become A Web Design Expert

引用一个研究结果能够增加你的内容的可信度。

其次,引用一个已有的专家将有效支持你的观点,例如有人曾写过有关滚动条这个案例的相关报告

这些技巧不光能支持你的观点。同时他们能够充分的表现你有广泛的阅读与研究。同时,你在做这些的同时也加了自己的可信度,像专家一样思考问题。你离专家已经一步之遥。

当然,没有办法能快速的消除偏见。这对于总是与相同的人工作的人来说非常困难。但通过一段时间,有效的展示自己的专业知识和使用这些技巧,他们最终能改变他们对你的看法。

能力越大责任越大

本文的关注的是有关如何成为专家,在结束前,我想说说当你真正成为专家后意味着什么。

当你从客户,同事及老板那里获得尊敬后,还会怎样?成为专家不光光是一段自我之旅。更多的是有关为他人服务。当你成为专家后,你能更好的为你的客户服务,为你的公司提供更多价值,促进你的行业发展。如果只是想获得大家的爱戴与尊敬,那么你永远不会真正达成你的目标。人们会意识到你可能只是在满足自己的虚荣心从而忽略你。

也就是说,必须认真对待我们的工作。如果不认真对待,好网站可能变差。我确定你肯定有过与人分享过有关网站越做越烂因为别人没有听取你的观点。但是多讲讲你的一些有关说服老板和客户,认真的对待你的观点的故事,可能更有益处。

封面图片版权: Aural Asia

原贴出处:

http://www.smashingmagazine.com/2011/08/25/how-to-become-a-web-design-expert/

翻译:

http://experience10.com/

 

August 31st, 2011 at 3:17 pm by . 0 Comments
filed under UX & Design