path2.0 UI path 2.0的华丽转身

2024-06-11 01:58
文章标签 ui path 2.0 华丽 转身 path2.0

本文主要是介绍path2.0 UI path 2.0的华丽转身,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

path2.0惊艳了很多人吧。敢于拒绝google一亿美金的收购,果然有留一手:)

  她的创始人Dave Morin说新版不久就已经超过150万人下载,而老版一年才突破了100万关口。用户一天内在新版分享的内容超过老版一年的内容。

  path2.0之后带来的用户量和活跃用户的暴增最大的功臣莫过于界面设计和体验上的不俗表现
1、产品定位的转变引发UI设计的调整

  path1.0的时候大家似乎还没有看出她和instagram等等一系列社交软件明显的差异化。path2.0已经将定位清晰表达出来了:和亲密好友分享生活日记的app(Path is the smart journal that helps you share life with the ones you love)。

  虽然她在可添加好友数量从50暴增到150,但无论是睡眠、起床之类的个人信息分享,强化的timeline feed样式,还是只有昵称没有头像的简约,都传递出她希望和亲密的人分享自己生活日记这一中心。

  在界面表达上,设计师也传递着这一核心定位:

对比path1.0的图标,2.0在UI上做了日记本隐喻的处理

loading时候,如日记本打开的翻页效果

2、突破ios瓶颈的架构方式

path1.0 vs. path2.0

  在整个path的改版中,最为惊艳的还是她突破ios的一些制约,创新的一些架构模式。

  在path1.0时,底部还是采用非常传统的tab导航方式。架构上也普普通通没有新意。

  由于手机屏幕尺寸和手指碰触的限制,44*44像素的最小触碰尺寸造成了底部导航tab只能放少于等于5个。这对于功能的扩展造成了限制和瓶颈。

  path2.0完全颠覆了iOS guild line的模式,采用三屏模式(左屏、主屏、右屏)

  同时架构上凸显了这种方式具有的极好的扩展性。


  可以假想,path在设计之初也面临添加各种其他动能(比如音乐、地点、和谁在一起、起床睡觉)时候面临,中间的拍照键不好满足的情况。因此,采用这种三屏模式,极简了主页面,主屏仅留下feed展示,和添加功能。将导航放入左侧的屏幕,增加了未来的可扩展性,同时也保证主屏幕清晰的内容:动态展现和添加我的动态,还有最新的消息提醒。

  她深知对于消息来说,新增的消息才是重点。一方面在主屏底部显示了最新一条消息的摘要和未读消息的数量,另一方面把全部消息收在左屏的activity里面。

3、timeline的影响

  好吧,path的创始人来自于Facebook,path2.0出场的一刹那我们就看到了Facebook的timeline的影子。Facebook的timeline也出现的在终端上了,和path几乎一模一样。先不去争辩究竟是谁抄袭的谁。path在feed的展示上格外强调时间线的展示方式。

  在手指拖动屏幕向下滚动的同时,右侧浮现各个feed分享的时间,时钟动态的显示回转,强化了时间线(timeline)。
4、更加直观的表达

  交互设计中,所见即所得(WYSIWYG)对于用户来说是一种最容易学习的交互模式。

  新手任务中,用户需要添加个人cover。添加的个人信息,即时的在当前位置表达、编辑信息。之后的展示上也采用一致的布局,让用户非常清晰了解到所输入的内容结果如何,也算是“操作前结果可预知”的体现。

  社会化网络的两大精髓:表达自我,了解他人,在个性化cover上表现的淋漓尽致。

  另一个方面是手势的直接表达。path摒弃了除了点击(tap)以外的其他手势。对于滑动显示等其他手势来说,点击(tap)才是最直观的、优于其他操作的手势。

  主屏左下角的+绝对是亮点。有没有想过为何放在左下角?又为什么采用弧形展开?仅仅是为了追求炫目的效果么?

  其实对于手势来说,多数人都使用右手为利手,同时使用右手拇指单手操作。那么方便的可触碰区如下图:

右手利手的拇指可触碰区

  图中的easy区是容易操作的区域,且成弧度展示。对于展开的6种功能平等且易操作的展示。那么path2.0的主操作,放置在左下角,采用弧度展开也有依据的。并且,她在同一个位置展开后,转变为×号,复用位置,节约操作空间。

  除此之外,path2.0在动画效果展示上也极富爱心。loading的翻书动画,图片upload效果,音乐播放的从大到小展示,都让path的体验变得卓越。

这篇关于path2.0 UI path 2.0的华丽转身的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1049894

相关文章

VS配置好Qt环境之后但无法打开ui界面的问题解决

《VS配置好Qt环境之后但无法打开ui界面的问题解决》本文主要介绍了VS配置好Qt环境之后但无法打开ui界面的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目UKeLvb录找到Qt安装目录中designer.UKeLvBexe的路径找到vs中的解决方案资源

无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案

《无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案》:本文主要介绍了无法启动此程序,详细内容请阅读本文,希望能对你有所帮助... 在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是"api-ms-win-core-path-l1-1-0.dll丢失

QT6中绘制UI的两种方法详解与示例代码

《QT6中绘制UI的两种方法详解与示例代码》Qt6提供了两种主要的UI绘制技术:​​QML(QtMeta-ObjectLanguage)​​和​​C++Widgets​​,这两种技术各有优势,适用于不... 目录一、QML 技术详解1.1 QML 简介1.2 QML 的核心概念1.3 QML 示例:简单按钮

在 PyQt 加载 UI 三种常见方法

《在PyQt加载UI三种常见方法》在PyQt中,加载UI文件通常指的是使用QtDesigner设计的.ui文件,并将其转换为Python代码,以便在PyQt应用程序中使用,这篇文章给大家介绍在... 目录方法一:使用 uic 模块动态加载 (不推荐用于大型项目)方法二:将 UI 文件编译为 python 模

解决jupyterLab打开后出现Config option `template_path`not recognized by `ExporterCollapsibleHeadings`问题

《解决jupyterLab打开后出现Configoption`template_path`notrecognizedby`ExporterCollapsibleHeadings`问题》在Ju... 目录jupyterLab打开后出现“templandroidate_path”相关问题这是 tensorflo

解读静态资源访问static-locations和static-path-pattern

《解读静态资源访问static-locations和static-path-pattern》本文主要介绍了SpringBoot中静态资源的配置和访问方式,包括静态资源的默认前缀、默认地址、目录结构、访... 目录静态资源访问static-locations和static-path-pattern静态资源配置

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

python中os.stat().st_size、os.path.getsize()获取文件大小

《python中os.stat().st_size、os.path.getsize()获取文件大小》本文介绍了使用os.stat()和os.path.getsize()函数获取文件大小,文中通过示例代... 目录一、os.stat().st_size二、os.path.getsize()三、函数封装一、os

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面(UI),包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面:python带你玩转UI设计示例:使用Tkinter创建一个简单的窗口绘图魔法:用

element-ui下拉输入框+resetFields无法回显的问题解决

《element-ui下拉输入框+resetFields无法回显的问题解决》本文主要介绍了在使用ElementUI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的... 目录描述原因问题重现解决方案方法一方法二总结描述第一次进入页面,不做任何操作,点击重置按钮,再进行下