恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
浅析知乎安卓端、iOS 端和 web 端设计模式
0.0°
2016-09-13 原创文章 经验/观点 举报 10417 152 140 9

浅析知乎安卓端、iOS 端和 web 端的设计模式。



Android 端



知乎的安卓端按照安卓 5.0 规范进行设计,以下是个人从设计规范角度对知乎安卓端的分析。


首先分析主界面结构,界面从上到下分为三部分:

1.顶部应用栏:显示界面名称,放置操作控件,作为二级导航;

2.中间主要内容显示部分,从设计模式来看几乎都是垂直列表;

3.底部标签式导航栏:1.首页 2.发现 3.消息 4.私信 5.更多。(进入“值乎”后底部导航栏有所变化)


顶部应用栏便于用户对该界面进行相关操作或者作为次级导航使用;中间垂直列表显示内容清晰、易读,同时也被大量作为导航使用;底部标签式导航栏便于用户在任意界面快速切换到其他模块,充分利用底部标签式导航的优势。


值得一提的是,众所周知为了便于用户操作,顶部应用栏和底部标签栏都会占据界面大量空间,“知乎”作为以阅读内容为主的 App,为了使用户能看到更多内容且不被其他元素干扰,在下划浏览内容时自动隐藏顶部和底部区域,而不是像其他 App 那样驻留。这是一个能让用户觉得很爽的设计。


整个知乎安卓端都遵循以上界面结构规范,用户体验和UI风格一致,设计严谨使用户产生信任感且易于理解和使用。由于知乎功能较多界面也非常多,所以下面仅针对几个主要界面进行分析。




1.首页


Image title


首页顶部应用栏放置了搜索框和新功能“Live” 入口。很多人上“知乎”都是为了看其他人对某个问题的看法,所以搜索操作无疑是整个“知乎”最为重要的功能,将它放置在首页并几乎独占整个顶部应用栏契合用户需求。并排放置的“Live” 入口,体现了知乎团队在知识变现大环境下对该新功能的重视,它是如此显眼使得不知情的用户都会好奇的点击进入看看到底是什么,从而大大提高该功能使用率。


首页中间的垂直列表显示热门回答,主要显示问题名称和内容开头部分,每条几乎占用屏幕三分之一的位置。从设计模式角度分析,采用的是每条显示问题名称+内容预览的图文垂直列表模式,虽然比只显示问题名称要占用屏幕更多空间从而降低显示条目数,但这样做用户不会因为同时接受太多信息而受到干扰。但内容预览并不能给用户提供太多关于内容的信息。如果能做到像“好奇心日报”那样每条内容都做一句话概括,则能大大帮助用户在没有点开条目的情况下获知内容概要。


另外,中间部分的垂直列表中有一类比较特殊,即展示“Live”内容的小图展示型轮播面板,想必也是知乎产品团队为了提高该功能使用率而增加其曝光量。可以手动控制划动方便看到更多内容。


首页底部的导航栏放置的是“首页”、“发现 ”、“消息”、“私信”四个主要功能模块,剩余功能模块都放在了“更多”里。从设计模式角度分析,采用的是底部标签式导航与抽屉式导航相结合模式,即能做到各功能入口扁平,切换方便快捷,又能很好的收纳不那么重要的功能并方便找到它们。相对于将抽屉式导航放置在顶部操作栏的传统做法,将其放在底部标签式导航栏里,在大屏时代显然后者更易被用户点击从而增大使用率。


首页还一个重要元素就是右下角的圆形黄色按钮,这是一个标准的安卓 5.0 控件——浮动动作按钮,作为该页面的核心功能入口无论从人机交互还是视觉上都在引导用户点击。点击后出现三个功能入口,分别是“写文章”、“回答”和“提问”,这个设计非常方便用户找到输出内容的通道。




2. 发现


Image title


“发现”页面结构和“首页”基本类似,顶部应用栏变成了二级标签式导航,方便该功能内的各模块间切换。


中间部分也几乎是垂直列表设计,但各模块都有明显区别,不仅因为各模块功能侧重点不同,这种差异也不至于用户将各模块混淆。“推荐”由大图展示型轮播面板和图文垂直列表构成,突出了轮播面板的内容,可用于热门推荐或广告,虽然是每隔 5 秒自动轮播,但认为还是需要加上轮播控件,示意用户可对轮播图进行划动操作。其他模块也是由标准垂直列表或图文垂直列表构成,不一一分析。


该模块也有一个圆形浮动按钮,点击后随即进入一篇文章。由于“发现”模块对于用户来讲是一个无目的浏览的状态,往往用户也不知道该看些什么,所以做了一个帮助你做决定的小功能,是个贴心的设计。




3. 其他


从设计模式角度来看,“消息”、“私信”模块和“发现”模块区别并不大,主要是垂直列表的模式有所区分,因为对于消息通知这类信息,看中的是条目的显示数量,所以设计权重也更倾向显示更多数目。





iOS 端



从产品及交互体验来看,知乎的 iOS 端和安卓端体验上基本一致,只是各自遵循的设计规范有略微差别,各有优缺点。所以这里主要分析的是和安卓端的差别。


同样,知乎的 iOS 端遵循 iOS HIG(Human Interface Guidelines 人机交互指南) 进行设计,主界面结构和安卓端基本一致,界面从上到下分为三部分:

1.顶部导航栏及工具栏:显示界面名称,放置操作控件,顶部标签式导航;

2.中间主要内容显示部分,从设计模式来看几乎都是垂直列表;

3.底部标签式导航栏:1.首页 2.发现 3.消息 4.私信 5.更多。(进入“值乎”后底部导航栏有所变化)




1.首页


Image title


首页和安卓端几乎一样,从区别来分析:


1. 顶部搜索栏 +“Live”入口,和安卓端比,视觉上去除知乎品牌蓝色,界面更简洁,淡化 UI 突出内容。下方并排放置三个用户输出内容的入口,优点是相对于安卓端层级更浅更方便直接选择入口,但缺点是占用屏幕更多空间并使界面看上去复杂容易干扰用户。所以在向下划屏时整个顶部元素都隐藏,算是作为一种弥补。


2. 中间垂直列表和安卓端一样,不再做分析。底部标签栏在各 icon 下加了文字说明,个人更喜欢安卓端的简洁。

总体来看,iOS 端首页视觉上不如安卓端简洁,顶部三个入口在交互上也不如安卓下方圆形浮动按钮方便。这也凸显了安卓 5.0 圆形浮动按钮控件的优势 。




2.发现


Image title


该功能模块和安卓端主要区别在于“圆桌”模块垂直列表样式不同,安卓端是大图加标题,iOS 端是小图加标题,前者视觉色彩丰富感染力强,这种设计对图片要求较高;后者冷静清晰简洁,占用屏幕面积小同屏能显示更多条目,且通过绿色小圆点提示条目是否结束。这点个人更喜欢 iOS 端的设计。


其他和安卓端基本一致,但依然缺少了安卓独有的浮动控件,直接导致 iOS 端缺少随机读内容的功能,这点不如安卓端体验好。






Web 端



作为知乎最早的互联网产品,web 端一直是不容忽视的重要据点,也是知乎功能最为齐全的产品。


下面从知乎的 web 端布局展开分析它的设计。


Image title


知乎 web 端布局大体可分为四大部分,从上到下,从左到右依次是:


1.顶部导航模块。从左到右一依次是 logo ,重要的搜索功能,其他功能模块入口导航,提问以及个人中心。一般来讲放在 web 端顶部栏都是该产品最主要的功能,且随着向下浏览也常驻在顶部方便随时调用这些功能。


2.发布内容模块。用户提问、回答或者写文章的入口,将该模块放在仅次顶部导航的重要位置很符合知乎以内容为导向的定位。


3.主要内容模块。该模块无疑是用户视觉聚焦的中心,所以放在页面中间部分很大区域,并可以一直向下浏览加载,中间穿插一些推荐话题起到引流作用,旁边有个一键返回顶部的按钮很贴心。


4.其他功能模块。该模块有广告位和一些零碎的小功能,而且广告可以随时关闭,UI 方面字体和 icon 都设计的比较小且颜色比较浅,需要的用户可以比较方便找到,又不会干扰用户正常浏览主要内容。


当然,每个模块还可以拆分出更小的功能点,这里不做赘述。另外,知乎考虑到不同尺寸屏幕做了自适应式设计,使得各个终端访问 web 都体验良好。




更新:2016-09-13

收藏

152人已收藏

十一弦

理性不够感性来凑

  • 16

    作品

  • 128

    粉丝

  • 53

    关注

  • ELEVEN 2020 作品集
  • 种子时间小程序
  • 分享赚 UI 设计
  • 质子钱包 UI 设计

    猜你喜欢

      2016-09-13 原创文章 经验/观点 举报 10417 152 140 9

      浅析知乎安卓端、iOS 端和 web 端设计模式

      0.0°

      你确定要举报浅析知乎安卓端、iOS 端和 web 端设计模式

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年09月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      140
      152
      9

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录