设计

设计

请问一下谁知道右侧的模板在哪吗

问与答bennyyao 回复了问题 • 5 人关注 • 4 个回复 • 325 次浏览 • 10 小时前 • 来自相关话题

交互基础小课堂!全面的筛选功能设计总结(ZT)

创意与设计fanta 发表了文章 • 0 个评论 • 187 次浏览 • 2018-06-05 08:36 • 来自相关话题

来源:优设网
 
王M争:从用户的操作流程上来说,如果用户想使用一个功能,必然首先要发现它。如果连功能入口都找不到,后续的用户体验也无从谈起。而筛选功能可以帮助用户对功能信息进行快速的定位,缩短用户的查找时间,这篇文章我就来跟大家聊一下筛选功能。一、三种常见基本样式
首先要明确一个概念,筛选功能并不是普通的单一功能项,它和导航一样是一个体系。既然是体系,必然有最基本的组成部分。筛选功能(体系)常见的样式有以下三种:tab类,(下拉)列表类,标签类。这三种样式是筛选功能最基本的组成元素,不管你产品的筛选功能做得有多么复杂,都可以看成是这三种基本元素的不同组合形式。
1. Tab
Tab 是最常见的筛选样式,一个 tab项代表一个筛选维度,直接平铺的展示出来,用户很容易感知到。

根据方向我们可以将 tab 分为横向栏tab 和侧向栏tab。横向栏tab 可展示2-5个选项,如果超过了5个,那么就需要用户滑动才能看到。所以当筛选维度过多的时候,我们可以考虑使用侧向栏tab,京东商品分类这里用的就是典型的侧向栏tab,我数了一下总共40个选项,这里如果使用横向栏tab 用户可能要侧向滑动8屏,操作成本过高。

当然当选项过多的时候,我们还有一个法子,就是使用弹框,用户点击后可以看到全部的选项。

2. 列表式
列表式也可称之为 list,其特点就是占用空间小。因为它可以将选项隐藏起来,用户需要点击才能看到所有的选项,因此在有限的空间里可以展示更多的筛选维度。碍于手机屏幕尺寸的限制,列表式筛选现在应用的越来越普遍。

列表式筛选的样式其实有很多。可以做成 popover类,actionsheet类,activityview类。这些样式很难去说谁好谁坏,这里我就只是列举出来,具体用哪种样式,大家自己来判断。
3. 标签式
对于标签式,很难进行准确的定义,我更倾向于将单选按钮,多选按钮,switch 等统称为标签式,标签式只能针对单一条件进行筛选,这点和 tab 很类似。标签式很少单独出现,多数情况下都是与 tab 和列表式结伴而行。

在淘宝里用户可以点击视图 icon 来切换视图模式,这就是典型的标签式筛选。
当然以上三种只是最常见的筛选元素,其余的还有输入框,滑块,地区/日期选择器等主要用于信息录入的组件。二、常见的筛选体系
了解了最基本的元素,接下来看一些比较复杂的筛选样式。上面我也提到了任何产品的筛选体系都可以看成是这三种基本元素的不同组合形式。为了让大家更好的理解,我一一举例来说明。
1. tab+tab
tab 之所以受到青睐,是因为其较低的学习成本。每一个 tab 代表一个类别,而且是直接展示给用户看的,所以很多产品的筛选功能都会优先考虑使用 tab。即使功能结构复杂到无法用一层 tab 来完成筛选任务,设计师也会考虑使用双层 tab 样式(tab+tab)的样式。

2. tab+列表式
当产品不断的发展,功能结构愈发的复杂,过于扁平的 tab 已经无法满足筛选的需求。以看电影这个场景为例,用户的需求是找到合适的影片和电影院。对于用户来说,衡量一家电影院会从地址、票价、品牌和特色服务(支持改签、IMAX厅等)这四个角度入手。这些筛选需求很难通过 tab 来完成,我们需要列表式的协助。

3. tab+列表式+标签
当产品的功能结构进一步复杂,这也给筛选功能增加了新的难题。以 boss直聘来说,这里的筛选项主要分为四个:排序方式(推荐/最新)、工作地点、公司规模、岗位要求。其中后三个筛选项包含大量的条件,特别工作地点,需要进一步定位到街道或地铁站。对于这种多维度,深层级的筛选需求我们可以使用 tab+列表式+标签的样式。

这里我选择 boss直聘的另一个原因在于它的 tab 数用户是可以自己增减的,每一个 tab 代表一条求职意向,最多可以添加3条求职意向。
三、筛选体系的容器
筛选体系是由众多筛选项组成的,这些筛选项需要一个「容器」来承载。上面说的 boss直聘用的是下拉列表,这种样式其实还比较简单的,我们可以看一些功能更加复杂一点的产品,比如各大电商平台。这里使用的是抽屉式筛选框,说它是抽屉式,因为它跟抽屉一样,用的时候可以拉出来,不用的时候可以关起来,节省了空间。从某个角度来说,我们可以把抽屉式看成列表式的一个放大版。抽屉式筛选框可以容纳更多的筛选条件,像我在上面提到的输入框,多选按钮都可以在这里使用。

从底部弹出的动作栏也比较常见,这里使用了滑块和单选按钮。

Airbnb 的筛选功能以浮层为载体,还使用比较少见的 switch 和 stepper。

当然 Airbnb 筛选功能最大的亮点在于可以向用户即时反馈筛选结果的数目,用户不太可能会进入搜索结果为0的空页面,避免无效操作。
以上说的筛选体系都比较传统,大部分都是基于对现有结果进行筛选,其实我们可以对筛选功能进行前置。例如,我们可以在用户进行搜索之前就对结果进行筛选。

甚至在新用户第一次使用产品的时候,可以让用户填写一些个人信息以便进行个性化推送。

筛选功能的存在意义在于帮助用户对功能信息进行快速的定位,对筛选功能进行适度的前置可以简化用户的操作流程,同样可以达到节省用户时间的目的。
欢迎关注作者的微信公众号:「王M争」

图片素材作者:They Make Design 查看全部
来源:优设网
 
王M争:从用户的操作流程上来说,如果用户想使用一个功能,必然首先要发现它。如果连功能入口都找不到,后续的用户体验也无从谈起。而筛选功能可以帮助用户对功能信息进行快速的定位,缩短用户的查找时间,这篇文章我就来跟大家聊一下筛选功能。一、三种常见基本样式
首先要明确一个概念,筛选功能并不是普通的单一功能项,它和导航一样是一个体系。既然是体系,必然有最基本的组成部分。筛选功能(体系)常见的样式有以下三种:tab类,(下拉)列表类,标签类。这三种样式是筛选功能最基本的组成元素,不管你产品的筛选功能做得有多么复杂,都可以看成是这三种基本元素的不同组合形式。
1. Tab
Tab 是最常见的筛选样式,一个 tab项代表一个筛选维度,直接平铺的展示出来,用户很容易感知到。

根据方向我们可以将 tab 分为横向栏tab 和侧向栏tab。横向栏tab 可展示2-5个选项,如果超过了5个,那么就需要用户滑动才能看到。所以当筛选维度过多的时候,我们可以考虑使用侧向栏tab,京东商品分类这里用的就是典型的侧向栏tab,我数了一下总共40个选项,这里如果使用横向栏tab 用户可能要侧向滑动8屏,操作成本过高。

当然当选项过多的时候,我们还有一个法子,就是使用弹框,用户点击后可以看到全部的选项。

2. 列表式
列表式也可称之为 list,其特点就是占用空间小。因为它可以将选项隐藏起来,用户需要点击才能看到所有的选项,因此在有限的空间里可以展示更多的筛选维度。碍于手机屏幕尺寸的限制,列表式筛选现在应用的越来越普遍。

列表式筛选的样式其实有很多。可以做成 popover类,actionsheet类,activityview类。这些样式很难去说谁好谁坏,这里我就只是列举出来,具体用哪种样式,大家自己来判断。
3. 标签式
对于标签式,很难进行准确的定义,我更倾向于将单选按钮,多选按钮,switch 等统称为标签式,标签式只能针对单一条件进行筛选,这点和 tab 很类似。标签式很少单独出现,多数情况下都是与 tab 和列表式结伴而行。

在淘宝里用户可以点击视图 icon 来切换视图模式,这就是典型的标签式筛选。
当然以上三种只是最常见的筛选元素,其余的还有输入框,滑块,地区/日期选择器等主要用于信息录入的组件。二、常见的筛选体系
了解了最基本的元素,接下来看一些比较复杂的筛选样式。上面我也提到了任何产品的筛选体系都可以看成是这三种基本元素的不同组合形式。为了让大家更好的理解,我一一举例来说明。
1. tab+tab
tab 之所以受到青睐,是因为其较低的学习成本。每一个 tab 代表一个类别,而且是直接展示给用户看的,所以很多产品的筛选功能都会优先考虑使用 tab。即使功能结构复杂到无法用一层 tab 来完成筛选任务,设计师也会考虑使用双层 tab 样式(tab+tab)的样式。

2. tab+列表式
当产品不断的发展,功能结构愈发的复杂,过于扁平的 tab 已经无法满足筛选的需求。以看电影这个场景为例,用户的需求是找到合适的影片和电影院。对于用户来说,衡量一家电影院会从地址、票价、品牌和特色服务(支持改签、IMAX厅等)这四个角度入手。这些筛选需求很难通过 tab 来完成,我们需要列表式的协助。

3. tab+列表式+标签
当产品的功能结构进一步复杂,这也给筛选功能增加了新的难题。以 boss直聘来说,这里的筛选项主要分为四个:排序方式(推荐/最新)、工作地点、公司规模、岗位要求。其中后三个筛选项包含大量的条件,特别工作地点,需要进一步定位到街道或地铁站。对于这种多维度,深层级的筛选需求我们可以使用 tab+列表式+标签的样式。

这里我选择 boss直聘的另一个原因在于它的 tab 数用户是可以自己增减的,每一个 tab 代表一条求职意向,最多可以添加3条求职意向。
三、筛选体系的容器
筛选体系是由众多筛选项组成的,这些筛选项需要一个「容器」来承载。上面说的 boss直聘用的是下拉列表,这种样式其实还比较简单的,我们可以看一些功能更加复杂一点的产品,比如各大电商平台。这里使用的是抽屉式筛选框,说它是抽屉式,因为它跟抽屉一样,用的时候可以拉出来,不用的时候可以关起来,节省了空间。从某个角度来说,我们可以把抽屉式看成列表式的一个放大版。抽屉式筛选框可以容纳更多的筛选条件,像我在上面提到的输入框,多选按钮都可以在这里使用。

从底部弹出的动作栏也比较常见,这里使用了滑块和单选按钮。

Airbnb 的筛选功能以浮层为载体,还使用比较少见的 switch 和 stepper。

当然 Airbnb 筛选功能最大的亮点在于可以向用户即时反馈筛选结果的数目,用户不太可能会进入搜索结果为0的空页面,避免无效操作。
以上说的筛选体系都比较传统,大部分都是基于对现有结果进行筛选,其实我们可以对筛选功能进行前置。例如,我们可以在用户进行搜索之前就对结果进行筛选。

甚至在新用户第一次使用产品的时候,可以让用户填写一些个人信息以便进行个性化推送。

筛选功能的存在意义在于帮助用户对功能信息进行快速的定位,对筛选功能进行适度的前置可以简化用户的操作流程,同样可以达到节省用户时间的目的。
欢迎关注作者的微信公众号:「王M争」

图片素材作者:They Make Design

改了下头部、边栏及一些CSS,效果还不错,大家提点建议

WeCenter 程序Satyr 回复了问题 • 2 人关注 • 1 个回复 • 187 次浏览 • 2018-05-31 06:15 • 来自相关话题

付费悬赏 付费围观是站长小微盈利的关键

建议lekuhu 发表了文章 • 3 个评论 • 202 次浏览 • 2018-05-29 11:48 • 来自相关话题

其实大家一直都在探索,问答的盈利方式怎样,只是挂联盟广告,本身现在联盟广告效果都不好,拿百度来举例子,点击越来越高,可是站长的收益越来越低,
 
1.做淘宝客,这个现在都是专门的系统进行匹配
 
2.联盟广告 现在收益越来越低
 
3.付费悬赏,付费问答  还记得腾讯怎么应收的吗,还记得分类信息怎么应收的吗,都是小微支付,做细分行业的问答网站,用户看到一个问题有精准专业的回答,不仅是打赏,还是会围观,这样的付费悬赏问答,付费围观,付费打赏的作用,可以让小站长获得一些收益
 
wc要打造一个生态圈,需要很多模板,插件技术高手进来,也需要让小站长有自己的定位从而有一定的收益,打赏太过于被动,且不专注,希望官方可以考虑一下这个建议,真的可以缓解一下小站长做站的鸭梨 查看全部
其实大家一直都在探索,问答的盈利方式怎样,只是挂联盟广告,本身现在联盟广告效果都不好,拿百度来举例子,点击越来越高,可是站长的收益越来越低,
 
1.做淘宝客,这个现在都是专门的系统进行匹配
 
2.联盟广告 现在收益越来越低
 
3.付费悬赏,付费问答  还记得腾讯怎么应收的吗,还记得分类信息怎么应收的吗,都是小微支付,做细分行业的问答网站,用户看到一个问题有精准专业的回答,不仅是打赏,还是会围观,这样的付费悬赏问答,付费围观,付费打赏的作用,可以让小站长获得一些收益
 
wc要打造一个生态圈,需要很多模板,插件技术高手进来,也需要让小站长有自己的定位从而有一定的收益,打赏太过于被动,且不专注,希望官方可以考虑一下这个建议,真的可以缓解一下小站长做站的鸭梨

编辑器能不能带自动保存的功能

建议lekuhu 发表了文章 • 4 个评论 • 138 次浏览 • 2018-05-29 11:41 • 来自相关话题

你好,官方的编辑器能不能带自动保存的功能,比如写着写着中途有事情,可以从草稿里面导入,你看看discuz编辑器,多经典啊,用这么多年了
你好,官方的编辑器能不能带自动保存的功能,比如写着写着中途有事情,可以从草稿里面导入,你看看discuz编辑器,多经典啊,用这么多年了

给官方2.0新版本的一些建议

建议lekuhu 发表了文章 • 9 个评论 • 271 次浏览 • 2018-05-18 15:07 • 来自相关话题

首先感谢官方能提供新版本,因为我跟其他的wc老会员一样,在这个没有新版出现的wc社区里面,守候了将近两年的时间,新版出来增加了专栏功能,增加了换肤的功能,但是在这里作为一个守候者,一个粉丝,一名站长,想给wc新版本提出一些新的建议和看法:
 
付费悬赏问答,付费围观,这个功能是让使用wecenter的可以增加收入的功能,请官方务必要考虑编辑器 希望编辑器能够采用更加合理的方式,建议看dz编辑器模板,希望采用悟空问答,简书等信息流展现形式,这样也利于SEO建议手机版全站采用m.chachengji.com这样的二级访问,利于搜索移动端的引流换肤建议采用微博和QQ空间皮肤一样,而不是只是一个导航条的更换,用户充值会员即可获得换肤的权限专栏增加付费订阅功能,专栏可以发布图文,语音,视频等,用户可以给每个专栏内容付费后单独打分,打分较低的费用自动退回百度分享不支持https的,但是百度又在建议网站采用加密ssl的,所以能不能把百度分享本地化或者提供解决方案建议增加签到,积分兑换商城功能,把现有的活动区分开来,因为现在不清不楚的一头雾水 查看全部
首先感谢官方能提供新版本,因为我跟其他的wc老会员一样,在这个没有新版出现的wc社区里面,守候了将近两年的时间,新版出来增加了专栏功能,增加了换肤的功能,但是在这里作为一个守候者,一个粉丝,一名站长,想给wc新版本提出一些新的建议和看法:
 
  1. 付费悬赏问答,付费围观,这个功能是让使用wecenter的可以增加收入的功能,请官方务必要考虑
  2. 编辑器 希望编辑器能够采用更加合理的方式,建议看dz编辑器
  3. 模板,希望采用悟空问答,简书等信息流展现形式,这样也利于SEO
  4. 建议手机版全站采用m.chachengji.com这样的二级访问,利于搜索移动端的引流
  5. 换肤建议采用微博和QQ空间皮肤一样,而不是只是一个导航条的更换,用户充值会员即可获得换肤的权限
  6. 专栏增加付费订阅功能,专栏可以发布图文,语音,视频等,用户可以给每个专栏内容付费后单独打分,打分较低的费用自动退回
  7. 百度分享不支持https的,但是百度又在建议网站采用加密ssl的,所以能不能把百度分享本地化或者提供解决方案
  8. 建议增加签到,积分兑换商城功能,把现有的活动区分开来,因为现在不清不楚的一头雾水

官方将要有新动态了,作为开发者想提一个建议

建议haines 回复了问题 • 6 人关注 • 6 个回复 • 628 次浏览 • 2018-05-14 16:53 • 来自相关话题

等不到官方新版——再次开发2套模板(PC端+手机端)

WeCenter 程序commyleung 回复了问题 • 3 人关注 • 3 个回复 • 653 次浏览 • 2018-05-13 14:25 • 来自相关话题

整理一下开发过的WeCenter模板

WeCenter 程序kenw2004 回复了问题 • 6 人关注 • 1 个回复 • 1905 次浏览 • 2018-03-05 13:27 • 来自相关话题

这是一套独立的手机模板——zphone手机模板

WeCenter 程序瑾炎 回复了问题 • 4 人关注 • 2 个回复 • 2470 次浏览 • 2018-02-27 16:41 • 来自相关话题

最新模板上线,还在测试中,欢迎大家围观

WeCenter 程序lekuhu 回复了问题 • 15 人关注 • 6 个回复 • 3833 次浏览 • 2018-05-11 16:44 • 来自相关话题

来吧,简单好用看vip视频vip,做着玩自己用

WeCenter 程序金戈野马 回复了问题 • 4 人关注 • 1 个回复 • 1412 次浏览 • 2018-02-01 15:46 • 来自相关话题

趣查有趣吗?

建站运营spendl 回复了问题 • 3 人关注 • 1 个回复 • 839 次浏览 • 2017-12-27 11:05 • 来自相关话题

wecenter团队到底还在不在,新版本新功能有没有在开发

WeCenter 程序steven_lidi 回复了问题 • 7 人关注 • 3 个回复 • 1516 次浏览 • 2017-11-15 19:09 • 来自相关话题

来吧、wc视频去广告、vip视频免费看

创意与设计shuyukui 发表了文章 • 2 个评论 • 1106 次浏览 • 2017-11-14 21:11 • 来自相关话题

很强大的接口,wc最新程序
 










 
地址:www.fuluntan.com/vip
很强大的接口,wc最新程序
 

360截图20171114211110392.jpg


360截图20171114211127811.jpg

 
地址:www.fuluntan.com/vip
条新动态, 点击查看
yanc

yanc 回答了问题 • 2012-06-07 13:33 • 12 个回复 不感兴趣

Anwsion个人主页修改设计稿

赞同来自:

考虑到左右两栏在排版很可能造成错位,所以还是在原来的基础上做了调整。将积分改成威望,并加入威望来源比例。
考虑到左右两栏在排版很可能造成错位,所以还是在原来的基础上做了调整。将积分改成威望,并加入威望来源比例。
一、从用户行为以及用户体验来讲。
普通用户来说:

知乎的展现形式更直观。更立体,用户体验更好。清晰明了。相对来说更酷的体验。来这里的往往是想快速清晰明了的找到自己感兴趣的话题。起的作用是索引。参见豆瓣电影标签的样式。其实说白了就是分类的拓展功能。

以技术员... 显示全部 »
一、从用户行为以及用户体验来讲。
普通用户来说:

知乎的展现形式更直观。更立体,用户体验更好。清晰明了。相对来说更酷的体验。来这里的往往是想快速清晰明了的找到自己感兴趣的话题。起的作用是索引。参见豆瓣电影标签的样式。其实说白了就是分类的拓展功能。

以技术员用户为主的可能更能接受 stackoverflow的展示风格。但是毕竟是少数。做这样一个开源程序要更多考虑大众的角度。以技术为主的相对更具备自己动手的能力。

二、把人的因素考虑进来是很对头的思路。现有的形式感觉还不错。不过如果能让站长后台自定义推荐就更灵活了。

你这里分成三个类别。热门 最新 分类。 从用户运营的角度来讲,如果不希望把问答越来越论坛化水化的话。一定是类似于知乎这样的分类放在前头的。有助于更多人找到各自不同的兴趣关注点。而不是聚焦在热门话题上。国人普遍喜欢扎堆。热的越热,冷的越冷。来的快去的也快。不利于知识的沉淀。一阵风过后。剩下一大滩水迹。这很考验站长的运营能力。现在网站这么多,真正留得住人的一定是那些耐得住前期的寂寞。踏踏实实把内容整合起来运营起来的。找准种子用户。然后不浮躁。慢慢的话题分类越来越多。然后再吸引一批想快速找到自己兴趣话题的人。


二、如果是我。我会把这个最新改成人物。然后每个话题里头有站长推荐的人或者干脆分类达人的。前面说过很多了。不拓展开来了。


三、为什么不用滑动式的效果呢?

四、做问答 真正想做得好。一定前期种子用户冲着他们感兴趣的分类进来。然后拓展话题起来。再然后会有一批人突出开来。成为元老。这批人的问答质量决定了后续能否运营开来。而后来者通过话题啊搜索啊等参与进来。两者的碰撞也不可避免。怎么样让老用户继续留下做贡献,新用户不破坏前期已经形成的氛围。良性循环而不是恶性循环。知乎现在就很明显有这种感觉。大量菜鸟进来的同时。一批老鸟沉寂了。人多的地方就不纯粹了。

伊人集增加:上传图片加水印

陈看天 回复了问题 • 18 人关注 • 4 个回复 • 4059 次浏览 • 2015-06-04 17:43 • 来自相关话题

【分享】Axure问答首页调用和顶部导航效果

俺的路 回复了问题 • 88 人关注 • 26 个回复 • 6906 次浏览 • 2015-05-19 18:17 • 来自相关话题

【11月17号更新】wecenter3.0 segmentfault的风格

绅士-C8星 回复了问题 • 71 人关注 • 26 个回复 • 10009 次浏览 • 2015-03-03 19:26 • 来自相关话题

wecenter模板修改汇总(加图片、微博、友情链接、改颜色等)

tongsizhou 回复了问题 • 153 人关注 • 12 个回复 • 7170 次浏览 • 2014-06-12 05:55 • 来自相关话题

wecenter整站文字修改汇总(想要修改网站的文字不用到处找了)

ada_li_li 回复了问题 • 98 人关注 • 14 个回复 • 7860 次浏览 • 2014-09-09 14:30 • 来自相关话题

教你给页面增加会员展示墙,附文件下载

爱收藏 回复了问题 • 70 人关注 • 15 个回复 • 3648 次浏览 • 2014-08-25 14:46 • 来自相关话题

WeCenter新模板 flaty 发布

哥特复兴 发表了文章 • 80 个评论 • 13801 次浏览 • 2014-04-15 17:09 • 来自相关话题

###预览图:








###模板介绍:

**模板名称**: flaty
**作者**:Wecenter官方
**浏览器兼容**: chrome , firefox ,Safari ,IE8 ;为了获得更好的浏览体验我们推荐你使用chrome,firefox这些现代浏览器。
**模板介绍**: flaty基于WeCenter 2.5.9开发,在自带模板的情况下有了很大的布局改动也改了很多的一些细节地方,同时为了配合模板风格,重新写了登录注册邮箱验证等页面,头像改为圆形阴影效果,在保留整体功能的情况下页面风格简洁,清新;还有更多细节的地方等你用上之后再去体验发现吧。
**使用方法**: 下载文件后解压,把解压后的两个文件分别放到模板目录下对应views和static的css里,再去后台管理在后台界面设置里直接选择flaty快速保存即可。
**说明**: 此模板官方不会与程序同步升级以及后期维护,但是大家用后可以在社区多反馈一些意见和BUG互相交流,谢谢!

###部分页面效果图: 查看全部
###预览图:


initpintu_副本.jpg



###模板介绍:

**模板名称**: flaty
**作者**:Wecenter官方
**浏览器兼容**: chrome , firefox ,Safari ,IE8 ;为了获得更好的浏览体验我们推荐你使用chrome,firefox这些现代浏览器。
**模板介绍**: flaty基于WeCenter 2.5.9开发,在自带模板的情况下有了很大的布局改动也改了很多的一些细节地方,同时为了配合模板风格,重新写了登录注册邮箱验证等页面,头像改为圆形阴影效果,在保留整体功能的情况下页面风格简洁,清新;还有更多细节的地方等你用上之后再去体验发现吧。
**使用方法**: 下载文件后解压,把解压后的两个文件分别放到模板目录下对应views和static的css里,再去后台管理在后台界面设置里直接选择flaty快速保存即可。
**说明**: 此模板官方不会与程序同步升级以及后期维护,但是大家用后可以在社区多反馈一些意见和BUG互相交流,谢谢!

###部分页面效果图:

6627342952693760.png


QQ截图20140414232840.jpg


question1.jpg

Wecenter V2.2正式版风格一套分享(荧光绿色)

希冀之殇 回复了问题 • 30 人关注 • 8 个回复 • 6005 次浏览 • 2014-05-13 13:15 • 来自相关话题

分享一个基于2.5的v2ex模板,提供下载

fengik8 回复了问题 • 18 人关注 • 7 个回复 • 6854 次浏览 • 2014-02-18 20:07 • 来自相关话题

分享一个2.5模板,提供下载~

wudaoxiao 回复了问题 • 35 人关注 • 12 个回复 • 9224 次浏览 • 2013-12-18 10:10 • 来自相关话题

“关于我们”、“联系我们”、“友情链接”等单页模板制作流程分享

helbin 回复了问题 • 50 人关注 • 5 个回复 • 2626 次浏览 • 2013-08-21 09:47 • 来自相关话题

mo1123

回复

Ives 发起了问题 • 1 人关注 • 0 个回复 • 287 次浏览 • 2016-10-10 17:57 • 来自相关话题

外包都出现哪些奇葩问题?

回复

jiulongting 回复了问题 • 7 人关注 • 5 个回复 • 903 次浏览 • 2018-05-11 16:39 • 来自相关话题

设计圈MIJIiuuii

回复

风见雨下 回复了问题 • 2 人关注 • 2 个回复 • 446 次浏览 • 2018-05-11 16:40 • 来自相关话题

话题页面的关注点击后状态不变,需要刷新才会显示已关注

回复

accouter 发起了问题 • 1 人关注 • 0 个回复 • 617 次浏览 • 2014-08-27 23:16 • 来自相关话题

Wecenter话题与知乎的发现对比

回复

Jasen 回复了问题 • 10 人关注 • 6 个回复 • 1629 次浏览 • 2014-08-08 10:32 • 来自相关话题

发小广告和提一个问题(已解决)

回复

kk 回复了问题 • 2 人关注 • 1 个回复 • 954 次浏览 • 2014-04-10 15:25 • 来自相关话题

讨论:关于新建的站总是遇到后台无法登录的问题

回复

skyfland 回复了问题 • 3 人关注 • 2 个回复 • 910 次浏览 • 2014-03-20 19:29 • 来自相关话题

手机版怎么固定导航栏?

回复

kk 回复了问题 • 5 人关注 • 2 个回复 • 1139 次浏览 • 2014-02-23 18:22 • 来自相关话题

默认字体颜色在哪修改呢

回复

kk 回复了问题 • 2 人关注 • 1 个回复 • 1068 次浏览 • 2014-02-21 13:48 • 来自相关话题

原来白名单和黑名单只是针对于用户是否登录的

回复

dclchj 发起了问题 • 3 人关注 • 0 个回复 • 802 次浏览 • 2013-12-16 14:29 • 来自相关话题

登入页面背景图片还没改啊

回复

用心看世界 回复了问题 • 2 人关注 • 1 个回复 • 895 次浏览 • 2013-12-15 16:14 • 来自相关话题

不喜欢圆角矩形的设计,要怎么修改?

回复

bigweald 回复了问题 • 5 人关注 • 3 个回复 • 1015 次浏览 • 2013-12-07 17:24 • 来自相关话题

设计讨论——标出已读和未读

回复

hvac 回复了问题 • 1 人关注 • 1 个回复 • 840 次浏览 • 2013-10-28 09:45 • 来自相关话题

联想是不是国内唯一有工业设计副总裁的产品公司?

回复

zhengqiang 发起了问题 • 2 人关注 • 0 个回复 • 889 次浏览 • 2013-07-08 21:33 • 来自相关话题

wecenter 功能简单实用,再设计几个清新的模板就完美了!

回复

创意与设计ttttyyyy 回复了问题 • 4 人关注 • 2 个回复 • 1281 次浏览 • 2013-05-29 17:44 • 来自相关话题

交互基础小课堂!全面的筛选功能设计总结(ZT)

创意与设计fanta 发表了文章 • 0 个评论 • 187 次浏览 • 2018-06-05 08:36 • 来自相关话题

来源:优设网
 
王M争:从用户的操作流程上来说,如果用户想使用一个功能,必然首先要发现它。如果连功能入口都找不到,后续的用户体验也无从谈起。而筛选功能可以帮助用户对功能信息进行快速的定位,缩短用户的查找时间,这篇文章我就来跟大家聊一下筛选功能。一、三种常见基本样式
首先要明确一个概念,筛选功能并不是普通的单一功能项,它和导航一样是一个体系。既然是体系,必然有最基本的组成部分。筛选功能(体系)常见的样式有以下三种:tab类,(下拉)列表类,标签类。这三种样式是筛选功能最基本的组成元素,不管你产品的筛选功能做得有多么复杂,都可以看成是这三种基本元素的不同组合形式。
1. Tab
Tab 是最常见的筛选样式,一个 tab项代表一个筛选维度,直接平铺的展示出来,用户很容易感知到。

根据方向我们可以将 tab 分为横向栏tab 和侧向栏tab。横向栏tab 可展示2-5个选项,如果超过了5个,那么就需要用户滑动才能看到。所以当筛选维度过多的时候,我们可以考虑使用侧向栏tab,京东商品分类这里用的就是典型的侧向栏tab,我数了一下总共40个选项,这里如果使用横向栏tab 用户可能要侧向滑动8屏,操作成本过高。

当然当选项过多的时候,我们还有一个法子,就是使用弹框,用户点击后可以看到全部的选项。

2. 列表式
列表式也可称之为 list,其特点就是占用空间小。因为它可以将选项隐藏起来,用户需要点击才能看到所有的选项,因此在有限的空间里可以展示更多的筛选维度。碍于手机屏幕尺寸的限制,列表式筛选现在应用的越来越普遍。

列表式筛选的样式其实有很多。可以做成 popover类,actionsheet类,activityview类。这些样式很难去说谁好谁坏,这里我就只是列举出来,具体用哪种样式,大家自己来判断。
3. 标签式
对于标签式,很难进行准确的定义,我更倾向于将单选按钮,多选按钮,switch 等统称为标签式,标签式只能针对单一条件进行筛选,这点和 tab 很类似。标签式很少单独出现,多数情况下都是与 tab 和列表式结伴而行。

在淘宝里用户可以点击视图 icon 来切换视图模式,这就是典型的标签式筛选。
当然以上三种只是最常见的筛选元素,其余的还有输入框,滑块,地区/日期选择器等主要用于信息录入的组件。二、常见的筛选体系
了解了最基本的元素,接下来看一些比较复杂的筛选样式。上面我也提到了任何产品的筛选体系都可以看成是这三种基本元素的不同组合形式。为了让大家更好的理解,我一一举例来说明。
1. tab+tab
tab 之所以受到青睐,是因为其较低的学习成本。每一个 tab 代表一个类别,而且是直接展示给用户看的,所以很多产品的筛选功能都会优先考虑使用 tab。即使功能结构复杂到无法用一层 tab 来完成筛选任务,设计师也会考虑使用双层 tab 样式(tab+tab)的样式。

2. tab+列表式
当产品不断的发展,功能结构愈发的复杂,过于扁平的 tab 已经无法满足筛选的需求。以看电影这个场景为例,用户的需求是找到合适的影片和电影院。对于用户来说,衡量一家电影院会从地址、票价、品牌和特色服务(支持改签、IMAX厅等)这四个角度入手。这些筛选需求很难通过 tab 来完成,我们需要列表式的协助。

3. tab+列表式+标签
当产品的功能结构进一步复杂,这也给筛选功能增加了新的难题。以 boss直聘来说,这里的筛选项主要分为四个:排序方式(推荐/最新)、工作地点、公司规模、岗位要求。其中后三个筛选项包含大量的条件,特别工作地点,需要进一步定位到街道或地铁站。对于这种多维度,深层级的筛选需求我们可以使用 tab+列表式+标签的样式。

这里我选择 boss直聘的另一个原因在于它的 tab 数用户是可以自己增减的,每一个 tab 代表一条求职意向,最多可以添加3条求职意向。
三、筛选体系的容器
筛选体系是由众多筛选项组成的,这些筛选项需要一个「容器」来承载。上面说的 boss直聘用的是下拉列表,这种样式其实还比较简单的,我们可以看一些功能更加复杂一点的产品,比如各大电商平台。这里使用的是抽屉式筛选框,说它是抽屉式,因为它跟抽屉一样,用的时候可以拉出来,不用的时候可以关起来,节省了空间。从某个角度来说,我们可以把抽屉式看成列表式的一个放大版。抽屉式筛选框可以容纳更多的筛选条件,像我在上面提到的输入框,多选按钮都可以在这里使用。

从底部弹出的动作栏也比较常见,这里使用了滑块和单选按钮。

Airbnb 的筛选功能以浮层为载体,还使用比较少见的 switch 和 stepper。

当然 Airbnb 筛选功能最大的亮点在于可以向用户即时反馈筛选结果的数目,用户不太可能会进入搜索结果为0的空页面,避免无效操作。
以上说的筛选体系都比较传统,大部分都是基于对现有结果进行筛选,其实我们可以对筛选功能进行前置。例如,我们可以在用户进行搜索之前就对结果进行筛选。

甚至在新用户第一次使用产品的时候,可以让用户填写一些个人信息以便进行个性化推送。

筛选功能的存在意义在于帮助用户对功能信息进行快速的定位,对筛选功能进行适度的前置可以简化用户的操作流程,同样可以达到节省用户时间的目的。
欢迎关注作者的微信公众号:「王M争」

图片素材作者:They Make Design 查看全部
来源:优设网
 
王M争:从用户的操作流程上来说,如果用户想使用一个功能,必然首先要发现它。如果连功能入口都找不到,后续的用户体验也无从谈起。而筛选功能可以帮助用户对功能信息进行快速的定位,缩短用户的查找时间,这篇文章我就来跟大家聊一下筛选功能。一、三种常见基本样式
首先要明确一个概念,筛选功能并不是普通的单一功能项,它和导航一样是一个体系。既然是体系,必然有最基本的组成部分。筛选功能(体系)常见的样式有以下三种:tab类,(下拉)列表类,标签类。这三种样式是筛选功能最基本的组成元素,不管你产品的筛选功能做得有多么复杂,都可以看成是这三种基本元素的不同组合形式。
1. Tab
Tab 是最常见的筛选样式,一个 tab项代表一个筛选维度,直接平铺的展示出来,用户很容易感知到。

根据方向我们可以将 tab 分为横向栏tab 和侧向栏tab。横向栏tab 可展示2-5个选项,如果超过了5个,那么就需要用户滑动才能看到。所以当筛选维度过多的时候,我们可以考虑使用侧向栏tab,京东商品分类这里用的就是典型的侧向栏tab,我数了一下总共40个选项,这里如果使用横向栏tab 用户可能要侧向滑动8屏,操作成本过高。

当然当选项过多的时候,我们还有一个法子,就是使用弹框,用户点击后可以看到全部的选项。

2. 列表式
列表式也可称之为 list,其特点就是占用空间小。因为它可以将选项隐藏起来,用户需要点击才能看到所有的选项,因此在有限的空间里可以展示更多的筛选维度。碍于手机屏幕尺寸的限制,列表式筛选现在应用的越来越普遍。

列表式筛选的样式其实有很多。可以做成 popover类,actionsheet类,activityview类。这些样式很难去说谁好谁坏,这里我就只是列举出来,具体用哪种样式,大家自己来判断。
3. 标签式
对于标签式,很难进行准确的定义,我更倾向于将单选按钮,多选按钮,switch 等统称为标签式,标签式只能针对单一条件进行筛选,这点和 tab 很类似。标签式很少单独出现,多数情况下都是与 tab 和列表式结伴而行。

在淘宝里用户可以点击视图 icon 来切换视图模式,这就是典型的标签式筛选。
当然以上三种只是最常见的筛选元素,其余的还有输入框,滑块,地区/日期选择器等主要用于信息录入的组件。二、常见的筛选体系
了解了最基本的元素,接下来看一些比较复杂的筛选样式。上面我也提到了任何产品的筛选体系都可以看成是这三种基本元素的不同组合形式。为了让大家更好的理解,我一一举例来说明。
1. tab+tab
tab 之所以受到青睐,是因为其较低的学习成本。每一个 tab 代表一个类别,而且是直接展示给用户看的,所以很多产品的筛选功能都会优先考虑使用 tab。即使功能结构复杂到无法用一层 tab 来完成筛选任务,设计师也会考虑使用双层 tab 样式(tab+tab)的样式。

2. tab+列表式
当产品不断的发展,功能结构愈发的复杂,过于扁平的 tab 已经无法满足筛选的需求。以看电影这个场景为例,用户的需求是找到合适的影片和电影院。对于用户来说,衡量一家电影院会从地址、票价、品牌和特色服务(支持改签、IMAX厅等)这四个角度入手。这些筛选需求很难通过 tab 来完成,我们需要列表式的协助。

3. tab+列表式+标签
当产品的功能结构进一步复杂,这也给筛选功能增加了新的难题。以 boss直聘来说,这里的筛选项主要分为四个:排序方式(推荐/最新)、工作地点、公司规模、岗位要求。其中后三个筛选项包含大量的条件,特别工作地点,需要进一步定位到街道或地铁站。对于这种多维度,深层级的筛选需求我们可以使用 tab+列表式+标签的样式。

这里我选择 boss直聘的另一个原因在于它的 tab 数用户是可以自己增减的,每一个 tab 代表一条求职意向,最多可以添加3条求职意向。
三、筛选体系的容器
筛选体系是由众多筛选项组成的,这些筛选项需要一个「容器」来承载。上面说的 boss直聘用的是下拉列表,这种样式其实还比较简单的,我们可以看一些功能更加复杂一点的产品,比如各大电商平台。这里使用的是抽屉式筛选框,说它是抽屉式,因为它跟抽屉一样,用的时候可以拉出来,不用的时候可以关起来,节省了空间。从某个角度来说,我们可以把抽屉式看成列表式的一个放大版。抽屉式筛选框可以容纳更多的筛选条件,像我在上面提到的输入框,多选按钮都可以在这里使用。

从底部弹出的动作栏也比较常见,这里使用了滑块和单选按钮。

Airbnb 的筛选功能以浮层为载体,还使用比较少见的 switch 和 stepper。

当然 Airbnb 筛选功能最大的亮点在于可以向用户即时反馈筛选结果的数目,用户不太可能会进入搜索结果为0的空页面,避免无效操作。
以上说的筛选体系都比较传统,大部分都是基于对现有结果进行筛选,其实我们可以对筛选功能进行前置。例如,我们可以在用户进行搜索之前就对结果进行筛选。

甚至在新用户第一次使用产品的时候,可以让用户填写一些个人信息以便进行个性化推送。

筛选功能的存在意义在于帮助用户对功能信息进行快速的定位,对筛选功能进行适度的前置可以简化用户的操作流程,同样可以达到节省用户时间的目的。
欢迎关注作者的微信公众号:「王M争」

图片素材作者:They Make Design
  设计是把一种计划、规划、设想通过视觉的形式传达出来的活动过程。人类通过劳动改造世界,创造文明,创造物质财富和精神财富,而最基础、最主要的创造活动是造物。设计便是造物活动进行预先的计划,可以把任何造
物活动的计划技术和计划过程理解为设计。