恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
回顾2016年Apple举行的 WWDC中有趣的设计主题
0.0°
2016-09-05 原创文章 设计趋势 举报 11584 14 24 1

我们从今年度(2016)的设计类论坛中挑选几项有趣的主题,整理后以图文的方式分享给大家。


Apple 在年中举行的 WWDC (世界开发者大会),除了将未来一年软体更新的做重点介绍外,还有一整周的论坛及 workshop。而每一场论坛的结束后,都会上传到 Apple 的官方网站上供大家观看。


我们从今年度(2016)的设计类论坛中挑选几项有趣的主题,整理后以图文的方式分享给大家。如果你正有开发的项目,准备进军全球,这些重点可对产品的设计与推广上有所价值;而一般的开发者、使用者经验分析师、介面设计师们,也能在论坛的重点中得到更多的知识。


在 Apple 的产线开放各自 App Store 平台后,设计师对介面的优化,已不单只有智慧型手机这样的装置,而开发者可以一展想法的地方也就更多。我们从中整理出值得关注的几项重点:


Designing for tvOS


图文的辨识度


开发 Apple TV 时,我们要考虑“观看者与萤幕间的距离"。


手机与使用者之间的距离可藉由移动手臂来调整,但电视是透过一定距离来接收资讯与操作的;且观者未必只有一人。这样的使用情境,是考量电视装置介面设计的基础课题。因此,设计的美学上,我们可不能认为字体缩小越美、笔画越细越为雅致等,文字上需以中级的尺寸及 regular 粗细度作为字体规范的基础。另外,"可视度"与“大尺寸图"亦是 TV 开发上的重点项目。


因为观看距离的关系,在开发TV 的应用程式时,字体的可读性是设计该平台App 的基础。官方建议以Regular 的字体粗细作为传达、阅读的标准。

▲ 因为观看距离的关系,在开发TV 的应用程式时,字体的可读性是设计该平台App 的基础。官方建议以Regular 的字体粗细作为传达、阅读的标准。


平台应用的可能性


第四代的 Apple TV 有着一项别于传统电视操作的方式,就是新设计的遥控器。它结合了滑动触控、按压点选及收音麦克风,创造出新的应用、使用方式及体验。在论坛中,讲者就选出目前平台上几项特别的使用方式,供开发者想像可能的 App 设计方式。


▲ 论坛中示范的其中一项TV App,开发者借遥控器特性转化为横向操作的摇杆,让使用者进行游戏更为熟悉、便利。

▲ 论坛中示范的其中一项TV App,开发者借遥控器特性转化为横向操作的摇杆,让使用者进行游戏更为熟悉、便利。


▲ (点击可放大)其他别具启发性的TV应用。左边的REUTERS TV搭配使用者的时间,将新闻重点精选成不同长度;右边的健身应用可分段进行健身训练,符合传统电视教学型态的使用经验。

▲ 其他别具启发性的 TV 应用。左边的 REUTERS TV 搭配使用者的时间,将新闻重点精选成不同长度;右边的健身应用可分段进行健身训练,符合传统电视教学型态的使用经验。


Designing Great Apple Watch Experiences


因为萤幕小,更要说重点


别于 TV 的中距离操作情况,Watch 更贴近使用者,而且它在手腕上震动反馈与声音提醒是短暂且直接的。相对于其他产品,Watch 的显示萤幕小,每次传达资讯的时间,被限制在抬起到放下手腕的那刹那。因此,如何优化从 iPhone 上的复杂资讯传递到手上的过程就是:去繁就简 – 以上是 Watch 显示资讯的要点。


▲ (点击可放大)  以资讯型的App (登机)通知为例,登机资讯往往会伴随许多次要资讯,选出重要的资讯作为该呈现的通知方式,能够协助使用者快速找到资讯重点。右边为资讯优化的设计结果,重要的航班资讯得以一目了然。

▲ 以资讯型的 App (登机)通知为例,登机资讯往往会伴随许多次要资讯,选出重要的资讯作为该呈现的通知方式,能够协助使用者快速找到资讯重点。右边为资讯优化的设计结果,重要的航班资讯得以一目了然。


▲ (點擊可放大) 超出螢幕畫面的天氣 App,,雖然可以使用 digital crown(錶冠)進行閱讀,但相對起左右滑動的方式,在顯示資訊上更為快速。

▲ 超出萤幕画面的天气App,,虽然可以使用digital crown(表冠)进行阅读,但相对起左右滑动的方式,在显示资讯上更为快速。 


简单清晰的icon 传达


因为 Watch 的表面功能(Complication)掌管的资讯类别众多,可能有天气、行事历、运动的记录…等。在新的版本的Watch OS 中,使用icon 来进行资讯的分类也是其特色之一,因为这些资讯对于watch 的传达而言,是抬手倏忽之间的,这些icon 设计是不宜复杂的。


▲ 這次 Watch OS 改版的重點,將錶面的資訊功能搭配清楚簡潔的icon, 並定義不同資訊的使用原則。

▲  这次 Watch OS 改版的重点,将表面的资讯功能搭配清楚简洁的 icon,并定义不同资讯的使用原则。


Typography and Fonts


SF Mono 字体的发布


在前年 iOS 8 登场时,发布的 SF (San Francisco)字型,每年都会有新的家族成员诞生(例如去年随 watch 一同而来的 Compact 版本,就是更为简洁化,适合小萤幕、小字呈现,同时又能清楚看出拼字的字型);今年则与主要视觉相互呼应的 SF Mono,这是一套适合程式编写人员的字体。


Image title

▲ 在字体与排印学的论坛中,发表了编写程式用的字体。本次 WWDC 视觉图案也是透过这套字体所组成的。


Image title

▲ SF MONO  的特色。字体间的间距都维持一定,在编写密密麻麻的程式时能更清晰呈现。


TV 上的Small Cap 应用


字体本来就是为了精确传达与阅读舒适的功能性而存在,而部分的文书规则会在这份视觉阅读之上,举例 TV OS 所现的大写字,在不失整个阅读的顺畅,就需要使用 Small Cap 来解决这样的问题。


Image title


Image title

▲ 在英语系国家,电视、电影使用大写字体呈现文字段落中的层级是一种编排习惯。但大写字体在一行文字中,是显得过于突兀且难以排版。Small Cap 的字型主要是解决这样的字体编排问题。


Inclusive App Design


字型与编排设计


面对产品要推广至不同国家时,若我们只从自身文化中所熟悉的事物下手,有可能无法符合该目标对象的需求。


以欧美常用的拉丁文字及其他国家横向书写的文字来看,我们就可能遇上超过顶线与底线而产生的编排问题,这些超过顶线或底线的字,是仰赖着这些特征来被识别的,为了编排而强行去除特征,则会无法被识别。而保留下来,则需要重新考量文章行距间的问题。


Image title

▲ 几个横向书写的文字。以拉丁字体的字构规范来看,这些超出顶端或底线的文字,需要另外去考量排版,若为了搭配整体而去掉这些特色会让文字难以被判别及阅读。


Image title

▲以文中的泰文为例,若同英文的排版方式,则可能遇到文字相互重叠的情况。因此,视使用情况做行距调整是作为在地化的推广要注意的部分。 


文化导致的用色差异


文化间的差异,颜色也是其中要注意的。


红色在中国可能很能代表喜气,但在欧洲却代表着红色代表着革命,进而联想到冲突及暴力。除了 App 本身的设计外,文化性的用色也常被考量在推广上,例如:农历年期间 Apple 会推广的活动容易以红色调为主题,而这些广告的露出也大部分只针对大中华地区的使用者。


Image title

▲  不同的文化对色彩的解读不同。有的地方认为浪漫、吉祥的颜色,在不同地域会是带有负面的含义。


Image title

▲ 华人文化喜欢红色也展现在股市。美国的股市上涨以绿色为识别色,但中国与台湾相同,上涨的颜色为红色。


因为生理状况不同而考量的用色情况


除了文化之外,对于色盲的使用者我们也是需要去考量的。


就以 apple watch 设计规范上,很广泛的运用不同的色彩来做功能的区分,运动计量的分类色环就是明显的例子,但色盲的使用者看到的情况可能会有所不同。考量到这些情况,对生理状况不同的使用者也能区分传达而来的信息,才得以感受到好的使用体验。


▲  色盲的使用者眼中看到的颜色与我们的不同。此图模拟4种颜色,若在红绿色盲者的眼中,仅能区别出蓝色的差异性。

▲  色盲的使用者眼中看到的颜色与我们的不同。此图模拟 4 种颜色,若在红绿色盲者的眼中,仅能区别出蓝色的差异性。


Image title

▲  透过色彩作为辨别的 Apple Watch 介面,在设计时也考量到色盲使用者的情况,让他们还是能够区分其计量间的不同。 


后记


文章中整理出来的只是设计论坛中的其中一部分,如果想多方了解的开发者们,不妨也去观看其他领域的论坛。而文中没有特别提到的部分如:设计论坛中的Iterative UI Design(迭代的UI 设计)以及以程式开发介绍为主的 Waht's New in Acessibility(新的辅助功能)都是能增进设计非常好的课程内容。


整个WWDC 的内容都是非常好的学习资源,无论你是否为开发者的一员,这些都能够增加你对使用者介面的进一步认知。上述的课程都可以透过Safari 浏览器或从App Store 下载专属app 来进行观看:



本篇图片资源出处为

  • Designing Great Apple Watch Experiences – Presentation Slides
  • Designing for tvOS – Presentation Slides
  • Inclusive App Design –Presentation Slides
  • Typography and Fonts – Presentation Slides



【关于本篇作者】

Image title

Vic Li


UI 设计师,也是设计大舌头的好友及特约撰写, 对于没有 dribbble 邀请码苦恼中。

可从他的 about.me 个人页了解更多。





设计大舌头是一个长期关注用户体验相关(UED)议题的共笔平台,包含用户介面(UI)、互动设计(Interaction Design)、产品设计趋势、设计专利以及服务设计等,试图让更多读者了解设计师们的巧思,并推广 Design Thinking 的思维,欢迎更多人加入这一个讨论园地。


如果你也喜欢我们的文章,欢迎大家到我的 Blog(设计大舌头)瞧瞧:https://designtongue.me/


Image title


更新:2016-09-05

收藏

14人已收藏

设计大舌头

谈谈用户体验,聊聊使用者介面

  • 9

    作品

  • 325

    粉丝

  • 21

    关注

  • 快速验证概念、节省开发成本的方法– Prototyping
  • 小资族说走就走的机票比价神器 – HelloWings
  • 用户研究不被老板重视,身为 UED 的你该怎么办?
  • 為什么UI设计中,用户的个人头像大多是圆形的?

    猜你喜欢

      2016-09-05 原创文章 设计趋势 举报 11584 14 24 1

      回顾2016年Apple举行的 WWDC中有趣的设计主题

      0.0°

      你确定要举报回顾2016年Apple举行的 WWDC中有趣的设计主题

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年09月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      24
      14
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录