Designing forMobile（移动；移动端；手机）?Part 1
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 a?gimmick（小玩意、小噱头）, a few years later, when some of my friends decided to purchase them.
Today there are?six-billion?mobile 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. The?physicality（物理特性）?and?specifications（规格）?of mobile devices impart differentdesign?affordances（设计可容性）?and?requirements（要求）.?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 employ?touch screens（触摸屏）,?where users rely on?gestures（手势）– in addition to simple?interface elements（界面元素）?– to interact with them. Because of their?smaller?dimensions（尺寸）, we sometimes expect the?content（内容）?structures to be simpler and smaller. Also, because of their limited?bandwidth and connectivity,?mobile devices require designs to be optimized for?loading time（加载时间）, with reduced data requirements.
HOW, WHERE AND WHEN
Because we have?constant?access（渠道；访问；通路）?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 difficult?viewing conditions（视觉条件）,?or among a variety of?distractions（分散注意力的因素）.
HOW WE BEHAVE AND FEEL
Finally, we have different attitudes, behaviors and?priorities（优先级、优先次序）?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 user?expectations（预期）, it’s extremely important that we, as designers, follow a?user-centered design process（以用户为中心的设计流程）?to arrive at our?solutions（解决方案）. The only problem is that our traditional?best practices（最佳实践）may not always apply.
HOW MOBILE AFFECTS DESIGNERS
Mobile’s differences directly impact all parts of the user-centred design process: from?user 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.
Unlike traditional websites, there are four popular?mobile delivery methods（移动端呈现方式）. Mobile users that choose to view content in their?browser（浏览器）?are best served with either a?mobile-specific site?– optimized for mobile devices – or?a responsive site（响应式网站）?– which re-orients/arranges itself for mobile devices. Those who choose to install an application on their phone either receive a?native app（本机应用）?(lication) or a?hybrid 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 different?pros and cons（优缺点）. Choose what’s right for you based on your project’s?design context（设计背景）. (In the following table, higher star values are better)
MOBILE INFORMATION ARCHITECTURE
Mobile devices have their own set of Information Architecture?patterns（模式、样式、规律）,?too. While the structure of a responsive site may follow more “standard” patterns, native apps, for example, often employ?navigational structures（导航结构）?that are?tab-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（筛选视图）:
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.
Organising complicated site structures that need to follow a desktop site’s structure.
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 a?form（表单；形式）?or?purchasing 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.
Multi-functional tools, each with a distinct internal navigation and purpose.
Users that want tomulti-task（执行多任务）.
The nested doll pattern leads users in a?linear（直线的）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.
Apps or sites with singular or closely related topics. This can also be used as a?sub section（子版块）pattern inside other parent patterns, such as the standard hierarchy pattern or hub and spoke.
Users won’t be able to quickly switch between sections so consider whether this will be suitable, rather than a?barrier（障碍）to exploring content.
This is a pattern that regular app users will be familiar with. It’s a collection of sections tied together by a?toolbar menu（工具栏菜单）.?This allows the user to quickly scan and understand the completefunctionality（功能）of the app when it’s first opened.
Tools based apps with a similar theme. Multi-tasking.
Complexity（复杂性）.?This pattern is best suited to very simple content structures.
The bento box or dashboard pattern brings more detailed content directly to the index screen by using?components（组成部分）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.
Multi-functional tools and content-based tablet apps that have a similar theme.
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.
Finally, a filtered view pattern allows the user to navigate within a set of data by selecting?filter options（筛选选项）?to create an alternative view. Filtering, as well as using faceted search methods, can be an excellent way to allow users to?explore（探索，浏览）?content in a way that suits them.
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.
Mobile. Filters and faceted search can be difficult to display on a smaller screen due to their complexity.
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.
“UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程，交作业就有大神免费帮你点评作业，爽歪歪！
“UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源＋学习，双用途的网址导航站。亲爱的，你收藏了吗？
【学UI网 原创文章 投稿邮箱：firstname.lastname@example.org，也可以找各个群的管理】