首页

iOS人机界面指南-3D Touch

用心设计

Peek和Pop

Peek可以让用户在没有打开应用的情况下预览的应用所支持的快捷操作。轻压有支持Peek的应用图标可以显示一个矩形的Pop视图(有时称为提示)。

iOS人机界面指南-3D Touch,mobile ui

iOS APP UI设计之从效果图到UI切图

用心设计

完善的公司会把项目相关人员聚集起来,产品经理会把产品详细的用原型展示出来,包括产品定位,市场需求,主打卖点,产品性质以及各模块具体功能,逻辑跳转演示一下;之后会评估项目用时,各部门协调,项目启动。

话不多说,接到原型,那我们应该做什么准备工作呢?

关于Android和IOS交互上那些事

用心设计

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供有效的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

来源:莫贝网

先说Android平台,自从material design面世以来,市场上很多Android app在设计上参差不齐。可能由于设备及用户使用习惯等各种原因,大多数app都还在以Android 4.0的规范在做设计,当然也有很多app为了省事,直接从iOS上照搬过来。因此,真正以MD为设计基础的应用并不多。下面是一些整体的框架记录,更为详细的交互细节以后再说。

 

1

仔细阅读MD的规范,似乎写的很清楚,但是如果和Android4.0规范放在一起,还是会发现很多有出入的地方。不过规范的目的是为了培养并迎合用户使用习惯,减少用户认知负担。文字是死的,人是活的,灵活应用才是关键。

在以MD为基础的app设计中,经常会出现以下结构(如图1)

1

在Android 4.0和material design设计规范中都专门对选项卡进行了说明,但两者的说法不同。

在Android 4.0中,选项卡tabs属于操作栏的一部分,可以很轻松探索 app 中的不同功能,或浏览不同分类的数据集,就是说tabs选项卡是可以作为导航使用的,类似于iOS的标签栏,只是iOS放在屏幕底部,安卓是放在屏幕顶端(如上图2)。

但在material design中,tabs 的作用是将大量关联的数据或者选项划分成更易理解的分组,虽然很容易让人联想到导航,但其本身并不是用来导航的。每个tab的内容应该互相关联并且是在同 一个主题下(如下图)。图中出行方式可以通过tab划分成多种方式,但是搜索、指南、设置却完全属于不同的功能导航。

1

如此看来,两种规范似乎是相互冲突的,而且只要留心一下你会发现,现在市场上经常是这两种形式都有。googel官方比较推崇应用结构是:左侧导航抽屉+应用栏+tabs(Tab可选),但是同一种结构却有两种不同表现方式。

方式一:谷歌主推形式

侧边栏导航作为应用的主导航,头屏显示应用最重要的功能或内容,如果在较低层级中有多个平行相关视图,可以用Tab结构(当然也可以没有)。这种结 构的关键是主要功能或内容很突出,所以头屏最大化显示,而其他功能相对较弱,不需要频繁切换侧边栏导航(如下图)。谷歌发布的inbox邮箱,左侧导航栏作为主导航,默认显示收件箱页面,用户最常用也最重要的功能是查看收件箱,至于其他的发件箱、垃圾邮件等都可以放在导航抽屉内收起。googel图书顶部是应用栏+tabs结构,此处Tab强调的是在同一主题下的不同归类,而不是导航。

1

方式二:市场发展

或许是受4.0规范的影响,在左侧导航抽 屉+应用栏+tabs的应用结构中,Tab作为应用的主导航,而左侧抽屉作为辅导航,收纳一些用户不常使用的功能,像用户中心、设置、反馈等。这种结构适 合那些多个相同等级的功能视图需要频繁切换的app,且只需要手指左右滑动就能快速切换Tab视图,这将大大提高应用使用效率。如下图所示,虽然是概念设计(主要是国内安卓应用喜欢延续iOS风格,将Tab放在屏幕底部,米找到合适的例子,且MD没有被普遍应用),但很适合该场景下的示例。这款产品类似于微信,将主要功能导航放在顶部,实现快速切换,侧边抽屉导航放置收藏、状态、设置等次要功能。

2

以上两种方式并不冲突,关键是看你应用的功能内容。如果你的应用核心功能很突出,且不需要其他功能频繁切换,就选择第一种;如果你的应用有两个或者两个以上相同重要的功能模块,且需要频繁切换,比如微信的即时聊天和朋友圈,那就尝试第二种。

Android部分暂时就到这里,来看看iOS。如果展开来讲,体系太庞大,暂且用一张图表示,虽然都是很基础的内容。

 

1

另外,Android和IOS很明显的差异是层级返回和编辑选择。

1、层级返回

IOS平台没有实体返回按键,所以涉及层级间的导航,app界面本身一定要有返回按钮,而实体home键只负责应用退出。Android平台有物理 返回按键,且点击返回的是动作流。比如,在搜索界面,点击搜索框调出软键盘,再点返回按键,不是返回上一页,而是收回弹出的软键盘,它强调的是返回上一个 动作的界面,而非层级关系。在Android平台上的app,如果应用本身含有返回按钮,返回的是上一层级,设计的是层级间的导航。另外,在安卓app的首页点击返回按键,就是退出应用。可看如下关系图

1

2、编辑选择

对于编辑选择功能,IOS有明确的入口,通常在导航栏 上有编辑按钮,点击后进入编辑模式,通常可以多选,同时底部或顶部会增加工具栏,用来处理多选内容。当然也可以单选删除,通过点按向左滑动删除,或者是点 击按钮从底部呼出操作菜单,逐个删除。但Android是通过长安方式进入编辑模式,此时操作栏被一个临时情景操作栏覆盖(情景操作栏可以覆盖顶部操作栏 和底部操作栏),界面内容允许单个或多个操作(如下图)

1

以上部分其实都是一些平台规范总结,将区别大且重要部分整理出来,也是为了方便阅读查看,后期会持续更新一些其他交互内容。

作者:butter
来源:jianshu

别具匠心!24款惊艳难挡的IOS APP网站着陆页设计

博博

随着iOS设备的大规模普及,优质的iOS应用如同雨后春笋般层出不穷。每天都会有惊艳的iOS应用涌现,从社交媒体到隔壁老王,你会从各种不同的渠道听到它们的名字,被不同的人安利。通常,这些优质的APP都会有一个逼格不低的官方网站,经过精心筛选之后,我们优选出24个品质不错的iOS APP的官网。这些网站有的简约,有的优雅,有的好玩,其中总会有几个令人爱不释手。

App设计者需要注意的21条禁忌

用心设计

我们通常在做APP设计的过程中,遇到很多看似很小,且很容易被忽略的问题,正是这些小问题,一次次的撩拨用户的耐心,让用户对你的APP心生怨念。现在WeX5君呕血为大家整理出APP设计的21条禁忌,希望与APP设计者的您共勉。

jinzhi

向用户征询iOS授权的五种常见设计模式

用心设计

很多app会在初次使用的过程中直接弹框索取权限。确实是最简单的实现方式,但被拒的可能性也最大(除了那些足够大牌到用户没理由不信任的产品),用户如果决定重新授权,必须完整执行前面提到的设置流程,因为这个弹框是唯一一次决定的机会。

有些功能相对复杂的app更是会在初次加载的时候就执行一系列的授权申请,先是要求调用相机,然后问是否允许获取地理位置,最后还要让你授权接收消 息通知。某些时候,这种简单粗暴的方式也确实可用,比如前面提到的,用户已经足够了解和信任这款产品的情况下。但对于多数产品,你不能做这样的假设;即便 对于那些大牌,说到底也无法100%确保用户不会看走眼或习惯性的点击拒绝。

01-ios-app-permission-ux-ui-design.png

iOS和Android设计理念的演变

用心设计

IOS和Android是移动操作系统中最大的两个阵营。毫无疑问,这两个系统可以说是手机行业里的一个奇迹,并且也在逐渐变得完善。

一部智能设备撇开众多的功能不说,一套不错的UI界面和良好的交互模式是一部智能机的基础。如果没有有用的用户界面,那么设备也不过是一块没有作用的电路板。

尽管这两个操作系统更新迭代的时间有些漫长,但如果你压缩每代系统更新的总时间来看,你就会发现IOS和Android在UI上面的变化还是挺大的。

在这里,我们以UI设计理念进行对比,一起来看看这两个操作系统随时间的演变。

IOS和Android在UI上的开发

起源

IOS中4种UI元素的可用性问题及优化建议

用心设计

这周又是一篇来自Nielsen Norman Group的文章。供参考吧,这种文章背后的思维模式甚至是精神才是最该汲取的,内容本身反而是其次;这样的东西看的越多,实践当中具有代表性的产品案例经历的越多,你越会发现,设计这种事,在很多时候,无明无暗,无是无非,有的只是特定的产品、特定的资源、特定的情境、特定的用户群体,以及所有这些因素混杂在一起之后摆在面前的需要不断权衡、争取或妥协的各种可能性。下面进入正文。那些大的软件公司,譬如Apple、微软、Google等等,通常会为第三方app设计师们提供一系列设计指南。这样做的目的在于

01-ios-design-guideline-mode-break-usability-test.png

无声处听惊雷!如何用微文案改善网站的用户体验?

周周

micro-copy-improve-website-ux-1

为什么有些产品深入人心?他们的设计中,是什么使我们感觉亲近、愉悦和高兴?今天重点从微文案方面聊聊提升网站体验的方法,内含不少优秀案例,来看看国外网站的优秀文案长啥样。

与IOS正面交锋!MATERIAL DESIGN只是独辟蹊径,并未全面胜出

周周

material-design-is-not-better-1

Material Design发布之时,Google在设计领域做出的努力令我印象深刻。在这方面Apple一度遥遥领先。这种局面结束了。记得我以前总抱怨 Android设计的那套不统一、缺乏文档、缺乏吸引力的暗色主题,还有模棱两可的汉堡菜单的滥用。Material Design解决了其中很多问题。如今它提供了一套统一的设计语言,更明亮、色彩丰富,并且背后有深思熟虑的设计指南作为坚实支撑。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档