G's Vision

Less But Better.

如何设计人与界面间的媒介?

导读:

本文是2018 年苹果开发者大会「Designing Fluid Interfaces」主题演讲的最后一部分, iPhone X 界面设计师 Chan Karunamuni 以「Fluidity as a Medium」为题分享了设计人与界面间媒介的方法,并强调了原型制作的重要性。


在之前的介绍中,我们已经了解到如何创建流畅的界面,如何让界面感觉即时响应、生动自然,但是让我们感到舒适的不是界面本身而是我们与界面媒介的互动

教导


手势界面的缺点之一是支持的手势不明显,所以我们必须以一种友善的方式让用户了解我们想传达的内容

视觉提示...

如何设计应用手势?

导读:

Marcos Alonso 是苹果人机界面设计师,在 2018 年苹果开发者大会上 Marcos 就应用如何响应手势进行了分享,对设计点击、轻扫手势,提供持续反馈以及处理多个手势提供了有效建议。


界面的流畅源自与设备的交互操作,屏幕上的触摸如何变成应用中的手势?如何设计这些手势并捕捉所有要传达的意图?本文将从点击、轻扫之类的核心手势设计入手,介绍一些在设计手势时需要遵守的交互原则,多手势的处理以及如何将其与你的应用相融合。

如何设计点击?


你或许以为点击无需设计,但这个行为有许多需要注意的细节。以「计算器」这个应用为例,首先要记住的是...

如何设计界面中的动态运动?

导读:

Nathan de Vries 是苹果人机界面团队原型设计师,在 2018 年苹果开发者大会上 Nathan 进行了「Designing with dynamic motion」的主题演讲,从无缝衔接的动效、塑造性格、理解意图三个方面对如何设计动态运动进行了详细介绍,并提出了投射动量(Projection Momentum)的概念来准确判断用户的意图。



我们的思维与身体时刻处于变化中,周围的世界在不断变化,因此我们的界面也被预期以同样的方式进行表现:它们容易触知,对预期高度还原。我们在界面中用于表现运动的一种方式是定时动画,当按钮被点击时,显示设计师精心设计的完美动...

iPhone X 设计师教你设计流畅自然的界面

导读:

Chan Karunamuni 是苹果人机界面团队 iPhone X 手势界面设计师,在 2018 年苹果开发者大会上 Chan 以「Designing Fluid Interfaces」为题介绍了 iPhone X 手势界面设计的思考,从人、动机、行为、手段和场景等不同的角度对设计流畅自然的界面进行了全面阐述。


什么让界面感觉流畅自然?

每个人对于流畅的界面都会自己的描述,「这感觉很快速」,「这感觉很平滑」,「这感觉很自然」,「这感觉很神奇」。这是一种什么样的感觉?当你感受到它的时候就知道了,整个界面就像你思想延伸的工具


iPhone 是一个用于信息与沟...

线框图不是设计的起点,文本编辑器才是!

导读:              
作者 Fabricio Teixeira 在文章中提出了“界面即故事,每个设计师都是故事讲述者”的观点,介绍了在绘制线框图之前,设计师可通过   故事框架法(Storyframes)来组织页面内容,明确核心信息,从而保证最终的方案简洁易懂、重点突出。       


浏览一个精心制作的界面就像是阅...

拇指那些事儿:为何在 iOS 设计中触及导航应该代替导航栏?

导航栏难于点击

导航栏自初代 iPhone 起就已存在。在历史上,导航栏一直方便、清晰、易于理解且易于构建。

后来,手机的尺寸激增,iPhone 7+ 的大小足以取代 iPad mini 的尺寸。现在,假如你拥有一部新款 iPhone,导航栏几乎无法触及。

不断扩大的屏幕意味着导航栏距离我们的拇指越来越远。iPhone 7+ 的屏幕如此之高,结果导致我们的拇指不得不多用 150% 的距离来击那些烦人的按钮。这不过一两个关节的长度而已。没啥好奇怪的。Huff 的触摸区显示了右手拇指的可达性

我们的视觉语言随着设备的变化而改变。是时候从导航栏转移到拇指触及范围...

你的产品 UI 准备好国际化了吗?

导读:

近年来,越来越多的国内开发者将目光从国内转移到国外,纷纷投入到移动大航海时代的浪潮之中。在产品国际化的过程中,产品UI是否也跟上了国际化的步伐?Dropbox 设计师 John Saito 针对产品设计国际化中出现的问题进行了分析并提出了 7 条建议,值得一看。

假设你正首次使用一款新 app,它在 Twitter 上好评如潮。人们都说这款 app 棒极了、改变了他们的生活并且令人愉悦。

你打开它并看到了如下一幕:


呃…有点怪。顶部有个视频,但是你不知道这是什么语言的标题。措辞很奇怪,而且按钮文字甚至都不与按钮相匹配。人们是怎么认定这是一款优秀 app...

跟迪士尼学动效设计

发布了长文章:跟迪士尼学动效设计

点击查看

发布了长文章:《跟迪士尼学动效设计》

一个按钮引发的思考

故事需要从一个dialog说起……

在最新的一期需求中,有一个细节是针对功能关闭增加了一个拦截dialog,目的是希望降低功能的关闭率。

我的设计是这样的,但是在进行内部showcase的时候是这样的,谁动了我的设计稿?

我找到PM对当前的实现方案提出了质疑,有两方面的原因:

1.按照谷歌规范,dialog的左边是忽略性操作(例如取消、不同意…),右边是肯定性操作(例如确定、同意、删除、停止…)。

2.在我们自己的应用中,所有的「取消」按钮都是放在左边、不强调的样式。

结论:当前的实现不符合规范。

PM听后立马就我给出的原因进行了反驳:

1.在我们的应用中,确认停止dialog的左侧按...