• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 有意思!一个独立开发者总结的App 迭代设计思路

有意思!一个独立开发者总结的App 迭代设计思路

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含App设计,经验分享,迭代等相关知识,希望在学习及工作中可以帮助到您

@平行煎餅?:这篇文章是一个独立开发者阐述自己App 迭代的设计思路,特别有意思,你可以学会他如何提升各种细节的用户体验。

Overcast3发布了,这是一个巨大的版本迭代,主要体现在界面的设计和流程。根据两年多的测试、使用和用户反馈,从上个夏天开始,我一直在为这个版本而努力工作。

我在2014年为iOS 7设计了Overcast1.0,这是一个具有时代标记的产品:使用了超细的字体和线,边缘锋利,全屏白色背景和半透明模糊的底栏,大部分基础功能需要隐藏手势操作。这种基础的设计贯穿于每个版本的更新中,直到今天。

Overcast 3.0的设计目标是:

  1. 将iOS7的样式设计更新到今天的设计趋势:可视性更高、更多曲线、更粗的字体、更少半透明、更多触感。App设计趋势并不是一成不变,许多iOS7的设计设计现在看起来略微过时。
  2. 将所有功能置于打开状态:添加了可视的控制、功能可见性更好。之前很难找到隐藏在手势背后的功能,例如,单元表格首先需要点击“edit”按钮,才能进行滑动操作。你可能无法现象有多少用户反馈,要求我添加已经存在的功能,或者找不到例如“删除”剧集之类的基础功能,这完全是因为它们在设计中不够明显。
  3. 适配更大屏幕的手机: 放大可触控操作的目标,并且更利于单手操作,即使只能操作部分屏幕。同时,我还想减少潜在的误触,特别是左下角和右边屏幕的边缘,我猜,未来的iPhone的边框可能变得更窄。Overcast 1.0是为iPhone5s设计的。所以,一些基础的设计原则现在需要被重新审视,毕竟现在的主流的屏幕大小是4.7和5.5英寸。

卡片式的播放页面

我修改了播放页和App其余页面的之间的结构关系,使用了新的卡片式的结构,用从底部向上滑动代替从右边推入:

当下最热门的音乐以及播客App已经完全接受了从底部上滑出播放页面的方式(包括iOS 10的Apple Music),用户们已经从别处习惯了这种操作方式。

播放页面从一个mini播放条平滑的被拉起(或者只是点击),并且可以在播放页面的任何位置向下滑动平滑的收起(或者点击”向下“的小箭头)。

卡片式的播放页在app的其它页面的状态下都是可用的,以相同的方式运行,加快普通任务的完成,并且大大增强了单手使用效率。

我还重新设计了播放页本身。以前的播放页是在一个隐藏的滚动区域中显示剧集注释,用户需要向上滑动封面才能显示注释,相对而言,不太容易被用户发现。

现在,水平滑动播放页面,可以在显示左侧的“EFFCETS”和右侧的剧集注释,封面下面有标准的“page dots”来指示在哪个页面。

“EFFECTS”和“PLAYBACK”功能的弹窗已经合并为一个效果面板:

两个关键的控制按钮从屏幕左下角和右下角边缘移开,使得“回放”和“前进”功能的操作区域更大,并且减少了大屏幕手机上的误触。

播放列表,剧集信息,和播客页

从最初的1.0版本以来,播放列表就有手动排序功能了,但是许多iOS用户从来没有点击过导航栏里面的“Edit”按钮,很多人甚至不知道有这个功能。对于那些知道这个功能的人,两个步骤的操作也是很麻烦的。

新的播放列表页具有实时重新排列功能,这样能让用户更好的发现内容:

mini播放条现在变的更大,更容易操作,配备更大的按钮,并且在没有当前播放内容时隐藏。

我还同时换掉了令人讨厌的剧集信息弹窗:

旧版本的弹窗缺乏与周围背景的对比,展示空间比较小,并且需要小心在边界内点击来避免误触,而且对单手操作的用户是很不友好的。

现在的剧集信息卡更像是Overcast 3的其它卡片:快速向上滑动打开,然后按住卡片的任何地方轻松向下关闭(或从左边缘向内)。它也支持3D Touch预览和向上滑动快速操作。

播放,删除,队列

以前的版本中,点击列表中的剧集,会立刻开始播放。在你想要听的时候,这是很好的,但是意外触碰到会引起问题:我发现当我试图重新排列、删除、或者查看详情时,太容易开始播放。

很多用户从来不会滑动单元格(或点击“Edit”按钮),因此他们永远都不会找到删除按钮。自从Overcast 1.0发布,我收到了几百封电子邮件,问我如何不在播放的状态下删除剧集。

为了解决这些问题,我想到了一个两个阶段的方法:点击一个剧集选择它,显示各种操作按钮,点击中间新加入的播放按钮可以播放它。

我想这应该是Overcast 3中最具争议的改变,它减慢了播放操作的速度,但我觉得它更具一致性,习惯了旧的操作方式的用户,在使用它几天之后也会习惯,而且这能使App变的更可靠,更能被每个人所发现。

我还在这里加了一个新的按钮:“加入队列”。

“下一首播放”的功能算是Overcast里最受欢迎的功能之一。我花了很长时间去思考这个功能,因为我觉得“播放列表”其实发挥出了相同的作用。不过其实两者有很大的不同:

  1. 可以从界面快速添加剧集进播放队列。
  2. 在Overcast3中,用新的选项来开启手动播放列表功能来代替匹配iTunes“智能“播放列表:手动播放列表只包含用户明确添加的内容,而“智能”播放列表(以前Overcast唯一的播放列表)是一些自动包含或排除的规则。许多用户希望它们的播放队列或下一个播放的是手动的播放列表。

新的队列功能只是存在于特殊的Overcast播放列表。如果里已经有了一个名为“队列”或默认的”所有剧集“,则可以使用新队列功能,如果没有,它则会根据需要创建。这种情况无处不在,并像其它播放列表一样具有完整的功能。

其他的一些改进

频道页有一个巨大的设计缺陷。快速:在旧的页面中,你如何调整剧集的排列顺序,播放最新或最旧的剧集?

在iOS平台上没有这个的标准,所以我复制了一个桌面端和web端的三角形指示图标,点击可以使他调转方向。没有人能找到这个功能,所以我在每个频道页的设置下添加了一个清晰的标签选项。

老版本的频道页有很多令人烦恼的内容:已经订阅的频道变暗,如果点击它,会显示烦人的警报,你只能一次添加一个频道,等等。

现在,对任何一个节目剧集进行相同操作,都可以添加到多个播客节目,而不必回到每个目录。当然,是以卡片的方式展示,所以很容易就可以往下拖来关闭它们。

其他一些更新:

widget和通知。

一个全新、更快的手表应用,在watchOS 3上发布。(之前的手表应用还只是在watchOS 1上运行。)

并且我将一些代码改成了Swift!(这也是这个APP的大小从7MB变成30MB的原因:由于Swift还很年轻,所有的Swift APP仍然是在使用Swift库的自定义副本。)

更好的广告

我以前的赞助模式失败之后,在去年9月,我添加了Google的广告,我自己给自己找了两个麻烦:

  1. 糟糕的广告:我无法控制广告客户和广告内容,这些广告可能是很令人反感的。我以为我可以设定足够的限制规则,但是实际应用还不太好。Google提供了一个宽泛的控制面板,可以让你阻止某些类别的广告。大多数放在敏感的分类中,并且在发布之前很容易被禁用,例如赌博、毒品等。但是我不断的从用户那边听说他们看见其他类别的广告,感觉被冒犯。例如,至少有一个用户的界面上出现了枪支的广告,而我从来没有关闭过敏感分类。枪支火药不在毒品和赌博的敏感分类中,它在商业和工业-安全设备和服务的类别中。所以我一直努力阻止更多类别的广告,但是结果却是我还是在一直接受我不想要的广告。还有别的互联网广告系统,但是他们更糟糕,或者赚不了钱,或者两者都有。
  2. Overcast 中的神秘代码:我不得不讲Google广告的封闭源库嵌入我的应用中,并且接受所有

您可能想查找下面的文章:

  • 手机APP用户界面设计的10点建议
  • 关于音乐播放App(应用软件)的分析与重设计 如何设计出漂亮的音乐播放界面
  • 写给新手的APP结构指南:首页相关(上)
  • 基础科普!重复与突变在产品设计中的应用
  • 超全面的导航设计基础知识总结(一)
  • 写给UI新手的APP结构指南:注册和登录
  • 用户体验是一种过程,而不是结果
  • 超全面的移动端UI 设计规范整理汇总
  • 感觉设计不舒服但又不知道原因?可能是这8个常见的交互细节问题
  • 这个帮你改善睡眠的APP,是这样设计出来的

相关文章

  • 2017-08-28保护你的网站免受这七大常见黑客攻击
  • 2018-08-23会员中心如何设计,用户才会买单?
  • 2018-08-23设计的套路:10个小技巧让长表单填写更省事
  • 2018-08-23动效在UI设计中有哪三个关键用途
  • 2018-08-23设计师该如何维权?看这篇超详细的流程总结!
  • 2018-08-23交互设计师为什么需要具备产品思维?
  • 2017-08-06div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
  • 2018-08-23优设首发!iPhone X 官方人机交互指南中文版
  • 2018-08-23这两个最常见的交互控件,你知道该怎么用吗?
  • 2017-08-06编制网站首页的基本原则

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 编写高质量代码 Web前端开发修炼之道 书摘精要
    • 如何让设计团队的工作效率提升50%?亲测实用的方法!
    • 10个优秀的 Web UI库/框架
    • 阿里巴巴将以“全链路”设计取代UI/交互岗位,高手怎么看?
    • CSS3的几个标签速记(推荐)
    • 豆瓣9.0分的《我不是药神》,海报也是超高分!
    • 将视频融入网页设计有哪些讲究?
    • 使用字符代替圆角尖角研究心得分享
    • 5个步骤实现响应式Web设计方法 与瀑布模式说”再见”(图文教程)
    • 如何做出用户不反感的错误提示?来看这篇总结!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有