小编话:每当提及英语,小编实在头痛不已。但是,要成为一名有逼格的设计师,精通英语倒是不用,而设计师需要具备的实用英语却不可不掌握。今天,大家一起跟随@网秦uec的同学来加深逼格吧!

760-260

开课发言

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

学习方法

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

2、对照译文?来回看来回看来回看!

3、欢迎加入QQ讨论群:297721382,一起讨论!

?

NOW!?看书干嘛!看黑板!


Designing forMobile(移动;移动端;手机)?Part 1

Information?Architecture(信息架构

 

?

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.

20150108145150_DesignForMobile_conditions? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

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.

MOBILE?DELIVERY(呈现、交付)METHODS

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)

20150108181802_biao

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(筛选视图):

20150112103344_DesignForMobile_hierarchy_sm

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.

20150112103410_DesignForMobile_hubandspoke_sm

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.

Good for

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

Watch for

Users that want tomulti-task(执行多任务).

6

Nested doll

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.

Good for

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.

Watch for

Users won’t be able to quickly switch between sections so consider whether this will be suitable, rather than a?barrier(障碍)to exploring content.

20150112103656_DesignForMobile_tabbedview_sm

Tabbed view

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.

Good for

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

Watch for

Complexity(复杂性).?This pattern is best suited to very simple content structures.

20150112103559_DesignForMobile_bentobox_sm

Bento Box/Dashboard

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.

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.

20150112103746_DesignForMobile_filtered_sm

Filtered view

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.

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.

 

附赠单词表:

20150108182431_单词表

原文地址:网秦uec

原作者:蒋灿

转载请注明:学UI网—UI设计师学习教程平台 » 设计师实用英语第一课

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
黄色在电商设计中的玩法与禁忌【设计干货】黄色在电商设计中的玩法与禁忌【设计干货】
不会C4D与手绘的设计师还有出路吗?不会C4D与手绘的设计师还有出路吗?
设计技巧如何融入“用户体验”?设计技巧如何融入“用户体验”?
视觉设计师如何向UX设计师转型?视觉设计师如何向UX设计师转型?
UI设计师设计思路的进阶之路UI设计师设计思路的进阶之路
移动端的长表单应该如何设计?移动端的长表单应该如何设计?
移动UI进化中!10种创新的导航菜单实例移动UI进化中!10种创新的导航菜单实例
如何在用户脑海中建立独特强有力的品牌形象?如何在用户脑海中建立独特强有力的品牌形象?
三分钟带你解析ios三种导航模式三分钟带你解析ios三种导航模式
版画语言在广告设计中的运用版画语言在广告设计中的运用
?