Archive for the 'UI' Category

The lost art of user experience

看到这篇文章不错,暂时没有精力翻译成中文,大家凑合着读吧:

User interface design is my favorite part of the development process. The problems it poses are the most interesting, and thinking up solutions is a form of creative expression. Users consume our applications through the interface - one chance to either deliver a satisfying experience or fail miserably.

It is a topic I have very strong and passionate opinions of, and motivated by this beautiful prose by Jono over at Not the User’s Fault, these are my guidelines for user interaction design:

Know your users

The first step in interaction design is to know who it will be interacting with. Users can be profiled on many criteria, such as age, technical orientation, vocation, cultural background and more. The user profiles created from segmentation of those criteria are called Personas.

While defining Personas is a common practice for designing user interactions, it might not be possible to engage in all the steps required to fully understand the needs and tendencies of the users they represent - such as interviews, surveys, focus groups etc.

This is especially true on the web, where projects have limited funds and are very quick from inception to implementation. In this case, experience and common sense rule the day - but it is still important to define the base Personas for which the interaction under design applies. Going through the process brings out some considerations that can influence design decisions.

Watching actual users go through an interaction is very important to learn about its effectiveness. Watching live users in action is the best learning experience in interaction design.

Know yourself

Knowing your users is the most basic step to interaction design. Yet, for each user type and interaction requirements there are as many possible implementations as there are interaction designers. At this point the interaction designer has to make choices for his users based on his experience, attitude and style.

It is sometimes hard to avoid designing an interaction for yourself rather than for your users. It is a natural tendency to try to solve interaction problems in a way that seems most natural to you, however that might not always be in the user’s best interest. Ideally, the interaction designer is a part of the target audience. When that is not the case, observing prospective users is very important to understanding their needs and deciding on the approach to solve their problems.

I believe that good UI design is more intuitive than science, and in that respect it is not so different from graphical design. However the two should never be confused - as I’ve argued in my post on common misconceptions in web development.

Keep it as simple as possible

This old mantra is very much an integral part of a successful user interface. By keeping interactions as simple as possible you will:

  • Have less opportunities to fail your users
  • Give your users less to think about, allowing them to make easier decisions
  • Reward your users quicker (at the completion of the interaction)
  • Increase the chance that the interaction will get completed at all

A large part of the success of web-based services can be attributed to the simpler interfaces they provide compared to desktop solutions. Some of this is a result of technological limitations on the delivery software (ie, web browsers), but it’s hard to argue with the results.

There are several common ways to simplify interactions:

  • Use intelligent defaults
  • Hide optional paths (or form fields) by default (progressive disclosure)
  • Remove unnecessary steps from the interaction (and do so aggressively)
  • Reduce mouse clicks. Make each click do more

This is obviously a very partial list, but it’s a good start.

For me as a developer, the KISS principle is deeply ingrained in my thought process. Translating it into user interface design took some getting used to, but once it happened it became second nature.

In fact, many parallels can be drawn between UI design and software architecture design almost to the point you wonder why most developers aren’t interested in designing interactions (actually I know why - most developers resent users for constantly breaking their code. I know this since a couple years back I had the same mindset).

Don’t break conventions - And if you do, make it obvious

The tools available to us developers have evolved much in recent years, allowing us to create richer interfaces and interactions. With power comes responsibility - we need to apply discretion when using advanced techniques and tools, as to not confuse users. Breaking interface conventions by using new technologies where they are not needed is a mistake.

Conventions should only be broken when they result in a bad user experience or when the alternative is significantly better. The latter is very uncommon when the former does not apply, so be advised.

If you do design a unique interaction (or at least, one that isn’t in common use) - make it as obvious as possible for the user. A user can only begin to understand your new interaction when he realizes that something is different. Disguising buttons as links, hiding drop down menus in small target zones, making background changes to the document without notifying the user - all result in user confusion and a bad user experience.

The more you need to educate the user on how to complete an interaction - the less likely he will bother to. Good interactions are self explanatory.

Interactions should be fun

Users interact with your application since they want to achieve a goal. That goal might be to complete an item purchase, to indulge a curiosity, to gather information and many others. There are several factors that affect the user’s motivation to complete an interaction:

  • How important is the interaction to achieving the user’s goal
  • How unique is your application (ie, how easy would it be for the user to find a better place to achieve his goal)
  • How hard it is for the user to complete the interaction

Negative factors can be offset by a fourth one:

  • How fun is it to progress through the interaction

The fun factor in interactions is often ignored as they are considered strictly functional. It’s no coincidence the word functional begins with fun :) . The fun factor of an interaction increases motivation for completing it - it makes your application more unique and it increases the user’s tolerance for the interaction.

There are several ways to increase the fun factor of an interaction:

Increasing aesthetics

Making your interface prettier will have a positive effect on your users’ perception of it. It’s no secret that most of the illusion of Apple’s superior OS interface is made on the grounds of aesthetics.

Make it gamely

Computer games have some of the best interfaces of any computer software, and it’s no coincidence. You can make your interactions more gamely by adding feedback, reward the user for completing steps and transmit the feeling that the interaction is a part of the user’s journey towards his goal, rather than a functional requirement that he must take care of.

Make the interaction do more with less

The user’s time and patience are limited. Advance the interaction as much as you can with each user input. Make the user feel the interaction is smart and that it is working with him towards completion.

Learn from others

Those are my thoughts on user interaction design, born out of my experience in web development and of my introspection as a long-time user. If you are interested in user interface design, the GNOME Human Interface guidelines are as good as reference as you will find. My favorite web authors on the subject include Jono at Not the User’s Fault, Bill Scott at Looks Good Works Well and Aza at Aza’s Thoughts.

相关内容

blog的版面调整试验

创意纪的pagerank有4,也算不错,算下来800多篇文章而已,每天的直接pv400左右,rss有120来个订阅用户(feedsky)。因此继续做一些简单的试验,来提高pagerank、流量和seo效果。

目前seo这边这里最受欢迎的关键字是delphi2007和北京车展车模图片,很有趣。

昨晚做了一个页面调整的事情,将k2模板的widget方式修改为k2自带的sidebar管理,因为这样我可以设置首页和内页的不同侧边栏。用网站角度来说,尊重用户习惯总是正确的,而用户我想并不想被太多不相关内容影响到,因此之后会大幅度减少内页的侧边栏的模块数量。

另外加了一个评论最多的用户的排行榜,UI呈现上还有点问题,目前看来评论的用户不多阿。

相关内容

我们需要怎么样的软件界面

前一段时间,有篇关于软件交互性带来的问题很有趣,作者部分的认为目前的软件界面的交互设计是存在问题的,比如下拉框,一般称之为combobox的这个东西,其实对于很多用户来说绝对是一个搞不清楚功能的UI元素。

大家看过很多的科幻电影,比如Matrix,有没有注意到其中的用户界面,似乎已经简单到无法想象的地步。最近在看“曙光中的机器人”,我想,等到语音识别技术和人脸识别和动作识别等都成熟之后,电脑不需要那么复杂的软件界面了,电脑会听会看,还需要什么复杂的界面吗?

其实人同时能关注的信息非常少,一屏幕的菜单和按钮,我们根本看不过来。以前在NI项目的时候设想过界面随着功能而调整,问题是实现比较复杂,并且交互性问题还是没有解决。

或许我们可以引入一些简单的交互,如果不能解决简单交互时候需要提供什么给用户选择,那么华丽的界面一样不能解决这个问题,反而会让用户在盲目的尝试中培养挫折感。

原文发表于homebanker

相关内容

网站的社会化和个性化

这个标题很大,不过我想说的事情很小,我们正在作网站社会化的试验。

到底要不要做个性化?到底要不要做社会化?

周围很少人用igoogle,产品是好的,可是我们不需要。

用facebool的人明显要多一些,因为fb给我们带来的社会化效应,作为初级应用的我很高兴看到朋友们让我知道他们作了什么,而我同样将行为分享给朋友。

几年的观察和实践,我想在中国作纯粹的个性化还稍微有些早,我们从小习惯了被动的信息获得,我们的创造力是打了很大折扣的。

社会化是必由之路,网站不是靠网站公司提供信息,而是要加上一层互动,sina如果没有做blog,可能现在已经垮台了,网游从社会化层面来说就还有很大市场。人是要满足自己的需要的,社交需要,自我实现的需要。在满足需要的过程中,总是会有载体。我们要做的是找到人和载体之间的关系,服务于载体,自然也就拉近了和人的关系。

2005年本来就要作一些网站的社会化试验,种种原因耽搁了,现在社会条件更加成熟了,我想是时候可以走出一小步,看看大众们的反映,作为网站来说,提供信息和用户获得信息,本源上就是不矛盾的,我们需要调整的是提供信息的方式和用户获得信息的方式,这两个方式的多元化。

相关内容

中文 Web 阅读体验

摘自这里, 非常好, 值得每一位网页设计师作为规范:

1 正文字体的尺寸应该使用固定的偶数像素单位,如 12px,14px,16px 等,一个例外情况就是 15px 像素也是相当不错的正文字体的尺寸。由于中文 Windows 操作系统及部分的 Linux 发行版使用的是像素字库,因此,这几个尺寸的字体在显示效果上最佳。而在 Mac OS X 上,因为 Mac OS X 使用的是矢量字库,则在各种尺寸下显示效果都不错。另外就是,Mac OS X 的中文矢量字库中内嵌了 12px 的像素字库。

2 blockquote、ol、ul 等 HTML 元素内的文字应该在顶端和尾端留出至少 10px 的空白,在左端留出 20px 左右的空白,右端 10px 左右。在 CSS 语法中这些空白应该使用 margin 方式设置,padding 方式不提倡使用。padding 可以用来实现其他视觉效果。

3 不要随意在正文和标题中使用拉丁等宽字体,除非是为了一些艺术上的用意。拉丁等宽字体应该用在和模拟打印制品或者程序源代码有关的场合。

4 不要在任何地方强制指定使用任何的艺术中文字体,比如“魏碑”之类,这将在超过一半以上的计算机上,尤其是非 Windows 操作系统的计算机上不会显示出任何效果。

5 应该对大部分文字的 line-height 属性进行强制指定,一个经验是,对于正文文字,line-height 数值可以指定为这些文字的 font-size 的像素值的 1.6 倍左右。如果是标题文字的话,1.3 倍左右。

6 中文正文及标题中出现的标点符号应该使用全角方式输入。
7 中文正文及标题中出现的英文及数字应该使用半角方式输入,并且在左右各留一个半角空格。如果这些这些半角英文及数字的左边或者右边紧接着任何的中文全角括号或者其他标点符号的话,则不需要加入半角空格。

8 中文全角空格应该只在标题处使用。此外,在 Web 上的文字的正文的段落开头是否使用两个全角空格是个人喜好问题,反正我不喜欢用,因为这些全角空格有些浪费存储空间,且对快速扫描式的阅读没有太大帮助。

9 在 Web 上的文字,是被人们用眼睛来扫描的,绝大部分都不会被人仔细阅读。

10 中文字体的粗体和斜体显示效果不推荐使用。在大部分非 Windows 操作系统上,这些效果都不被字库或者浏览器支持。而在 Windows 操作系统上,这些效果也不够理想。粗体中文显示效果在 Windows 操作系统上会让部分笔画连接在一起而使得文字难以被辨认,而斜体中文显示效果则会使得部分笔画消失,也非常难以被辨认。如果一定要使用此二种效果,则要么通过 CSS 的 font-weight 方式指定,要么通过 strong 和 em 标签,而不要使用 b 和 i 标签。

11 中文的段落与段落之间应该留出一个完整的空行。即每个段落使用一对闭合的 p 标签在不加 CSS 时候的效果,或者是使用两个 br 标签时产生的效果。注意,这个空行的高度会受到 line-height 的影响,因此不要把 line-height 设置为太高的数值,否则将使得两个段落之前的视觉联系减弱,导致影响阅读时候的思路连贯。

12 如果文字是要被通过 RSS 输出的,则可以考虑在其中加入一份内嵌样式表,对于 ol、ul、blockquote 等元素的样式尤其需要控制。这样可以保证即使文字被显示在其他网站,其样式也依然可以保持统一,如果没有被聚合器过滤 HTML 标签的话。

相关内容

汽车品牌专区设计-精细化的用户界面设计

在网站项目1:ui-ue设计原则这篇文章里,我们讨论很多基本的UI原则,大家也看到了遵循这些设计原则之后的页面效果,实际上,从客户到同事都还比较满意,原因我想了一下,可能有以下这些:

1 页面设计效果比较新颖.

2 extjs带来的类似windows操作系统的窗口呈现方式比较新颖.

3 用到的一些专题设计技术,比如会自动更新内容的新闻和企业博客比较实用.

1113_MG_1800

第一步走了出来,我们继续探讨网站设计的问题,还是继续拿汽车品牌专区来说事.大家其实经常可以在很多门户网站上看到各类专题,以前我也很喜欢看专题,因为信息集中.但是现在我不太爱看了,原因是千篇一律的设计已经没有了阅读的冲动,专题中不相关的内容也不少,各个网站同样主题的专题风格雷同等.

怎么把目前看来还算漂亮的汽车品牌专区做得更好呢?

我从以下几方面入手:

1 背景的层次感.

2 模块的区分度和辨识度.这是我最重点研究的UI和UE特性,良好的模块和模块之间的区分,良好的模块之前的内容的区分,无论是从短时记忆的组块理论,还是刺激的阈值理论,都是理论上的证据,有的已经另有文章阐述.

3 UI新元素的引入.除了暂时没有解决的实时图片的倒影功能,其他的静态图片都加上了适当的倒影,web2.0带来的这些新颖的设计适当的运用效果很不错.

4 人.在页面中合适的出现人的元素,可以增加页面的亲和力.

5 一致性.之前也说过这个问题,现在在模块,项目,文字,图片中更加强调这一点.

skoda_chinacars.com

在实际的这个品牌专区的制作过程,后台和运营也是至关重要的因素,我另外提出了”活的专题”的概念,专题中的大部分元素都尽可能的能够自动更新,这需要专题背后的很多平台协同工作以及配合紧密的工作运营流程.下次再说.

相关内容

Web 2.0与网页设计(web 2.0 for designers)

译言有很多好文章,下面这篇关于web2.0时代的网站设计,非常值得推荐。转载自这里原文出处

Web 1.0时代的网络是一小撮人为一大群人撰写内容的网络。人们从源头便可直接获取信息,要图片设计信息就去Adobe.com,要Windows信息就去 Microsoft.com,要看新闻就去CNN.com。然而,随着时间流转,越来越多的人在阅读网页之外也开始自己写些东西。一个有趣的结果随之而来 ——突然之间,信息多得我们无法与之保持同步了。我们没有足够的时间去关注所有想要我们关注的作者,而浏览有相关内容的全部网站更是显而易见不可能的事情。很明显,当个人写作渐渐成为主流的时候, Web 1.0的老模式应该改改了。

Web 2.0在此时登场,在这一模式下,网络上的信息是分布在分布式的小单位“微内容”。网络的构成元素由文档变成了数据。我们不再需要访问不变的旧式信息来源。现在我们所依赖的是一套以其新而有效的方式聚合并重组网络上“微内容”的新工具。

这些工具,也就是Web 2.0接口,将是设计创意闪光的先锋领域。

在这方面已经有了很多成功案例,比如RSS聚合、搜索引擎、门户、API(应用程序界面,它可以提供与数据相连的接口)和Web服务(通过XML-RPC、 SOAP和其它技术存取数据)。Google地图在功能上和类似服务差异不大但它提供的接口要优秀得多。Flickr的接口可以算是最具创意并且也是最受欢迎的。Del.icio.us则提供了个人和社群服务,它的覆盖面远不止一个网站。这些接口设计正在改变我们存储和共享数据的方式。至于内容来自何处倒不是那么重要了。

人们常常把Web 2.0描述为“作为平台的网络”,把网络看成是一个内容互动的平台之后,我们很容易发现这种变化对于设计的重大影响。想象一下吧,当来自不同领域的不同群体——公司、个人、政府等等——存储了一系列数据之后,我们便能通过一个接口将信息混合,这一点是任何单一传统网站都不可能做到的。举例来说,Amazon.com的内容数据库是对外开放的,任何人都可以针对一些特殊要求去设计一些更好的接口(比如Amazon Light)。它的力量在于,借助接口,人们可以通过内容的定制或与其他数据的重组创造出新的更有价值的工具。

对于网页设计师而言,Web 2.0有6个值得注意的趋势。在这篇介绍性的文章里,我们将为您介绍这些趋势并一一举例说明。在以后的文章里,我们会针对具体趋势作细节性的探讨。

用语义标记语言写页面:和XML接轨

语义标记,也就是精确描述页面每一部分作用的标记,是实现Web 2.0过程中最重要的一环。最常用的标记语言HTML和XHTML一般用于显示目的,设计师们可以通过对HTML标签应用CSS来改变页面风格。

这些标记语言并非完全没有语义能力。设计师们用它们能够描述页面,但这仅限于(X)HTML内建的标签范围内。比如,设计者可以用标签分别标记标题、段落、清单、引用以及自定义列表等项目。这些标签对一些简单的文档已经够用了。但是在大多数情况下,(X)HTML内建的这些标签远不足以精确描述页面内容。对于 Web 2.0来说,对页面的描述不仅是一项需求,它是实现Web 2.0的关键。尽管HTML和XHTML的潜力尚未被挖尽,RSS这项技术已经证明了语义标记语言毋庸置疑的实力。RSS利用XML实现网页内容的联合。它可以让网站更方便地告知访客什么时候有更新。现在你不再需要一遍遍地点开你所喜爱的网站来查看更新了,你只需在RSS阅读器中输入RSS源的地址,阅读器就能自动定期查看站点,在发现更新之后接收信息并且提醒你。它可以大大节约你的时间。

提供Web服务:超越站点

在语义语言得到运用之前的早期互联网上,网站仅仅是一系列“页面”的组合。十年前的网站往往更像是在线用户手册(干巴巴的静态HTML网页),它们的互动方式也仅仅是Flash、动画和JavaScript而已。在那时,网站推广就像是推销“地皮”——那是一个在线商城和门户网站在虚拟世界激烈竞争的时代。

从 90年代末,特别是这个世纪的头一两年开始,XML语言和Web服务开始推动网站的面貌发生改变。XML技术实现了不同系统间的内容共享和传输,Web服务提供了和站点内部相连的接口。视觉设计为内容提供了外观界面,而Web服务则是为同一内容提供的程序接口。这是一个相当有用的技术。如果网站开发者提供了Web服务API的话,任何人都可以建立一个和该站点内容相连的接口。

Amazon.com和eBay是这种由单一站点向Web服务转变的两个成功范例,所有人都可以通过Web服务使用它们提供的海量商业数据。依赖eBay的Web服务所建立的Andale是一个很有意思的网站,它通过分析价格和销售数据来告诉卖家当前的热销商品及其价格。

信息重组:内容为王

2004 年11月12日,在网络媒体协会的一次会议上,美联社CEO Tom Curley发表了一个重要而有远见的讲话,他说:“…在(互联网发展)的下一阶段,内容本身将会会比它的展现形式更重要…诸如搜索、RSS和TiVo之类录像程序——我这里说的只是一部分——等杀手软件正在逐渐打破我们试图存放内容的容器。”

Curley的讲话是针对记者和媒体行业的,但他的深刻见解对网页设计者们来说同样重要。网页设计在Web 1.0时代的目的是建立一个内容独占的站点。但如今,内容已经不可能由单一网站独享了——除非你试图与社会性的网络对抗并把内容锁在一个受保护网站之中。

Web 2.0时代的网站设计相对于网站本身,更注重事件驱动型体验的建立。RSS成为其重要组成部分并非只是巧合。不需要任何无关设计,RSS摘要就可以让人们订阅你站点上的内容并随时通过RSS阅读器阅读它们。

搜索也可以和RSS相结合,帮助人们通过标题和标签(可以通过PubSub或Feedster等等)来订阅所需的内容。这种所谓的“未来搜索”不仅能帮助人们整合不同来源的内容,也避免了人们因为站点的视觉设计而与之失之交臂的可能性。

由于内容以RSS的形式在网上流动并且以此方式被重新整合,网站设计者们的思维应当超越站点本身,并且要着重考虑如何去打内容牌。

导航和关联的主人:用户决定

由于Web 2.0内容重组的特性,访客们初次看到信息的地方很可能并不是最早发布它的站点。因此,传统上为访问某一特定内容而设计的网站导航系统将被针对Web 2.0的新特性而设计的导航系统所取代。这种分布式导航可能的形式包括RSS阅读器、博客上的链接、搜索引擎,也可以是其他一些形式的内容聚合程序。

这一特性也带来了一些副作用,其中一条就是有用信息的来源经常变动,而访客甚至不需知道信息的真正来源。还好,内容聚合程序内建的一些功能已经注意到了这一问题——它们能够记录访客的活动。通过记录微内容的访问量,聚合程序可以通过访客的历史行为预测他们在未来可能关心的内容。这就是我们在Daypop、 Del.icio.us和Blogdex等网站上所看到的。对人们历史兴趣的记录可能会在未来发挥作用。

这些第三方接口的强大功能使得访客不必访问内容的发布页就能获取信息,使用导航系统的人因此将越来越少。最常用的导航系统将由用户行为来决定,而不再需要特别的设计。

随时间而添加的元数据:由社群建设的群体信息

Web 1.0有一个看上去彻底改变了传统出版方式的特点,即随时修改出版物的可能性。在网上,纸上出版物的“版本”、“印数”等概念消失了。网上有的只是网站和它的当前状态。现在我们已经习惯这一形式了,乐观者们的希望可能会变成现实:随着时间增长,网上的内容只可能变得越来越好——元数据被不断添加,描述逐渐深入,话题变得明晰,参考更加全面。

Web 2.0在这方面走得更远,在该模式下,用户可以添加属于他们自己的元数据。在Flickr和Del.icio.us上,任何人都能给数字媒体(文件、书签、图片…)添加标签。不过,自行添加标签还不是最有趣的。最有趣的是所有人的标签放在一起时体现出的那些趋势。

举例来说,当我们在Del.icio.us上为一个书签添加“Web 2.0”的标签之后,我们可以进入del.icio.us/tag/Web 2.0这个页面看看别人给哪些项目添加了类似标签,也许还能从中发掘出一些我们本不知道的宝贵信息。搜索引擎可以查找网站设计者添加的那些元数据, Del.icio.us则为那些被传统模式所忽略的人所添加的元数据提供了一个杠杆。

转向程序设计:风格和结构的分离

Web 1.0时代,网页的视觉设计经历了两个发展阶段。早些年里,设计者们使用GIF动画和表格等小技巧来扮靓网页。而在最近几年,CSS逐渐流行起来,人们通过添加一个定义了风格信息的独立CSS文件实现了页面风格和结构的分离。尽管如此,视觉设计仍然是人们关注的核心——因为这是区分内容和吸引用户注意最主要的方法。

进入Web 2.0时代之后,网站的地位降低了,视觉风格也因此不再那么重要。Web 2.0时代流行的是XML,相对页面布局和内容展现方式,词语和语义更为重要。内容在网络中流动,并通过程序来存储。从非常现实的意义上说,如今我们的设计更多针对的是机器而不是人。这听起来有点像《黑客帝国》里的事情,不过Amazon.com的CEO Jeff Bezos说:“Web 2.0…它讲究的是让网络变得更适合电脑使用。”

这对网页设计者来说意味着什么呢?这意味着设计者需要考虑如何让内容和站点本身一样吸引人。这意味着设计者需要转向Web服务的开发,意味着设计者的思维应当超越站点的展现方式,并更多地考虑API和内容聚合。简而言之,设计者会更像是程序员。Web 2.0有一个简单的前端和强有力的后端,Bezos的话就是这个意思。

总结

Web 2.0意义深远。它像所有重大变革一样,从社会、文化甚至是政治等多方面影响着使用者。Web 2.0的设计者和开发者们是受影响最大的人群之一——不仅仅是因为他们需要新的技术手段,更重要原因是,他们需要认识到,内容应当作整体的一部分对待,它们并不是孤立存在的。

在这里我们作一些总结,下面我们再来看看这6个趋势:
1. 用语义标记语言写页面:和XML接轨
2. 提供Web服务:超越站点
3. 信息重组:内容为王
4. 导航和关联的主人:用户决定
5. 随时间而添加的元数据:由社群建设的群体信息
6. 转向程序设计:风格和结构的分离

我们撰写这个专栏的目的是帮助设计者们分析Web 2.0的这些动向并向他们阐述其意义。我们将继续探讨构建Web 2.0的一些新技术,详细介绍那些成功的新接口,并思考它给用户带来的社会性影响。

我们希望关注新技术前景的设计者们今后能帮助我们重点关注它们的实用意义,关注Web 2.0当前(和未来)对网站设计产生的细微而深刻的影响。

相关内容

网站项目1:专区的页面草图设计

需求分析是网站项目制作的开始,需要我们站在传播者和接收者两个角度去分析问题,得到项目的关键点和主要表现方式,之后还会引入一些标准化的方法来避免人为因素的影响。

现在开始进行页面草图的设计,页面草图是一个页面的框架,确定各个模块的位置。在页面设计中,将遵循一些基本的规律,如页面布局的重要性,九宫格法则和模块权重分配等。

当我们在设计这个专题的时候,设计上大致分为网站标准元素、页面整体风格、模块设计等。

网站标准元素。包括:
1 网站本身的VI准则。要符合网站本身的一些颜色设定,logo规则,形状规则,以及如导航栏,关于等这些元素的一致性。在这个车厂专区的设计中,这一部分比较好做,我们考虑的更多的是车长本身的VI,因为这是一个专区,在一些频道的设计中,这点需要考虑周到。
2 传播方的设计准则。如果我们是要传达某个产品,介绍某个厂商,那么这个产品和这个厂商是有自己的形象设计的,要遵循。

页面整体风格。包括:
1 页面的基调颜色。一般不超过两种。
2 logo大小和位置。
3 多少个屏。
4 多少栏设计以及栏位的比例。先在很多时候一般是混合设计,但一般来说总是有一个主要的栏位分配,两栏或者三栏。

模块设计。模块是网络项目设计时候的一个基本单位,模块组成一个网页。

模块的基本属性包括:
0 这是什么模块。
1 标题。
2 内容样式。文字,图片,flash,或者混排。
3 可以点击的内容设计。
4 点击后呈现内容。点击后可以是打开新窗口,或者是ajax的某个效果。
5 “详细” 点击。有时候模块是显示了内容的摘要,“详细”点击呈现的就是所有的内容,这些内容的文案是要在设计阶段准备好的。
6 “更多”点击。
7 数据来源。模块中的数据分为静态和动态,动态模块中的内容会自动更新。

根据前面的需求分析,我们制作了这个厂商专区的页面的第一个草图。

1112_MG_1700

看上去还不错,不过我们发现了一些问题。

1 “心跳加速吗”字体样式和官方网站不一样。对于这样的专区设计必须要保证品牌一致性。
2 首屏左边的菜单功能多余。用户对菜单的点击会产生的情况无法判断。
3 下方有5个模块,图片过少。静止图片对于现在的浏览用户的带宽来说,已经不是什么问题了。图片不能滥用,但也不用过于吝啬。
4 模块的具体定义。因为是草图,所以模块还需要具体设定,以及每个模块的呈现形式,数据来源等。

相关内容