水平滚动界面

UI / UX基础研究

使用水平滚动界面的杂志概念

序幕

它总是困扰我,所有的应用程序都使用依赖于垂直滚动的界面原理。我打赌你每天打开的前三个应用程序是基于此。所以我问自己一个水平滚动的原则如何工作的问题。我做了一些基本的UI / UX研究,并提出了一些非常整洁的解决方案。当然,这个系统并不像垂直系统那样完善,但它是一个起点。这就是基础研究的重点。

基本的UI / UX研究在我看来是一个非常宝贵的事情,我们可以做一个设计社区。可悲的是,它只是很少做,所以我必须鼓励你自己做。只是想想一个你感兴趣的话题,认为可能需要一些改变。或者你可以想出一个更好的解决我的问题。

以下是一些必须进行研究的例子:

阴影;汉堡包菜单平了后呢?在线广告;汽车接口;类型;饲料;孩子接口你最简单的是什么?音频接口;应用程序抽屉AR / VR接口梯度;重新设计桌面;在流中评论;网格/离网格;饲料;登机UI和算法;以及更多!

但现在让我们开始水平滚动。

水平滚动

提出正确的问题

我的问题:应用程序的水平滚动系统如何工作?

我想做一些新的东西,深入我们的设计原则,这就是为什么我选择这个问题。首先,我必须找到两个系统之间的区别。所以我做了几个草图来说明。

两个系统之间的基本比较

在垂直系统中,页面彼此排列,用户向下滚动以查看更多内容。菜单位于顶部和底部。我认为这个系统是如此疯狂地传播,因为从一开始的移动应用程序,垂直系统就是标准。大多数设计和原型软件都是基于垂直画板。

在这两个系统中,您有大约相同的空间。所以只是看这个,有人可以认为他们是一样的。但是恶魔在细节上,这些细节是菜单和用户指南。

回答问题

菜单占用多少空间

因此,我遇到的第一个也是最大的问题是菜单。我一直认为他们吃了大量的空间,你可以在左边看到,垂直系统没有使用这个空间非常聪明。顶部有一个导航栏,底部是经典的水龙头吧。有时,当用户开始滚动时,这些菜单会消失,但这不是最优雅的方式,而是非常用尽。所以我必须先解决这个问题。

我解决了这个问题,只给用户一个简单的指示,有更多的页面要发现和汉堡包菜单。此解决方案使用的方式较少,但不提供有关您可以使用这些菜单的任何信息。为了摆脱这个问题,用户开始向上或向下滑动时,菜单将会改变,导航菜单中会出现标签。

我的水平概念中的两种菜单类型

在左侧,您将看到打开的导航菜单。一旦用户在两个屏幕之间进行切换,它将消失。此菜单可以显示更多的信息,如应用信息,通知或图标。右侧是画布左侧菜单,可以通过左下角的图标进行访问。它可以容纳搜索,联系人或只是附加菜单等功能。

基本布局

在进行所有的研究和素描之后,现在是基本布局的时候了。此示例由四个页面组成(其中一个是设置)和一个离线画布菜单。它基于一个简单的网格系统。离线画布菜单有一个搜索框和六个其他元素,如共享,编辑或快速访问不同的功能。下面的视频显示了正在运行的元素。对不起笨拙的动画,但是我不得不使用After Effects,因为没有原型软件支持这样的系统。


水平滚动界面01


基本布局动画

在做这个基础系统后,我想把它应用到一个用例。所以下面是一个应用程序概念,我深入了解这个话题,并提出了一些我认为存在的问题。问题如:阅读,浏览或全屏内容的呈现。

杂志

这是一本策划的杂志的例子。它分为不同的部分,用户在主页面中滚动。我尝试使用设备预览并认为,这感觉很自然。内容正在关注中,并以非常动态的方式呈现。当用户滚动进纸时,几乎所有的菜单消失,进一步增强了用户体验。

杂志的主要饲料

特别是全屏的图片看起来很神奇,它感觉有点像中的故事。在每个部分开头停止滚动的锚点将有助于导航一个长的饲料。总而言之,我可以说,滚动这样的饲料是非常有吸引力的,是水平滚动的一个很好的例子。

阅读页面

另一方面,阅读在水平界面中是非常困难的,并不感觉很有机。关于它的好处是,将文本分成段落,这很容易以强制用户以意思的方式阅读。解决方案将是水平页面系统和垂直滚动文章的混合。


水平滚动界面02



结尾

我希望我向您展示了一种考虑移动应用程序设计的新方式,并激励您制作自己的UI / UX基础研究。在这个水平滚动系统的制作过程中,我学到了很多关于设计的基础知识。我对结果感到满意,但我认为在这方面需要做更多的研究。特别是现场原型将有助于了解用户是否接受这一概念。Snapchat的兴起向我展示了UI的新方法是值得的,用户热衷于探索新的应用程序设计方式。

这个概念代表了我对设计的看法,我很想在评论中阅读和讨论你的反馈意见。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,072评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,093评论 4 62
  • 员工培训课上,老师给我们说了个有趣的例子。 一条麻绳的价值有多少呢? 如果它和废报纸绑在一起,那就跟着废报纸一起流...
    扶绫阅读 1,023评论 9 5
  • 明天和意外,你永远不知道哪个会先来,但明天总会来,只是如果意外先来了,明天就不再是属于你的明天。它会是所有人的明天...
    心声树洞阅读 255评论 0 0
  • python的版本很多,但是我们用pycharm的时候实际用的源不同,写代码的时候pycharm就不会有提醒,或者...
    苟雨阅读 1,347评论 0 2