您的当前位置:永乐国际首页 > 首页 >

APP UI结构-首页相关(下

发布时间:2018-09-10 13:41

如果您正在寻找相关产品或有其他任何问题,可随时拨打公司服务热线,或点击下方按钮与我们在线交流!

  8px(@2x)标签栏高度为9,体作为提示作用标签栏内的字,20px字号为;般有3-5个标签的数量一,简约并且能够精准传达释义icon的设计上要保持,出自己的调性和其他产品的差异化也可以进行品牌基因的融入来突;

  宫格式导航类似列表式导航和,形式上的不同只是在表现,表现形式有很多列表式导航的,+文字/文字+图片等比如纯文字/icon;可以很多数量上也,局限性并没有,滑动查看的方式因为用户是上下;他导航搭配进行使用常作为二级导航和其,用户切换功能因为不方便,表可能点击率不高并且太靠下的列;

  的弊端也有很多当然这类导航,户可能会想不起来去展开比如隐藏起来的功能用;进入其他功能页面等需要用户多操作才能;

  用户的流量比较多但是考虑一部分,提供自己选择的权利所以现在也会给用户,用流量加载或切换高清模式比如弹窗提醒用户是否使;fi条件下而在wi,载高清图片或视频则是可以自动加。

  看似很平常APP首页,能还是比较多的其实涉及到的功,也比较细微有些功能点,功能布局也不一样不同的产品首页。品首页通用的一些功能结构该篇文章简单的概括了产,UI设计师有些帮助希望能对刚入门的。

  比例有2:1和16:9常见的banner设计,是固定的当然这不,产品需要来定高度可以根据,首页空间比较宝贵比如电商类产品,度就会相对紧凑banner高,页面空间以节省。使用屏幕最大的宽度尺寸进行设计我们在设计banner时最好,x (各个公司可能后台上传尺寸不一样即:安卓(@4x)—宽度1440p,参考)仅做,会多占资源这样做虽然,以避免可能出现模糊不清的状况但是在适配下面的各个屏幕时可。

  所有产品难以避免的存在banner广告几乎是,要或进行盈利的方式之一它也是产品出于运营需。一般3-8个不等banner数量,滑动查看可以左右,专题或是详情页面点击可进入相关。r是根据用户喜好生成的电商类产品的banne,可能感兴趣的内容系统推荐给用户,可想而知点击率。

  页面时的加载方式指用户在进入新,容之前看不见任何内容一次性加载完所有内,法进行操作自然也无,感化的加载动效设计所以最好能采用情,可以避免用户的焦虑因为趣味的动效反馈;不佳的情况下但在对于网络,会让人感到急躁加载时间过长,式的跳失率比较大所以这种加载方;

  文字再加载图片第一种先加载,现会打扰到用户图片的突然出,验不佳这种体,被舍弃了已经慢慢;

  说不是单一的存在导航形式对产品来,日益趋于繁杂庞大的今天尤其在产品功能结构都,合使用已是常态导航间进行组,种大趋势也是一,需要结合自身的需要具体分析所以在进行产品设计的时候,身的导航形式使用适合自,的才是最好的毕竟适合自己。

  思义顾名,一步的加载就是一步,源比较小的内容优先加载占用资;种情况分两:

  聚式导航也叫点,底部标签式导航一类其实我感觉可以归到,搭配使用时因为在两者,入口放在中间位置它常作为核心功能,了对称形成,舵式导航故而叫做;

  侧边栏导航也叫汉堡或,一种导航样式也是很常见的,读类产品多用于阅,沉浸式阅读体验因为可以给用户,能藏到抽屉导航内可以将很多低频功,屏幕空间节省了,看起来简洁美观自然可以让页面;

  以说是上拉刷新加载这类加载方式也可,底部时继续上滑或点击后加载出的数据使用场景一般是用户刷到feed流;

  式也很常见这类导航形,式导航搭配使用常和底部标签,助导航样式作为二级辅,数量3个以上一般tab,左右滑动切换并且可以进行;

  可以多使用情感化设计另外加载动效的方式,忘记当前的等待能够让用户能够,也是一种大的设计趋势加深品牌记忆的同时;以合理使用页面的位置加载动效的位置最好可,用户的干扰以减少对;败的情况下在加载失,反馈结果也要给出,用户重新加载并且可以让。

  性和面性两种常用的是线,用以表明选中状态一般进行结合使;性icon开始流行iOS 11之后面,进行区分用品牌色;

  其他icon有明显区分视觉上当前选中状态要和,区分、颜色的区分等比如线性和面性的,在的页面位置以表明当前所;外另,n伴有动态效果点击时ico,加趣味性可以增,常见的反馈方式也是现在比较;

  容就说这么多吧关于首页的内,似很平常首页看,能还是比较多的其实涉及到的功,也比较细微有些功能点,功能布局也不一样不同的产品首页,品通用的一些功能我这里说的是产,深入的去讲也没有很,有机会再详细说一说希望在以后的文章中。上以,g~ To be continuedThanks for readin…

  般有1-2页分类模块一,20个不等数量4-;点击率普遍较高因为第一页的,的分类放在第一页所以请将最重要,触手可及要让用户,对次要的分类而第二页放相;分类设置为”更多分类“也可以将第一页最后一个,以减少一页这样做可,点击率可能会不高但是里面分类的;

  观之反,在标签栏进行置顶页面的引导淘宝和MONO在上滑时会,较好体验;外另,栏icon进行置顶页面淘票票采用的是双击标签,免用户的误操作应该是为了避,浏览的内容上移导致用户正在,很久才能找到需要再次滑动,很多用户都不会知道但这样的交互可能;

  应该很熟悉了说到导航大家,场景之间切换的工具导航是在各个功能,功能的大框架是整个产品。有序地连接起来它将产品的功能,在合理的位置让功能出现;导航的话如果没有,品时会不知所措用户在使用产,也无法快速找到想使用某个功能,是十分重大的可见它的意义。

  能的数量上可以很多虽然这种导航形式功,方式作为辅助导航使用但还是建议这种导航,航形式相对比较陌生一方面用户对这种导,不一定高接受度,方面另一,割裂感较大由于功能间,功能时会比较麻烦可能用户切换其他;anner下的类目入口也是属于宫格式导航比如微信钱包页面、电商和团购类产品首页b,助导航使用都是作为辅;

  为功能比较复杂还有一些产品因,助导航进行配合使用抽屉导航常作为辅,式导航又有抽屉式导航比如QQ既有底部标签;

  web端多用于。道具体的加载时间这种加载方式不知,加载的较快开始时可以,加载慢一点最后时可以,比较愿意等待这样用户会,加载时卡住但是不能在;种方式的不多移动端用这,H5页面多数是,过于吸引用户的注意力因为这种加载方式会,下可能进度条都不会显示出来而且在加载速度很快的情况;

  面性图标+圆形/方形底色(渐变色)icon的设计上普遍是面性图标或者,标会显得比较饱满因为这样视觉上图;不单单只是反白效果面性图标的设计上,些设计细节对比还可以添加一,更有层次会显得;使用线性图标这里不建议,觉冲击力太弱因为会显得视,突出不够。

  沉浸式体验为了获得,览时可以进行隐藏标签栏在用户浏,、下滑时显示出来比如上滑时收起。

  品中使用较多在阅读类产,的操作进行预判指对用户下一步,一页的内容提前加载下,面时加载所需要的时间以减少用户进入下级页;智能加载搭配使用可以和下面要说的,况下可以使用预加载比如在wifi情,进行预加载4G下则不,流量节省,验会比较佳这样的体;

  显区分并重点突出了自己设计上会和其他标签有明,用户的注意力很容易吸引,用该功能的意味也有鼓励用户使,以会弱化其他功能入口但是因为过于明显所;交属性的产品比如带有社,布一些UGC内容会希望用户多发,种导航形式常采用这;使用的或是产品最重要的功能这类导航里常放置用户最多,数量不宜过多拓展的功能;

   的功能盘点已经更新了一段时间了APP UI结构-首页相关(上),有所帮助希望对你,首页相关功能的下半部分今天跟大家继续分享的是。KO,规矩老,一下整体结构还是先来看:

  到时才会加载指在用户使用,和资源的浪费以免造成流量,feed流时比如用户刷,加载出图片内容上滑被看见时再,可能只加载出文字和框架再往底下看不见的位置;

  符合用户习惯的样式最常见、最常用、最,首选样式导航中的。热区图显示根据拇指,是只有页面的三分之一拇指的最佳操作区域,常位于页面底部所以标签导航,局导航使用一般作为全;容最直观导航的内,被隐藏不会,标签会高亮显示并且被选中的,当前所在位置明确告诉用户,标签进行页面切换用户可以轻松点击;

  络环境的下指在不同网,容也不一样加载的内。G网络下比如在4,户节省流量为了给用,字内容和普清图片页面中进行加载文,或只加载标清视频不对视频进行加载。

  的设计要保持统一另外 icon,度大小、开口的大小等都要保持一致比如线性icon的粗细、圆角角,也会比较赏心悦目这样用户看起来。

  代表性的就是美图秀秀了使用这种导航样式最具,上比较整齐直观这类导航在视觉,快速查找方便用户,之间没有很大的关联可以采用这种导航形式同等级功能之间割裂感比较大又或是功能;

  的框架再加载出页面的内容第二种就是先加载出页面,图片占位符比如先加载,o或icon) / 彩色(后台设置颜色占位符可以是灰色或产品主色(+log,出现)随机,载页面文字接着再加,符位置上的图片最后再加载占位;

  多种多样加载模式,会有多种加载方式同一页面可能就,间从而提升用户体验目的都是为了节省时,提条件这是前。

  e X问世之后自从iPhon,anner的干扰为了避免刘海对b,状态栏和导航栏全透明的效果越来越多的产品取消了之前,放到了导航栏下面将banner;保留着原来的样式目前电商中京东还,要注意的点有这类样式需:

  式也比较常见这种导航形,屏幕比较大现在的手机,式也越来越多了用这种导航方,辅助导航使用常作为二级,类产品中比较常见在阅读类或工具;效并出现若干功能点击导航常伴有动,在悬浮导航内这些功能聚合,屏幕空间节省了,的视觉形成干扰但是会对用户。

  一次性加载出多少条数据在做交互文档时应该注明,品的自身需求来定这个需要根据产,载内容的线条比如:光加,可以一次性加载25条而带有图片的内容数据,是一次性加载20条(自己数了一下体验了一下微信朋友圈的动态数据,准确)不一定;

  首页banner下面分类模块入口一般位于,品中是十分常见的形式在电商、团购类等产。或是目的性比较强的来寻找某一商品很多用户可能不知道搜索什么关键词,口就会显得很方便这种快捷的分类入。

  情况:比如安卓的设计规范中当然也有作为一级导航使用的,导航作为一级导航将顶部tab式;QQ音乐再比如,心功能需要出于产品核,入口始终置于页面底部音乐播放页面的快捷,了顶部tab式导航所以主导航就使用;

  航的文章很多网上关于导,之间的区别和优缺点详细介绍了导航形式,也是重复估计多写,单的说一下吧我在这里就简,以自己去网上搜一搜想看详细的文章可。类别有导航的:

  些宣传、或是关于产品的一些资讯出于运营需要或进行品牌相关的一,首页分类模块下方这类入口通常会在,的中心位置处于页面,比较突出虽然位置,间不会很大但是占的空,注度可能不会很高所以用户对它的关。

  形式很常见这种导航,察觉到这类竟然也是导航可能常见到我们平时都没,整齐美观在视觉上,品都会用到几乎所有产。

  限定于首页加载方式不,整个产品而是贯穿。进行某个操作加载是用户在,许昌永乐国际并将数据反馈给用户服务器进行处理后,来做什么用户是不知情的这一过程中耗费的时间用,载方式来进行反馈所以才会需要有加,户的焦虑减少用。载的文章很多网上关于加,单说一下吧我这里就简,可以自己去搜索一下大家想详细了解的。

  的性比较强的产品还有一类就是目,或是打车软件比如共享单车,这类导航都是采用,核心功能放在首页将用户最需要的,隐藏起来其他的都,户的注意力不干扰用。

  n置顶页面功能再次点击ico。状态栏或是点击置顶button用户熟知的置顶页面功能是点击,击当前页面标签栏icon是可以进行页面置顶的可能很多用户没有发现或是很少用到——再次点,都有这一功能可能很多产品,进行很好的引导但是没有对用户。

相关产品

更多相关文章:


永乐国际-天天送奖金版权所有      
    

永乐国际-天天送奖金版权所有