设计师实用英语第一课

开课发言：

作为一名有逼格的设计师，就要全方位发展，做的了设计，说得了英文！从今天开始，网秦用户体验中心”设计师实用英语，专为设计师准备的英语！” 培训班正式开课！

学习方法：

1、文章采用中英文混排的方式，射击类单词会用红色特别标注，请在阅读的过程中通读全句，通过语境理解单词意思，因为理解万岁！

2、对照译文 来回看来回看来回看！

3、欢迎加入QQ讨论群：297721382，一起讨论！

NOW!看书干嘛！看黑板！

Designing forMobile（移动；移动端；手机）Part 1

InformationArchitecture（信息架构）

Mobile devices（移动设备）affect every aspect of our design process. In this – the first part of her series on mobile design – Elaine McVicar explores a handful of the most popular architectures for mobile websites and applications.

Around 1993, my dad brought home a large, brick-shaped mobile phone. We were all incredibly excited by the new technology, even though none of us thought it would have a massive impact on our lives. I actually still thought of it as agimmick（小玩意、小噱头）, a few years later, when some of my friends decided to purchase them.

Today there aresix-billionmobile subscribers（手机用户）in the world – meaning if there were one mobile per owner then 87% of the world’s population would have one. And considering that fewer than three billionpeople use a desktop computer, that’s quite a big difference.

Mobile devices are clearly here to stay, and along with them come a whole host of new constraints (and opportunities) for our designs. Let’s take a look at how we might update our approach.

HOW IS MOBILE DIFFERENT?

The first thing we need to understand about mobile design is that it’s different – and not just with regards to size. Thephysicality（物理特性）andspecifications（规格）of mobile devices impart differentdesign affordances（设计可容性）andrequirements（要求）.Because mobile devices are lighter and more portable, we often find it more convenient to use them. Consequently, through this more regular use, we feel a unique, emotional connection to them.

PHYSICALITY AND SPECIFICATIONS

Most mobile devices employtouch screens（触摸屏）, where users rely ongestures（手势）– in addition to simpleinterface elements（界面元素）– to interact with them. Because of their smallerdimensions（尺寸）, we sometimes expect thecontent（内容）structures to be simpler and smaller. Also, because of their limited bandwidth and connectivity, mobile devices require designs to be optimized forloading time（加载时间）, with reduced data requirements.

HOW, WHERE AND WHEN

Because we have constantaccess（渠道；访问；通路）to our mobile devices, we tend to use them more frequently. They come with us on the bus, walking down the street, or watching TV. We often use them while “doing” something else. This means we may use the device under difficultviewing conditions（视觉条件）, or among a variety ofdistractions（分散注意力的因素）.

HOW WE BEHAVE AND FEEL

Finally, we have different attitudes, behaviors andpriorities（优先级、优先次序）while using mobile devices. As part of their Going Mobile 2012 study, User Experience Design agency Foolproof found that these devices have given us a new sense of freedom and control. In turn, some users feel a very real affection for their mobile device. Foolproof found that 63% of people felt lost if their smartphone was not in easy reach. They described their mobile devices as‘alive’ … an extension of their own body and personality

Because mobile devices have fundamentally changed userexpectations（预期）, it’s extremely important that we, as designers, follow auser-centered design process（以用户为中心的设计流程）to arrive at oursolutions（解决方案）. The only problem is that our traditionalbest practices（最佳实践）may not always apply.

HOW MOBILE AFFECTS DESIGNERS

Mobile’s differences directly impact all parts of the user-centred design process: fromuser research（用户调研）to the final development and testing of the solution. The biggest parts of the process it affects are our delivery methods and our information architecture.

MOBILE DELIVERY（呈现、交付）METHODS

Unlike traditional websites, there are four popularmobile delivery methods（移动端呈现方式）. Mobile users that choose to view content in theirbrowser（浏览器）are best served with either a mobile-specific site – optimized for mobile devices – ora responsive site（响应式网站）– which re-orients/arranges itself for mobile devices. Those who choose to install an application on their phone either receive anative app（本机应用）(lication) or ahybrid app（混合型应用）. Native apps are self-contained: every screen of the application is defined up front. Hybrid apps offer a bit more flexibility, loading content from the web (as it’s viewed in a browser) but providing users with an “app-like” interface (or chrome).

Each delivery method has differentpros and cons（优缺点）. Choose what’s right for you based on your project’sdesign context（设计背景）. (In the following table, higher star values are better)

MOBILE INFORMATION ARCHITECTURE

Mobile devices have their own set of Information Architecturepatterns（模式、样式、规律）,too. While the structure of a responsive site may follow more “standard” patterns, native apps, for example, often employnavigational structures（导航结构）that aretab-based（基于标签的）.Again, there’s no “right “way to architect a mobile site or application. Instead, let’s take a look at some of the most popular patterns:Hierarchy（分层结构）, Hub & spoke（轴辐式结构）, Nested doll（套娃结构）, Tabbed view（标签视图）, Bento box（便当盒） and Filtered view（筛选视图）:

Hierarchy

The hierarchy pattern is a standard site structure with an index page and a series of sub pages. If you are designing a responsive site you may be restricted to this, however introducing additional patterns could allow you to tailor the experience for mobile.

Luke Wroblewski’s Mobile First approach helps us focus on the important stuff first: features and user journeys that will help us create great user experiences.

Good for

Organising complicated site structures that need to follow a desktop site’s structure.

Watch for

Navigation（导航）. Multi-faceted navigation structures can present a problem to people using small screens.

Hub & spoke

A hub and spoke pattern gives you a central index from which users will navigate out. It’s the default pattern on Apple’s iPhone. Users can’t navigate between spokes but must return to the hub, instead. This has historically been used on desktop where a workflow is restricted (generally due to technical restrictions such as aform（表单；形式）orpurchasing process（购买流程）however this is becoming more prevalent within the mobile landscape due to users being focused on one task, as well as the form factor of the device, making a global navigation more difficult to use.

Good for

Multi-functional tools, each with a distinct internal navigation and purpose.

Watch for

Users that want tomulti-task（执行多任务）.

Nested doll

The nested doll pattern leads users in alinear（直线的）fashion to more detailed content. When users are in difficult conditions this is a quick and easy method of navigation. It also gives the user a strong sense of where they are in the structure of the content due to the perception of moving forward and then back.

Good for

Apps or sites with singular or closely related topics. This can also be used as asub section（子版块）pattern inside other parent patterns, such as the standard hierarchy pattern or hub and spoke.

Watch for

Users won’t be able to quickly switch between sections so consider whether this will be suitable, rather than abarrier（障碍）to exploring content.

Tabbed view

This is a pattern that regular app users will be familiar with. It’s a collection of sections tied together by atoolbar menu（工具栏菜单）.This allows the user to quickly scan and understand the completefunctionality（功能）of the app when it’s first opened.

Good for

Tools based apps with a similar theme. Multi-tasking.

Watch for

Complexity（复杂性）.This pattern is best suited to very simple content structures.

Bento Box/Dashboard

The bento box or dashboard pattern brings more detailed content directly to the index screen by usingcomponents（组成部分）to display portions of related tools or content. This pattern is more suited to tablet than mobile due to its complexity. It can be really powerful as it allows the user to comprehend key information at a glance, but does heavily rely on having a well-designed interface with information presented clearly.

Good for

Multi-functional tools and content-based tablet apps that have a similar theme.

Watch for

The tablet screen gives you more space to utilize this pattern well, however it becomes especially important to understand how a user will interact with and between each piece of content, to ensure that app is easy, efficient and enjoyable to use.

Filtered view

Finally, a filtered view pattern allows the user to navigate within a set of data by selectingfilter options（筛选选项）to create an alternative view. Filtering, as well as using faceted search methods, can be an excellent way to allow users toexplore（探索，浏览）content in a way that suits them.

Good for

Apps or sites with large quantities of content, such as articles, images and videos. Can be a good basis for magazine style apps or sites, or as a sub pattern within another navigational pattern.

Watch for

Mobile. Filters and faceted search can be difficult to display on a smaller screen due to their complexity.

NEXT STEPS

It’s been almost two decades since I first saw that large brick shaped mobile phone, (and around twelve years since I bought my first mobile). Now me, my dad and almost everyone I know has a smart phone, where we regularly, and frequently, interact, communicate and manage our lives. Each year technology takes another leap, and with that, it’s clear we need to change along with it.

Developing a mobile and tablet friendly information architecture is just the first step in creating a great mobile experience. In Part 2 – Design Considerations I’ll explain how the differences in the mobile context will impact how you develop your final design solution.

附赠单词表：

网秦uec

原作者：蒋灿