成都网页设计： 3个要点做好轮播区设计-桔子科技网站建设设计公司

成都网页设计： 3个要点做好轮播区设计

发布人：桔子科技发布时间：2017-06-22 06:58:10 分享到：

　　无论是内容类产品，还是电商类产品，一般首页上都会有一个滚动的轮播区。运营妹子往往会在轮播区里放一些期望推给用户看的内容。以我现在负责的本地头条为例，我们就会把热门的资讯文章放上来。

　　于是我们的前产品经理（为了鄙视他就叫他小中吧），直接根据需求做了这样的后台设计：

　　运营妹子可以从隔壁的文章库里选择文章，投放到这个轮播区。　　放在当时的情景下，这样的设计看起来自然，实际上却成了后面所有坑的源头。我们一一来细数。

　　1.保持独立和开放　　上述设计，其实是直接复用了文章的标题作为轮播的标题，文章的图片作为轮播图，这样就产生了第一个问题：如果文章没有图，标题太长轮播区放不下，文章图片丑，怎么办？　　答案是：解耦。解耦是架构师经常用的一个词，意思是系统的各个部分保持灵活独立，极端场景下可替换或丢弃。仔细看上面后台的截图，名义上它叫轮播区管理，但表格里面的每一行本质上是一篇文章，而我们期望它是一个“轮播素材”。轮播素材不可以没有图，有图也不能丑，图不丑标题还不能长。　　轮播区要管理的实际上是一张图一句话一个链接所构成的“轮播素材”，文章只是这个链接背后的一种类别而已。正因如此，一个轮播区首先要做到的是让自己变得独立，独立之后是开放。解耦就是独立，那开放是什么呢？　　按照小中的设计，要把一篇文章投放到轮播区，需要先去文章库，从那里投放过来。而在轮播区管理里面本身却没有任何入口。这会发生什么事情？　　如果我想投放另外一种类型的素材比如活动报名，就需要在活动库里去增加操作入口，极限情况下，如果活动模块没人维护了如何解决？如果我想投放的只是一个外部合作页面，你不能跑到合作方那里，在他的系统里加一个投放吧　　答案也明显：轮播区自己应该有一个“创建”按钮，它所创建的就是它所管理的“轮播素材”，而且这种素材应该是极具开放性的，开放到只要求背后的是一个链接。顺便说一句，互联网力量就在于开放，这种开放表现为一个个简单到极致的超链接。

　　2.优雅快捷的投放弹窗　　把一个素材（比如文章）投放到轮播区，从设计模式上来讲，其实有两种方式：　　自上而下：先到轮播区管理界面，然后点击“选择文章”从下面的文章库里选择文章上来。自下而上：先到文章库管理界面，点击“投放”，把文章投放到轮播区上去。　　哪种方式好？应该说两种方式各有各的场景。如果你现在考虑的是给轮播区找一篇热文，你可能会第一时间想到自上而下的方式1。如果你现在是在文章库里审核文章，看着一篇觉得合适，那你就会选择自下而上的方式2。　　我们的业务中更多的是第2种方式。在这种方式下，按照产品经理都熟悉的“最短路径”原则，文章库里每一篇文章的后面就会有一个“投放到轮播区”的按钮。　　要说的是，这个投放交互必须：　　轻量，比如一个弹层，而不是和内容深深的纠结在一起（比如下图）。必须统一，在文章库里，在活动库里，投放的弹层都是同一个。根据上下文设置好默认值，比如把文章的标题或活动的名称自动作为轮播图上的标题。这其实就是解耦基础上的快捷设置。

　　3.统一路由　　好，现在已经把轮播区和文章解耦开，也可以投放文章、活动等类型的素材了。小中给每个类型的定义了类型值，然后让客户端程序猿支持这些类型。接着某个节日来了，运营妹子想把第3种类型“投票”放到轮播区，但是这个时候程序猿说：我们还不支持，要支持新类型得发版本。　　这个问题怎么破？实践中，我们的建议是提前建立一个统一的路由。

　　其实除了轮播区可能会到达各种页面之外，push，消息等场景也会到达各种页面。我们最好和团队约定，每设计一种新类型的页面，都应该把它加到这个统一的路由里（甚至首页也应该这样做，以我此前在阿里熟悉的电商业务而言，付款完成之后往往会引导用户去首页）。然后无论是轮播区还是push需要跳转的时候，都使用这个统一的路由器，跳转到对应的页面去。一句话概括来说就是：哪里都能去。

本文是成都网站建设公司、成都网站设计制作公司、成都APP开发公司、成都响应式网站建设、成都VR全景制作-桔子科技公司为您整理！
成都网站建设 ,成都网站设计,成都网站制作,成都网页设计，成都网站建设公司 ,成都网站设计公司,成都网站制作公司，成都网页设计公司，网站建设、网站制作、网站设计、网页设计、成都响应式网站建设、成都响应式网站制作、成都响应式网站开发、成都全景制作、成都VR全景制作、成都手机网站建设，手机网站建设，成都APP开发，APP开发，成都建网站，成都做网站，成都商城网站建设，集团网站建设,网站建设,高端网站建设,品牌网站建设,成都平台网站建设，成都响应式网站建设，成都微信网站建设，成都微商城网站建设，成都微信营销，成都网站优化，成都网络公司。

下一篇：成都网页设计：最简单的网站设计配色方案设计上一篇：成都网页设计：网站的内部页面如何进行微调