首页

css布局——flex布局

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex;}
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex;}
Webkit 内核的浏览器display: -webkit-flex;
设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

图片


容器属性:

flex-direction:(排列方向横向还是纵向)
row
(默认值):主轴为水平方向,起点在左端。
row-reverse
:主轴为水平方向,起点在右端。
column
:主轴为垂直方向,起点在上沿。
column-reverse
:主轴为垂直方向,起点在下沿。

图片

flex-wrap:(如何换行)
nowrap
(默认):不换行。

wrap
:换行,第一行在上方。

wrap-reverse
:换行,第一行在下方。


flex-flow:(
flex-directionflex-wrap简称,默认值为row nowrap

justify-content:(横向对齐方式)
flex-start(默认值):左对齐
flex-end
:右对齐
center
: 居中
space-between
:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

图片

align-items:(纵向对齐方式)
flex-start:交叉轴的起点对齐。
flex-end
:交叉轴的终点对齐。
center
:交叉轴的中点对齐。
baseline
: 项目的第一行文字的基线对齐
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

图片

align-content:(多根轴线的对齐方式)
flex-start
:与交叉轴的起点对齐。
flex-end
:与交叉轴的终点对齐。
center
:与交叉轴的中点对齐。
space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch(默认值):轴线占满整个交叉轴。

图片

 
box属性:


order:(排列顺序)
数值越小,排列越靠前,默认为0。

flex-grow:(剩余空间分配,box放大比例,默认为0,即如果存在剩余空间,也不放大)

图片

flex-shrink:(box缩小比例,默认为1,即如果空间不足,该项目将缩小)

图片

flex-basis:(box占据的宽度或高度)

图片

align-self:(单个box的对齐方式,与其他box对齐方式)

图片
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

博博

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

人人都是产品经理 2016-04-19 11:20:31



如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里



来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。

初尝竞品分析,能力以及对行业理解有限,暂无法从大的架构上完整支撑起整篇文章。希望能通过自己的亲身体验,从产品结构,产品功能,产品核心功能使用流程等角度上对腾讯课堂和网易云课堂两款产品加以梳理。之后根据用户数据调查,定位用户群,建立用户使用场景模型。并且根据KANO模型对用户需求进行归纳。进而站在用户体验的角度上给出对比分析,最后给出自己如果自己是PM的建议。期待读者和前辈拍砖给建议~

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

脑图太大无法完整显示,若脑图不清晰请移步文末网盘链接,文中涉及完整报告也保存在网盘中。

1.产品初体验

1.1 产品简介

腾讯课堂:腾讯课堂是腾讯推出的依托于QQ群的专业在线教育平台,以兴趣、语言类学习内容见长,聚合了优质教育机构和教师的海量课程资源。并于2014年4月1日上线移动端APP,作为免费的开放式的平台,腾讯课堂帮助线下教育机构入驻,不参与机构分成,还为其提供流量和功能支持。

网易云课堂:由陈能干(杭州蓝脑教育科技创始人、CEO,知米英语系列产品创始人)联合丁磊发起,网易成立项目组开发,以偏职业化的学习内容为主。产品于2012年12月上线,以实用技能类内容为主,衔接高等教育和职业应用,打造综合学习服务平台。目前有近6000门课程,覆盖近20个教学领域,百余细致分类,近5万课程视频,超过700万注册用户。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

1.2 产品结构

腾讯课堂产品结构:

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

网易云课堂产品结构

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

从产品结构图对比来看,两款产品均从推荐,搜索,分类以及已学习课程四个方面设置入口导向课程学习板块,分别对应了不同用户(见下文)在寻求课程途径上的需求差异:第一类专业类用户可能搜索比较多,第三类兴趣类会关注推荐排行更多,第二类职业类用户可能更会比较全面使用;同时与豆瓣、知乎等流行的相关产品使用户养成的习惯一致。

腾讯课堂醒目的位置设置了学团入口,并且为机构开设单独的介绍界面,体现了作为免费的开放式平台,吸引用户互动和机构入驻的发展策略。

网易云课堂在首页设置消息提示,因为用户与平台(产品、客服、老师机构)间缺少必要通讯手段,所以将站内消息放在右上角,作为消息通知的必要方式。

1.3 产品功能

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

1.4 使用流程

腾讯课堂学习功能使用流程

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

网易云课堂学习功能使用流程

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

从使用流程上看,两款产品允许在非登陆条件下进行试用,直到用户找到目标课程,准备学习/付费或者有意使用个人设置时再提醒用户进行登陆,降低使用门槛,提升了用户体验。

在登陆方式上,腾讯课堂仅支持自家qq及微信登陆,一方面利用自身通讯平台,方便以消息推送等方式进行推广宣传;另一方面保证了用户与平台(产品、客服、老师机构)间获的即时通讯。而网易云课堂采除用自家邮箱外还包括腾讯系列,微博,手机等多种身份验证方式,满足习惯不同平台用户的需求。

2.竞品分析

2.1 用户分析

根据企鹅智库发布的《在线教育市场深度报告》,我们可以获得一系列接受在线教育用户的核心信息。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

从上图信息中我们可以分析得出:

  1. 用户学习学习内容主要为以英语为主的外语学习和其他留学相关学习,其次为兴趣类内容学习,以及职业证书、职业技能在内的职业提升类学习。
  2. 用户学习时间集中在晚上8:00-10:00这一绝大多数个人支配时间段,其次为晚上6:00-8:00这一通常为下班(学)通勤时间段;
  3. 用户主要集中在北上广江浙等一二线大城市,身份主要是学生和白领;
  1. 以外企职员和准备出国深造色学生为主进行语言方面学习的群体;
  2. 以都市白领为主的职业从事者,为了提升职业技能或者改变职业方向而学习的群体;
  3. 以都市白领为主为了充实生活进行兴趣类学习的群体;

之后建立用户使用场景模型:

1. 一位准备出国/语言考试的学生/外企职员,在结束一天学习/工作之后,利用晚上8:00-10:00这段个人支配时间,打开经过仔细筛选的语言课程,系统地持续学习1-2小时。在此期间认真做好笔记,提醒自己有哪些疑问点和老师布置的作业。

该类用户学习意愿较强,自控能力较好,有较强的付费意识。该类用户的学习内容比较固定,因此需要有优质的学习资源,同时由于语言学习的特点,需要有充足的互动指导。

2. 一位期望提升职业技能/改变职业方向的职场人员,查找和了解与自己期望提升职场能力相关的课程,在大致规划好课程范围后,开始在相关平台寻找是否有相关配套的课程套餐。在失望的发现没有完全契合自己规划内容后,开始按每门课独立学习的方式学习。

该类用户多是迫于找工作和升职的压力而去学习,需要提升职业技能、明确职业发展,付费意识强,也是学习意愿和自控能力最强的。该类用户时间有限,工作压力较大,因此需要学习内容有相当的实用性,能够快速学习并进行实操。

3. 一位职场人员/学生在晚上18:00下班/放学后,乘坐地铁/公交回家,途中打开手机/平板中的在线教育app,选择感兴趣的/正在学习的/随机推荐的/提前下载完成的课程进行学习。学习15-30分钟后,由于疲劳/到家结束此段学习。到家忙碌完吃饭、家务、洗澡等事情后开始学习,直到晚上22:00休息。

兴趣类学习用户多是基于某种业余爱好,利用工作之余进行学习,学习时间短、内容广泛、学习意愿并不强烈,付费意识弱。该类用户并不追求学习内容的深入,但是需要多样化,且更贴近生活和实际。

2.2 用户需求分析

根据《在线教育市场深度报告》,我们从不使用在线学习产品原因、在线学习受关注问题、在线学习产品功能需求、在线产品付费意愿等方面了解用户需求,并结合KANO法则进行分析。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

我们不妨把不使用在线学习产品原因在线学习受关注问题所包含的因素看作会使户满意度降低因素;把在线学习产品功能需求看作会使使户满意度增加因素;把在线产品付费意愿所包含因素看作使用户满意度大幅增加因素。由此,根据KANO法则,我们可以列出以下类型功能需求:

期望因素(一维因素):

  • 展示教学质量和课程内容是否优秀、价格是否合理。除了加强筛选课程质量本身外,为了让学习者快速了解课程质量和内容,相对应功能可以为:提供课程咨询、提供与学习该课程的学员交流机会、课程讲义大纲预览、付费课程试用、提供明确收退款流程等等。
  • 互动交流。相对应功能可以为:直播课堂随堂提问、录播课堂有相应交流平台、有问答答疑平台、与老师有明确联系方式等等。

必备因素

核心学习功能是否完整,使用流程是否清晰流畅,交互界面是否明确友好。相对应功能可以为:推荐、搜索、筛选、收藏分享、学习界面等基础功能。

魅力因素:

学习相关方向的内容丰富程度。相对应功能可以为:提供配套学习资料、相关内容测试题目、行业或考试动态、提供相关内容微博,知乎入口等等。

2.3 功能对比分析

2.3.1 期望因素(一维因素)

2.3.1.1 了解课程:

该功能主要促使用户快速得到一些列自己关心的课程信息,进而判断课程是否适合自己,决策是否值得花费时间金钱学习,打消负面判断,最终实现课程学习。对于满足第一类对课程内容十分在意,有较强付费意识的用户格外重要。

腾讯课堂:

优点:与老师直接通过qq交谈了解课程,能够得到及时的回复,交流效率高。用户处于主动地位,因为消息接收不及时而被冷漠的概率降低,能够帮助用户顺利获得必要的信息,做出行动决策。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.课程介绍的内容过于笼统,不能满足用户通过查看介绍来判断课程是否值得去学的需求,没能实现将初步的兴趣转化为实际使用的过渡。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.评论区不能互动,无法通过回复评论或者私信的方式与已学过课程学员交流,新学员不能在与老学员的互动中得到期望的更适合自己的信息,这与用户在贴吧、知乎等社区形成的使用习惯相违背,新用户从老用户获得针对性信息的需求没有被实现。

3.在付款流程中未提供明确的退款说明,且在移动端上均没有提供退款功能。用户可能因为缺少对退款规则和功能的了解,认为盲目付费有一定风险性,而尽可能避免选择付费课程。尤其对于第三类用户,进一步减少其付费积极性。

4.付费课程缺少体验学习部分,用户不确定课程质量,会认为盲目付费有一定风险性,提高了付费课程的使用门槛。

网易云课堂:

优点:课程简介内容相对充实,对适合人群有一定划分,能够帮助用户对自身进行定位,用户能够快速进行决策判断是否应该学习该课程。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.通过站内信与开课老师或机构咨询,与qq等IM工具相比,沟通效率低,用户在交流中处于被动等待的地位,容易因为回复不及时被冷漠,而丧失或者转移付费意愿。并且仅有付费课程和少数免费课程有咨询功能,但是付费和开始学习之后咨询功能消失,无法持续与老师交流。

3.在付款流程中未提供明确的退款说明,且在移动端上均没有提供退款功能。用户可能因为缺少对退款规则和功能的了解,认为盲目付费有一定风险性,而尽可能避免选择付费课程。

2.3.1.2 互动交流:

该功能目的在于使用户与老师及其他学院通过在线交流,实现学习过程中答疑和互动的环节,更有效地达到在线学习的效果。对于第二类用户更期望主要通过网课取得一定学习效果的用户会更加在意。

腾讯课堂:

优点:

1.能够与老师直接通过qq交谈进行答疑,与现实学习习惯和行为相匹配,促使用户能够在思考和问 题得到解决的过程中获得知识,满足在对学习质量需要。

2.学团功能,提供问答式UGC互动平台,意在利用已有的老师和用户资源满足用户的针问答需求。目前在一 些专业性不是很强的板块已经取得了一定的使用量。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.无论是学习功能还是学团功能,用户之间无法进行直接交流。这作为现实学习中重要的一环,已成为日常的行为和习惯。用户间交流不顺畅,导致相互分享经验、解决问题的难度增加,与学习期望不符,使在线学习的体验和效果变差。

2.学团功能在运营上有一定欠缺,在某些板块中提出问题久久不能得到回应,同时缺少优质的推送内容。用户的对于个性化问答以及相关内容的推送的期望得不到实现,久而久之用户将会放弃对该功能的进一步使用,造成恶性循环,UGC社区将面临崩盘。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

从图中可以看出,作为本应较为热门的雅思学习学团,并没有多少参与度,仅有一些平台推送的相关消息。多少可以反映出该板块运营不足,缺少优质用户和资源的问题。

虽然提供了私信功能,但是仅能收到课程推荐和客服(咨询)消息。不能实现与老师和学员进行互动交流。虽然网易云课堂强调课程内容,但是相互交流作为现实学习中重要的一环,用户间交流不顺畅,导致相互分享经验、解决问题的难度增加,使在线学习的体验和效果变差。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.3.2 必备因素:

2.3.2.1 搜索:

作为定向指向用户需求的功能,应为用户提供准确内容范围,减少无关选择量。

1.显示热门搜索和历史搜索,帮助用户更快捷得进行搜索,尤其是第一类用户,需要在不同时间对相同内容进行重复性搜索时,有历史搜索功能明显提供便利。

2.在搜索结果界面提供排筛选序功能,用户能进一步缩小搜索范围,能更快捷找到自己的目标课程。

缺点:

在搜索结果界面提供分类功能,与搜索功能本身向矛盾,会误导用户使其认为能够在搜索之后继续进行分类筛查,但使用结果是跳转到分类界面,徒增麻烦。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

1.搜索界面未显示搜索历史,对于需要在不同时间对相同内容进行重复性搜索的用户会产生繁琐之感。

2.搜索结果界面没有筛选排序功能,用户在搜索之后需要进行大量的查看比较工作,使找到合适课程的门槛增加,体验非常不友好。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.3.2.2 分类:

使用户在内容层面上全面了解产品提供的资源,并且根据预设步骤,引导用户细化、明确自己目标课程的类别,最终实现目标课程与产品资源的契合。

采用三级分类,最大化地引导用户定位和细化目标课程,排除无关课程。起到了分类功能节省用户时间和精力用来寻找到目标课程的作用。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

入口放在首页,与推荐板块结合在一起不明显。在同一个标签页中内容标题上有重复,用户不能第一时间区分掌握理解内容框架,易产生混淆之感。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

单独作为一个界面,用户能第一时间掌握理解完整内容和框架,不会产生混淆。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1. 仅有二级分类,没有做到最大化地帮助用户一步步定位和细化目标课程。

2. 用户在使用分类功能之后依然需要花费相当精力把无关课程排除掉,找到合适课程的门槛增加,体验非常不友好。

3. 筛选排序:把课程按照与用户需求点相符程度排列呈现给用户,为其进一步决策提供优先级。

关键词条目多,满足了用户对于价格,时新度,人气等多方面的筛选需要,有综合排序,高低排序等更加适应需求多样化的排序方式。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

不能进行并列排序,用户每次仅能选择一个关心的方面进行排列,手段比较单一,与用户使用最多的购物排序习惯不一致。

能够进行并列排序,可以就用户所关心的价格、时新度等同时排列,与用户习惯的网购筛选排序功能相似,满足多样的排序需求,所呈现结果让用户更容易做出决策。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1. 关键词条目单一,价格上仅能选择收费免费,排列所得结果仍然不够清晰,用户仍需要付出一定精力时间自己筛选。

2.3.2.3 推荐:

把自身优质内容呈现给用户,减少决策成本,吸引用户产生学习行动。因为三类用户所敏感内容不同可能采取不同推送策略。

推荐板块为一级课程分类+二级课程分类+课程,有学习目的用户可以轻易地理解所推荐内容大致包含信息,进而快速做出决策来判断是否有必要进一步仔细了解关注。意在吸引第一类第二类对内容质量比较敏感的用户。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.此环节显得与分类环节有重复之感,相同内容重复出现并占用过多空间,使用户产生疲劳感。

2.仅仅是内容的分类填充,缺少吸引用户的点,没有起到推荐的作用。

采用用户关注点作为大标题+推荐课程。相比之下,作为推荐环节网易云课堂更能吸引用户眼球,抓住用户需求点,符合推荐板块应起到的创造用户需求,吸引用户产生学习行动的作用。更多的是吸引第二类和第三类,对职场和兴趣十分关注的用户进行使用。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.3.2.4 学习界面:

观看课程界面中的基础功能应该扎实完整,让用户在整个学习流程核心部分获得良好的体验。

基本功能不完整,缺少主流移动端播放器共有的手势调节等功能;对于在线学习必备的倍速播放也不支持,比较严重地影响用户的使用效果。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

而网易云课堂

优点:

1.有手势调节音量亮度、清晰度,选择线路等主流移动端播放器所具备的功能,顺应用户的使用习惯。

2.添加调整播放速度,退出全屏,一键设为已学等功能,更加迎合移动用户快节奏、使用环境多样的在线学习需求。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

亮度调节功能,手势仅能调节音量,不能调节亮度,与用户习惯相违背,没有考虑到夜间使用的情况。

2.3.2.5 收藏:

腾讯课堂提供添加课程到收藏的功能,可以在我的课程页面找到已收藏课程。而网易云课堂却缺少这一基本功能。

优点:

满足用户找到期望课程,但暂时不想报名的使用情景。比如一些有时效的付费课程,但是暂时没有足够的时间学习,用户可以通过添加到收藏来避免遗忘。

缺点:

仅能收藏课程不能收藏机构。当比较关注某一机构的课程时,需要反复搜索或者进入已学习该机构的课程,在详情界面查看该机构,比较繁琐。

2.3.3 魅力因素:

  • 在相关系列课程方面,两款产品均没有此功能。但是网页版网易云课堂推出微专业板块,提供某一领域的系列课程并颁发证书,相信之后移动端也会普及此功能。
  • 在相关资料方面,两款产品也均未提供相关功能。在网页版网易云课堂在计算机、四六级等四个方面提供相关试题,但是这些服务在向移动端的转移中可能仍需时间。不过据传腾讯课堂将在下一个版本中加入在线测试题目功能,测试版本已经发出。

2.3 流程及界面分析:

(1)整体界面

腾讯课堂:

采用上方4个Tab标签导航,分别对应发现(首页)、学团、学习计划、我的四个主要功能板块。可能因为认为用户查看已报名课程是高频行为,所以将收纳用户报名课程的学习计划放到醒目的Tab标签中。学团功能反应了腾讯课堂作为免费的开放式的平台,建立UGC、PGC社区的发展定位。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

缺点:

1.虽然Tab标签放在上方起到显而易见效果,但是与主流app使用户养成的下Tab标签习惯相冲突,同时因为上方蓝色区域过大造成视觉上的不协调。

2.界面显得粗糙,配图与课程名称不相符,图标大而丑,占据用户过多视线,在一个屏面里提供给用户信息较少,用户需要花费更多时间和耐心去翻屏,影响用户使用的情绪。

3.因为要给学团和学习计划两个功能让出空间,分类板块被放在首页(推荐)里,而且内容上与推荐的内容有重复,在使用时会对整体框架产生不清晰的感觉。

4.推荐板块全部采用固定格式,没有滚动窗口,导致推送内容单一,更新频率低(开学后将近两个月仍然显示开学前后推送的内容)。

网易云课堂:

采用底部三个Tab标签导航,将首页(内容)、全部课程、学习中心三个主要功能包含进来,体现了网易云课堂以内容为主,所有功能围绕着将用户和课程内容更好连接而建立。

因为用户与平台(产品、客服、老师机构)间缺少必要通讯手段,所以将站内消息放在右上角,作为消息通知的必要方式。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

优点:

1.底部三个Tab标签导航与主流应用设置一致,使用起来比较顺手,不需要让用户重新适应操作方式。

2.相比之下网易云课堂界面简洁美观得多,图标控制在合适的大小,所配图片也与主题相符,能够在一个页面获得更多信息,用户体验感好。

3.分类板块完全归纳在全部课程标签中,推荐界面完全是推荐内容。用户使用起来一目了然,整体框架结构十分清晰。

(2)使用流程

1.点击一门课程,转到课程介绍界面,包含目录、详情、评论三个界面。打开目录后无法直接进入课程,需点击下方查看任务后,再次得到任务界面的目录后才能进入课程。

没有任何意义地多添加了一个步骤,让使用过程变得繁琐,与用户的在目录中直接进入学习的习惯相违背。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

2.在详情界面,提供的目录摘要和学员评论两个模块没有实质内容,反而徒增用户阅读量;在点击“查看全部”后,又返回目录和评论环节。

这种设计不仅与上方标签栏重复,又增加用户阅读无意义信息的数量,掩盖了本应出现在该环节对课程进行介绍的内容。流程设计上对必要信息和无用信息筛选不当,缺少逻辑感。

网易云课堂:

相比之下网易云课堂在目录界面随点随学,虽然只减少一个环节,但是不会因为显而易见的不必要的繁琐,使用户在使用时产生抵触情绪。同时简介、目录、评价三个板块间没有相互掺杂,表现出来的无论是内容还是逻辑都更为清晰。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

3期望&改进

3.1假如我是腾讯课堂PM:

3.1.1.在期望因素方面:

提供学生私信功能,尤其是在评论界面增加通过点击用户头像查看用户界面并可以发送私信的入口,使学习过课程学员所发挥的作用最大化。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

按照相应分类,在课程相关页面上提供学团功能的入口,以促进用户了解并使用学团功能。同时加强对学团的运营,首先通过奖赏机制(如根据在学团上提供优质内容情况,为相应老师或者机构增加曝光度)建立优质的知识内容(比如在魅力因素中提到的相关内容),留住一批优质用户,进而进行推广,成为真正的UGC答疑平台。

提供付费课程试用,课程大纲讲义预览,在付费课程支付界面提供退款相关规则和流程等。使用户放心地花费时间或者金钱,避免因为信息缺失让用户在比较和犹豫过程中流失。

3.1.2 在必备因素方面:

解决首页的推荐和分类两个模块的重复性,去掉相对丑陋的大图标,将分类放在下拉菜单中,点击相应内容会进行跳转,在“腾讯课堂”logo处用小三角箭头作为标识。相比之前在最上面放一堆图标,然后需要不断下拉才能看完整推荐,用户的使用逻辑会更加清楚:点击腾讯课堂,用户将快速得到并掌握该产品所包含内容,点击感兴趣的内容跳转到相应推荐,之后可以继续进一步查看所有下一级分类进行了解。

腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

完善观看课程界面的基础功能,添加手势调控,倍速播放等一系列视频必备功能。

解决课程详情界面混乱,观看课程步骤繁琐的问题:在目录中提供进入学习界面的入口,去掉”查看任务“改为“立即学习”;在任务详情界面去掉”目录摘要“和”学员评论“两个模块。

3.1.3 在魅力因素方面:

充分利用学团平台,改变推送内容。对如配套学习资料、相关内容测试题目、行业或考试动态、提供相关内容微博,知乎精华内容入口等等进行整理,作为优质内容进行推送。使用户除了学习课程内容,愿意花更多时间浏览学团提供的相关领域内容,更大化增加用户粘性。

3.2 假如我是网易云课堂PM

3.2.1 在期望因素方面:

  • 强化学员与授课老师的联系,尤其是长期、付费的课程。在详情页面老师头像出建立联系老师的入口,采用站内信或者最好能与即时通讯工具以及邮箱账号相关联。避免付费/报名后就无法联系老师的情况。
  • 提供用户间站内信联系功能,尤其是在评论界面增加通过点击用户头像查看用户界面并可以发送私信的入口,使学习过课程学员所发挥的作用最大化。
  • 可以允许通过开课老师或者机构申请,为课程提供专属网易云协作群,在课程介绍界面提供加入入口,并且在学习中心界面中设立群列表。

3.2.2 在必备因素方面:

  • 不得不说网易云课堂界面的整体视觉效果基本没有什么可以挑剔的,只是在基础功能上还有一些值得优化的地方:首先在搜索结果界面应当加上筛选功能,其次筛选功能应当增加筛选的项目和顺序(如价格高低排序) ,同时分类功能需要增加分类层级(如编程语言需要细分成C,PHP等等),最后在课程列表界面去除无意义并且占据大量空间的分类板块,或者收纳入下拉菜单。
腾讯课堂和网易云课堂产品体验,从用户体验角度进行竞品分析

3.2.3 在魅力因素方面:

将微专业功能向移动端转移,利用中国大学mooc网的优势资源,根据用户的搜索报名情况,给用户提供更多优质并且满足其需求的教育资源,迎合用户对更多相关信息,更多专业知识的需要。比如在首页推荐中,增加推荐mooc课程板块,并且优先推荐用户关注方向相关课程。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

谈谈BFC

周周

一、什么是BFC
       BFC(block formatting context)简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
    中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念, 从样式上看,具有 BFC 的元素与普通的容器没有什么区别,但是从功能上,具有 BFC 的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器没有的一些特性,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

如何触发 BFC

      上面介绍了 BFC 的定义,那么如何触发 BFC 呢?
    满足下面任一条件的元素,会触发为 BFC :
    1、浮动元素,float 除 none 以外的值
    2、绝对定位元素,position(absolute,fixed)
    3、display 为以下其中之一的值 inline-blocks,table-cells,table-captions
    4、overflow 除了 visible 以外的值(hidden,auto,scroll)

BFC布局与普通文档流布局区别      
    普通文档流布局规则
    1.浮动的元素是不会被父级计算高度
    2.非浮动元素会覆盖浮动元素的位置
    3.margin会传递给父级
    4.两个相邻元素上下margin会重叠

    BFC布局规则
    1.浮动的元素会被父级计算高度(父级触发了BFC)
    2.非浮动元素不会覆盖浮动元素位置(非浮动元素触发了BFC)
    3.margin不会传递给父级(父级触发了BFC)

    4.两个相邻元素上下margin会重叠(给其中一个元素增加一个父级,然后让他的父级触发BFC)

   下面来说一下BFC的实际使用场景
   场景1:解决子盒子都浮动时 父盒子高度不参与计算问题
    <style>
      .far {
         border: 10px solid pink;
         width: 300px;
     }
      .child {
         border: 10px solid yellowgreen;
         width:100px;
         height: 100px;
         float: left;
    }
     .far{
         overflow: hidden;
    }
    </style>
    <body>
        <div class="far">
             <div class="child"></div>
             <div class="child"></div>
        </div>
    </body>

    根据overflow 除了 visible 以外的值(hidden,auto,scroll)就会触发BFC的原则 计算BFC高度时 ,floatbox也参与其中。


    场景2:box垂直方向的距离 会由margin来决定 相邻两个盒子之间margin会重叠 ,这就是margin上下间值合并的原因

    <style>
    p {
        color: pink;
        background: #fcc;
        width: 200px;
        height:100px;
        text-align:center;
        margin: 100px;
    }
    </style>
    <body>
       <p></p>
       <p></p>
    </body>

    要解决这个问题我们可以在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了,解决代码如下。
    <style>
       .box {
          overflow: hidden;
       }
       p {
          background: green;
          width: 200px;
          height: 200px;
          margin: 100px;
      }
    </style>
    <body>
       <p></p>
       <div class="box">
           <p></p>
       </div>

    </body>

    场景3:实现左侧固定右侧自适应等类似布局
    <style>
        .out{
            border: 1px solid red;
            height: 200px;
        }
        .left{
            width: 200px;
            height: 150px;
            background-color: green;
            float: left;
        }
        .right{
            background-color: pink;
            height: 250px;
            overflow: hidden;
        }
      </style>
      <body>
     <div class="out">
        <div class="left"></div>
        <div class="right"></div>
      </div>

Google设计语言:如何将品牌DNA融入产品

蓝蓝设计的小编

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

本文转自,头条号的人人都是产品经理,的一个大神。

Google设计语言:如何将品牌DNA融入产品

2018年5月9日凌晨1点,Google开发者大会上对 Material Design做了更新的讲解,其中令我印象深刻的是Google对图形语言单独拿出来做一个模块来解释,如下图我标红的地方。

Google设计语言:如何将品牌DNA融入产品

OLD NEW

对!就是这个SHAPE的单词,为什么我会如此看重,大家应该知道构成设计语言的四大基础原子是:字体/颜色/网格系统/图形。

这里的图形包括图标和一些辅助图形,它有什么不同呢?

大家看之前以往的版本,材质设计语言里面没有单独去说形状这一元素,当然也有做的比较好的产品,比如:韩国的 29cm 和 11街,国内天猫/网易蜗牛读书等等。

图形语言对我们产品影响极其大,之前网上也有这样的文章,比如:提取logo上面视觉基因,然后运用到图标里面。对,这个没错,但是我觉得不够好,不全。

今天和大家一起来分析下Google是如何做的。

我对图形的理解

图形无处不在,人眼对图形的识别能力远远高于字体,图形便于记忆、传播,这就是为何每次做LOGO时候都需要去考虑图形延展呢?

目的为了传播品牌,在用户心中打造产品形象,比如:可口可乐弧线、阿迪达斯、苹果logo这些国际性大牌子的logo都是易于记忆与传播的。

那么在产品设计中如何体现呢?

我们常用在图标里面去展现一些品牌元素,比如:天猫猫头直接和图标融合,这是一个很成功的例子。还有韩国的Genie音乐产品,也是直接logo和图标集合。

那么仅仅只是这些吗?

当然不够,如果我们想传达我们产品的品牌理念,深入到用户心中,只在图标里运用是不够的。

比如:可口可乐每年做产品运营推广,不断大量的重复它logo弧线元素,这样能长期在用户心中形成记忆点。

Google是如何做的?

Google这次让我们打开眼界,下面Google的原话:

形状可以引导注意力,让用户易于识别组件,沟通状态和品牌语言传达。

对次有了一些更深刻的认识,形状其实运用不止我们平常所理解的。我之前写过一篇文章,就是形状对布局的影响,里面就是讲了形状的一些基础作用。

下图是来自材质语言的截图:

Google设计语言:如何将品牌DNA融入产品

图片来自google

Google的想法非常大胆:一个方形的变化,延伸出不同的形状,当然并不是单独一个产品设计里面放这么多形状,而是运用到不同产品,运用不同的图形,传达其特殊品牌调性、大统一,局部战略调整。

Google设计语言:如何将品牌DNA融入产品

比如:上图凹槽图形用在主TAB上,形成视觉焦点,容易吸引用户区关注它,一般核心功能会如此设计。

Google设计语言:如何将品牌DNA融入产品

Google已提到了可以用于区分不同组件,这观点我很赞同,之前我对爱奇艺做了视觉分析,发现它们一级导航和二级导航样式一样,那么这样用户如何区分呢?

Google设计语言:如何将品牌DNA融入产品

图形可以用于表达某一正在交互的状态,比如:选中状态,当然并不是单独去使用。Google特定强调了:需要和其他视觉元素集合起来使用,比如:颜色

其实这一观点以前就有啦!比如:咱们的check box控件,选中前后状态不一样。

不过Google这个是否略显夸张些?

Google设计语言:如何将品牌DNA融入产品

最后重点来啦!比如:可以用于表达品牌语言,那么图形来自哪里?用在哪里?

如:上图是一个Crane的应用,他们logo是中间一个图形加外带椭圆底,这里Google提取了椭圆作为视觉DNA,并沿用到产品的每一个控件。

Google设计语言:如何将品牌DNA融入产品

同一产品多终端统一符号语言。

Google设计语言:如何将品牌DNA融入产品

如下图提取LOGO关键特殊符号:

Google设计语言:如何将品牌DNA融入产品Google设计语言:如何将品牌DNA融入产品

下图Shrine提取菱形棱角图形运用到产品设计细节里面。

Google设计语言:如何将品牌DNA融入产品Google设计语言:如何将品牌DNA融入产品Google设计语言:如何将品牌DNA融入产品Google设计语言:如何将品牌DNA融入产品

看完你想说什么?我只想冷静三分钟!!!

其实说实话,对于品牌DNA的延续早在年初的时候就思考过,如何去把品牌语言在产品设计里面体现?

我当时理解是:首先要了解我们的品牌核心是什么?

我们的品牌理念是啥?品牌solgan,我们要给用户传达一种什么样的情怀?然后如何去巧妙提取产品logo里面的视觉基因,比如:某一图形元素;比如:线条/点/某一特殊图形符号,这图形一定是易于延展,拓展性强的。

然后运用到产品的每一个细节里面,比如:图标、按钮、异常状态、启动页、运营banner、情感化设计等等,如今大佬Google 已经去这样做了,而且做得很系统,包括动效都有引子。

当时也有一些产品已经这样做了,比如:韩国29cm,设计细节非常好,图形运用非常到位。国内天猫猫头运用也是渗透到产品里面去了。

Google这次又给我我们一些大胆的思考,能运用这么广的范围?

Google设计语言:如何将品牌DNA融入产品

需要注意点

Google举了几个反面例子,我们在提取图形或者使用时需要注意的几点,如下:

Google设计语言:如何将品牌DNA融入产品

注意图形的指向性和触摸大小,千万别影响用户正常使用。

Google设计语言:如何将品牌DNA融入产品

同一含义的组建样式必须一致。

Google设计语言:如何将品牌DNA融入产品

别使用形状来暗示其他含义, 这个对话框的形状表明它与它背后的卡片相关。

Google设计语言:如何将品牌DNA融入产品

总结思考

Google的本次材质设计语言的更新,我相信后续会有一些产品为了打造一些品牌调性,也会慢慢去融入更多的品牌符号语言进去。

当然我们一定要克制与统一,这是最难做的一部分,Google虽然此次系统性的解释图形的意义及延伸使用,但是某些地方稍微有些过了,所以我们在设计提取DNA时候需要克制与统一。

那么我们可以从中取学习了解如何才能让我们产品更加差异化?在同质化的今天,你是如何打造个性化与具有调性的产品呢?

如今AI已来临,机器人对设计影响极其大,从Google本次更新迭代中就大量提到了AI对产品的影响,以及如何去学习用户的习惯,然后预测用户的下一步需求。

我们以后产品会越来越智能,越来越了解人性,除了硬件的升级,研发能力加强,我们也要多去思考下:如何打造独具匠心的产品?如何打造一个无缝体验、多平台、跨语言产品视觉统一体验?

这方面跨平台多终端体验,苹果已经做得很不错了,当然还有spotify 音乐产品无缝跨平台,听歌/切歌/选歌体验。相信这只是一个开始,后续会有更多精彩

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

案例讲解 | 移动端的长表单应该如何设计?

博博

案例讲解 | 移动端的长表单应该如何设计? 

原创 UEDC  2017-10-24

作者 Echo

基于业务需求(常见于B端产品),有时候用户在操作过程中,不可避免的需要填写很多表单。针对于移动端长表单,我们应该如何去正确的设计呢?

本文大纲:

1.三种主方案

2.主方案1的设计讨论

3.主方案2的设计讨论

4.主方案3的设计讨论

5.总结

1.三种主方案

针对长表单的设计,按照设计思路的不同,可以分为三种主方案,如下所示:

PS:图中的举例的关键字段仅仅为举例需要。

主方案1:我们常见的设计形式,一个界面将所有表单信息展示出来。

主方案2:将不同的分组表单放在不同的下一级界面,用户填写之后返回。

主方案3:分步操作,一个界面完成一组表单内容,点击下一步进入下一组表单。

2.主方案1的设计讨论

主方案1的设计优缺点

优点:一个界面将所有表单信息展示出来,如果想查找某些填写的信息也变得更容易,相对于主方案2和3,减少了页面跳转操作和查看。

缺点:基于移动端界面承载能力较弱,一个界面将表单所有展示出来,用户一次性浏览和操作起来压力较大,容易使操作流程失败,导致成功率大大降低。

针对于主方案1,用户完成表单完成后,提交按钮有三种主要的设计方法,一种是提交按钮放在表单最后,一种是提交按钮放在导航栏上。另一种是,提交按钮底部悬浮。如下图所示:

方案1.0,如果提交按钮放在表单之后,那么用户的视觉流和操作感觉是一致的,流畅而自然。但是会出现一个问题,用户在输入信息时,键盘调用会遮挡到提交按钮。Android手机上的输入法都可以点击输入法上的按钮将键盘推下去。而iOS 原生输入法在输入法中没办法推下去,只能点击其他非编辑区域才能推下键盘。这样就显得很麻烦,用户可能会忽略掉提交按钮。

方案1.1解决了提交按钮会被键盘挡住的缺陷,但是视觉流和操作行为错乱,用户在屏幕底部输入完成之后,视觉和手指要返回到顶部操作。

方案1.2提交按钮底部悬浮,解决了方案1.1的视觉流和操作紊乱的问题,解决了方案1.0提交按钮被隐藏的问题,但是当输入文本,调出键盘时,依旧会被挡住。

使用底部悬浮按钮的场景是操作按钮非常重要,例如手机淘宝的立即购买和加入购物车。

同时底部悬浮按钮不适用于文本操作类。例如文章说的长表单文本输入。当输入文本,调出键盘时,依旧会被挡住。

底部悬浮按钮适用于非文本输入的使用场景。从手机淘宝、新浪微博可以看出,适用于在界面中非文本输入、提供一个功能入口或者是界面非文本输入的选择信息的确认。

3.主方案2的设计讨论

主方案2的设计优缺点

优点:与主方案3相比不同分组表单之前切换查看信息方便快捷。申请流程的首页简洁,填写信息全部隐藏到下一级界面。

缺点:来回跳转,操作负荷较大,会把用户绕晕。

在方案2.0中用户填写完成的分组和未分组填写分组区分不开,将方案2.0进行优化,例如填写完成后,会出现已完成的标签,提示用户已完成和未完成不同的状态(如方案2.1)

4.主方案3的设计讨论

Facebook曾针对分步注册与非分步注册做过A/B Test,其结论指出分步注册的转化率远高于非分步注册。由此可见,非分步注册强行减少注册页面,不如适当拉长战线,给用户轻负荷的操作,让用户在不知不觉中完成注册流程。

主方案3的设计优缺点

优点:流程分步操作,相对于主方案1,用户操作成功率大幅度提高。

缺点:如果用户操作到了第三步,需要返回第一步确认填写信息的准确性,那么用户需要两次返回。

用户填写的信息做保存(缓存),用户返回上一步,填写的数据做保留。H5依旧适用,用户填写的数据保存在数据库,用户返回上一步时,同时刷新载入数据库记录的数据。

对于方案3.0和3.1 。下一步按钮不同。究竟采取哪种?方案3.0视觉流和操作流是正常情况,且不存在按钮被键盘挡住,所以方案3.0最佳。

移动端长表单设计总结

主方案1、2和3,都有各自不同的优缺点。

一个交互流程的好坏,一个最重要的标准之一是让用户顺利完成操作流程,保证操作流程的成功率,才能完成用户的目标。以此标准来看,主方案3是最好的。

接下来探讨一个细节问题,就是提交按钮是放在顶部导航栏、信息内容区内还是底部悬浮?

这里分为4种情况:

情况1:内容区加上操作按钮不被键盘覆盖,建议按钮放在内容区内。

情况2:必填的内容未被键盘覆盖,非必填被覆盖,建议操作按钮放在导航栏上,例如朋友圈、QQ空间和新浪微博。

情况3:必填的表单超过一屏,建议按钮放在内容区。不建议放在导航栏上的原因有两个:

a.视觉流错误,从上往下,信息量很大,用户滑动浏览时,会忽略且很难联想点击导航栏上的操作,行业常见放在导航栏上是因为必填的不超过一屏。

b.当必填项过多时,要滑动屏幕才能填完。 把按钮放在右上角的导航栏,当用户还没填写完成,那么在按钮放在导航栏上很容易去点击,容易引导用户犯错。

情况4:必填超过一屏,且无非文本输入,建议可使用底部悬浮。


设计师的知识管理体系怎么建立?只需4个步骤,实现能力价值提升

博博

设计师的知识管理体系怎么建立?只需4个步骤,实现能力价值提升 

设计夹  2018-05-10

作者 NEPO


想要知道设计师如何根据行业变化建立知识管理体系,首先要了解行业整体的变化趋势。

 

/一/

行业的发展变化


国内UI 行业2007年萌芽,至今经历以下几个阶段:

 

随着2007年第一代 iPhone面世,国内进入界面设计时代。iPhone等智能手机的兴起,令各个行业迎来移动界面设计的业务和挑战,不同类型的设计公司承接了相关零散业务。后因为业务量不断增加,出现了专注于界面设计的工作室,就正式进入了界面设计时代,这一时期持续到2012年左右。

 

到了2012、2013年,移动互联网的普及加速了界面设计行业的升温。业务形态多元化,业务内容不断增多,UI 设计师岗位供不应求。市场上涌现大量的相关培训,UI 设计师一度成为掘金岗位。短短两年内,快餐式培训培养出大批量UI设计师。


 

同时,2012到2013年也被称为交互设计时代的开端。需求方开始从注重界面美观度转向更注重产品使用的流畅度,这一时期萌生了交互设计师这一岗位。但由于市场需求大,准入门槛低,行业内怪象丛生。大小设计公司/工作室之间价格战严重,各种压价,甚至聘请资历尚浅的实习生负责项目,出品质量参差不齐。

 

直到2016年,移动互联网创业热潮冷却,行业归于平静,进入理性探索期。建立规范,沉淀、收获,行业发生裂变。加之外部大环境,例如移动互联网、国家政策、整体经济形势等多方面的变化,使得行业走势不明朗。

 

在这个时候,对于设计师而言,唯有不断提升自身能力,找准行业内定位,才能去追赶甚至走在行业变化的前列。


 

/二/

设计师价值的演变


设计师在企业内的角色一直在变化。从以往纯粹的业务协同,到今天逐渐能够通过设计来提升产品和品牌的价值。未来设计师将更加深入业务体系,以设计驱动商业创新,实现业务价值放大。

在这个过程中,设计师的职能、视野会不断往上下游延伸,设计师自身要参与到更多的业务体系,对产品和品牌的商业模式有更清晰的认知,与业务部门的同事一起发现问题,将问题转化为设计问题,进而提出设计策略。


 

/三/

设计师的自我成长


行业趋势不断变化,对设计师综合能力的要求不断提高。据此,我们梳理出各阶段设计师能力价值的模型,将设计师按初级、中级、高级、专家级等四个层级划分,展现不同的能力需求。

设计师个人的知识体系建立,则需要围绕着这个过程进行。


1、什么是个人知识管理


设计师构建个人知识管理体系的第一步,是有意识培养收集、整理、思考的习惯。

 

  • 在项目早期有意识地收集各类头脑风暴的资料,包括照片、资料等;

  • 在项目完成后,对各个时期迭代的设计素材、稿件进行归纳整理,总结;

  • 每隔一个季度,调阅以前的项目进行研究和重新设计。

 

通过这些习惯的训练和不断重复,培养自己的思维,以期在未来的某个时间点量变达到质变。

 

个人知识管理是一套解决问题的技巧,本身不创造价值。它的意义在于融入你关注的业务领域当中,帮助你获得分析和解决问题的能力。它是催化剂,必须依附于行业。

 

2、如何根据设计师价值模型建立个人知识管理体系


知识的进阶应与个人价值模型相匹配。


初级设计师的定位是协助执行。初级者主要配合切图、延展类的工作,专注于输出,依赖于各类资料和参考素材,创新成分10%-30%。而对于很多初级设计师来讲,建设素材库可能是一个无序的过程,需要有意识地通过一些方法、借助一些工具使这个过程有序起来。

 

中级设计师要能快速进行设计延展,他们专注于推动设计任务,创新成分30%-40%。中级者需要更注重设计规范的建立和应用,使之成为潜意思里的常识。

 

高级设计师的定位是拥有自己的设计风格,能够独立完成提案,创新的成分50%以上。他们能够将此前所累积的经验,内化为自己的方法理论,并重复利用这套方法理论,完成高质量的设计作品,除此之外还能够善于总结和分享。阶段的重点在于设计创新和反复打磨方法论。


专家级设计师的定位在于具有独创性的设计趋势和概念,能够引领行业发展,创新成分80%以上。他们已经完成底层思维的构建,多数是研究者的角色,专注于探索某个行业的未来走向,找出设计能参与并发挥最大价值的节点。他们的研究成果、设计观点和理念将会对行业产生积极影响并发挥推动作用,甚至引领一个时代。

 

3、不断刻意练习

 

知识的进阶需要和设计师价值模型相匹配,同样需要找到对应的个人知识管理步骤。资源对应“浏览、储存”,“常识”对应“整理、分类”,“方法”对应“课题、分享”,“思维”对应“利用、探索”,一共4个步骤。

但这不意味我们提倡在对应阶段只做对应的事。正相反,即使是一名初级设计师,我们也会建议他尽可能多加练习,争取能够完整地完成这4个步骤并不断重复。只有不断刻意练习,你才能实现向上一层的跃迁。差别只在于,不同阶段不同步骤所花费的时间精力占比不同。

 

对于设计师相对熟悉的前两个步骤(浏览、储存),这里就不一一说明。重点讲解后面的步骤。

 

关于整理和分类,我们提倡尝试多维度分类。这样能够快速调用资源,应对不同的设计需求及问题。

分享前的梳理和复习是巩固已有知识的大好机会。分享时则是深层次思考的过程,能够开阔思路,发现问题。当然,分享之后获得的成就感也是不言而喻的,这种尊重感一方面会驱动自我不断帮助他人,另一方面激励自己不断学习,形成良性循环.

 

从利己角度来讲,分享可以把你的【隐性知识】变为【显性知识】,从而实现【让别人知道你知道】的目的,创建个人品牌,提升核心竞争力。

 

个人知识管理是一个从【海绵式】到【淘金式】的过程。无序浏览、收集、分类整理是海绵期,需要如海绵吸水般发散式学习;分享、实践运用、独立探索属于淘金期,需要总结和找到适合自己的方法、理论,而不是一味地吸收。

中间是转化期也是转折点。这个时候选择比努力更重要。只有找到合适的环境,才能去独立探索、实践应用。



九品也尽力为全员创造更加开放的探索环境。几周前我们举办了关于“如何快速了解一个新领域,并找到设计策略”的研讨会,讨论了设计师在接触全新领域及客户时,该如何快速学习,从哪些维度、用哪些方法和资源去学习;以及,如何找到与客户的共鸣、发现潜在问题、找到设计策略……

研讨会的热烈程度超乎每一个人的想象。会议中大家纷纷分享自己的相关经历和看法,会后也将讨论成果带入到项目中进行实践和修正。


未来我们会持续探索新经济时代下设计师在各个领域的角色定位和价值范围,优化、深化客户服务体系,专精、专进地提供服务。

 

-end-

使用three.js的着色器通道渲染地球模型

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们都知道,three.js库里面内置了很多着色器通道对象供我们渲染场景,本文将对EffectComposer、RenderPass、FilmPass这三个通道进行学习和实现:

1.RenderPass这个通道会在当前场景(scene)和摄像机(camera)的基础上渲染出一个新场景,新建:

[javascript] view plain copy
  1. let renderPass = new THREE.RenderPass(scene, camera);  

2.FilmPass这个通道通过扫描线和失真模拟电视屏幕效果,实现的效果超有时代感,新建:

[javascript] view plain copy
  1. /*四个参数分别为粗糙程度,扫描线强度,扫描线数量,是否转换为灰度图*/  
  2. let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);  
  3. //将渲染结果输出到屏幕  
  4. effectFilm.renderToScreen = true;  

3.EffectComposer可以理解为着色器通道容器,着色器通道按照先后顺序添加进来并执行,新建:

[javascript] view plain copy
  1. /*渲染效果组合器,每个通道都按照传入的顺序执行*/  
  2. let composer = new THREE.EffectComposer(renderer);  
  3. composer.addPass(renderPass);  
  4. composer.addPass(effectFilm);  

本文实现的demo基于three.js_r86(请自行下载),代码所用js文件和图片都在下载的那个包里面,请读者自行引用。

实现效果:



代码:

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>shader_2_earth</title>  
  6.     <style>  
  7.         body{  
  8.             margin: 0;  
  9.             overflow: hidden;  
  10.         }  
  11.     </style>  
  12. </head>  
  13. <body>  
  14. <script src="build/three.js"></script>  
  15. <script src="js/libs/stats.min.js"></script>  
  16. <script src="js/libs/dat.gui.min.js"></script>  
  17. <script src="js/controls/OrbitControls.js"></script>  
  18. <script src="js/Detector.js"></script>  
  19.   
  20. <script src="js/postprocessing/EffectComposer.js"></script>  
  21. <script src="js/postprocessing/ShaderPass.js"></script>  
  22. <script src="js/postprocessing/MaskPass.js"></script>  
  23. <script src="js/postprocessing/FilmPass.js"></script>  
  24. <script src="js/postprocessing/BloomPass.js"></script>  
  25. <script src="js/postprocessing/RenderPass.js"></script>  
  26.   
  27. <script src="js/shaders/CopyShader.js"></script>  
  28. <script src="js/shaders/FilmShader.js"></script>  
  29.   
  30. <div id="stats"></div>  
  31. <div id="container"></div>  
  32. <script>  
  33.     //检测webgl的兼容性  
  34.    if(!Detector.webgl) Detector.addGetWebGLMessage();  
  35.   
  36.    let scene;  
  37.    let camera, renderer, sphere, controls, stats;  
  38.    let ambientLight, spotLight;  
  39.    let composer;  
  40.    let clock;  
  41.   
  42.    main();  
  43.    render();  
  44.   
  45.    function main() {  
  46.        scene = new THREE.Scene();  
  47.   
  48.        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);  
  49.        camera.position.set(-10, 15, 25);  
  50.        camera.lookAt(new THREE.Vector3(0, 0, 0));  
  51.   
  52.        renderer = new THREE.WebGLRenderer({antialias:true});  
  53.        renderer.setClearColor(new THREE.Color(0,0,0));  
  54.        renderer.setSize(window.innerWidth, window.innerHeight);  
  55.        renderer.shadowMapEnabled = true;  
  56.   
  57.        controls = new THREE.OrbitControls(camera);  
  58.        controls.autoRotate = false;  
  59.   
  60.        clock = new THREE.Clock();  
  61.   
  62.        ambientLight = new THREE.AmbientLight(0x181818);  
  63.        scene.add(ambientLight);  
  64.   
  65.        spotLight = new THREE.SpotLight(0xffffff);  
  66.        spotLight.position.set(550, 100, 550);  
  67.        spotLight.intensity = 0.6;  
  68.        scene.add(spotLight);  
  69.   
  70.        //创建地球  
  71.        sphere = createMesh(new THREE.SphereGeometry(10, 60, 60));  
  72.        scene.add(sphere);  
  73.   
  74.        document.getElementById("container").appendChild(renderer.domElement);  
  75.   
  76.        /**  
  77.         * 添加渲染通道  
  78.         */  
  79.        //在当前场景和摄像机的基础上渲染一个新场景  
  80.        let renderPass = new THREE.RenderPass(scene, camera);  
  81.        //通过扫描线和失真来实现模拟电视屏幕的效果  
  82.        let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);  
  83.        //将渲染结果输出到屏幕  
  84.        effectFilm.renderToScreen = true;  
  85.   
  86.        //渲染效果组合器,每个通道都按照传入的顺序执行  
  87.        composer = new THREE.EffectComposer(renderer);  
  88.        composer.addPass(renderPass);  
  89.        composer.addPass(effectFilm);  
  90.   
  91.        //菜单栏元素  
  92.        let guiFields = {  
  93.            "扫描线数量": 256,  
  94.            "灰度图像": false,  
  95.            "扫描线强度": 0.3,  
  96.            "粗糙程度": 0.8,  
  97.            "updateEffectFilm": function () {  
  98.                effectFilm.uniforms.grayscale.value = guiFields.灰度图像;  
  99.                effectFilm.uniforms.nIntensity.value = guiFields.粗糙程度;  
  100.                effectFilm.uniforms.sIntensity.value = guiFields.扫描线强度;  
  101.                effectFilm.uniforms.sCount.value = guiFields.扫描线数量;  
  102.            }  
  103.        };  
  104.   
  105.        //新建一个菜单栏  
  106.        let gui = new dat.GUI();  
  107.        gui.add(guiFields, "扫描线数量", 0, 2048).onChange(guiFields.updateEffectFilm);  
  108.        gui.add(guiFields, "扫描线强度", 0, 1).onChange(guiFields.updateEffectFilm);  
  109.        gui.add(guiFields, "粗糙程度", 0, 3).onChange(guiFields.updateEffectFilm);  
  110.        gui.add(guiFields, "灰度图像").onChange(guiFields.updateEffectFilm);  
  111.   
  112.        stats = initStats();  
  113.    }  
  114.   
  115.    //创建一个Mesh  
  116.    function createMesh(geometry) {  
  117.   
  118.        //初始化纹理加载器  
  119.        let textureLoader = new THREE.TextureLoader();  
  120.        //加载图片  
  121.        let uniforms = {  
  122.            planetTexture:{value:textureLoader.load("textures/planets/earth_atmos_2048.jpg")},  
  123.            specularTexture:{value:textureLoader.load("textures/planets/earth_specular_2048.jpg")},  
  124.            normalTexture:{value:textureLoader.load("textures/planets/earth_normal_2048.jpg")}  
  125.        };  
  126.   
  127.        //创建phong材料,并进行相应图片的贴图  
  128.        let planetMaterial = new THREE.MeshPhongMaterial();  
  129.        planetMaterial.specularMap = uniforms.specularTexture.value;  
  130.        planetMaterial.specular = new THREE.Color(0x4444aa);  
  131.   
  132.        planetMaterial.normalMap = uniforms.normalTexture.value;  
  133.        planetMaterial.map = uniforms.planetTexture.value;  
  134.   
  135.        //新建一个mesh  
  136.        let mesh = new THREE.SceneUtils.createMultiMaterialObject(geometry, [planetMaterial]);  
  137.   
  138.        return mesh;  
  139.    }  
  140.   
  141.    //渲染更新场景  
  142.   
  143.    function render() {  
  144.        stats.update();  
  145.        let delta = clock.getDelta();  
  146.        controls.update(delta);  
  147.        sphere.rotation.y += 0.002;  
  148.        requestAnimationFrame(render);  
  149.   
  150.        //没有着色器通道系统默认为WebGLRenderer.render  
  151.        //使用着色器通道后,应使用使用composer.render  
  152.        composer.render(delta);  
  153.    }  
  154.   
  155.    //左上角帧显示  
  156.    function initStats() {  
  157.        let stats = new Stats();  
  158.        stats.setMode(0);  
  159.        stats.domElement.style.position = 'absolute';  
  160.        stats.domElement.style.left = '0px';  
  161.        stats.domElement.style.top = '0px';  
  162.        document.getElementById("stats").appendChild(stats.domElement);  
  163.   
  164.        return stats;  
  165.    }  
  166. </script>  
  167. </body>  
  168. </html>  
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

8个非常个性化的CSS3单/复选框

周周

       单选框和复选框在网页表单中应用十分广泛,但是浏览器默认自带的单选框和复选框样式不仅不统一,而且大多都比较简单丑陋。本文给大家介绍了一些基于CSS3的个性化单选框和复选框,一些选中动画是基于jQuery的,你可以挑选喜欢的单选框和复选框应用到自己的网页中去,非常方便。

         1、jQuery超级个性化的单线框和复选框

       今天要分享的也是一个非常个性化的单选框和复选框插件,颜色你可以自己定义。

      56a706650001cc8206100418.png

                   在线演示  源码下载

         2、CSS3漂亮的自定义Checkbox复选框 9款迷人样式

       今天我们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox复选框。这几款复选框样式很丰富,使用起来也比较方便。


56a70c3e0001aede05880266.jpg

                    在线演示  源码下载

        3、CSS3自定义美化复选框Checkbox组合

       今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox,每一个checkbox都有其各自的特点。有几款checkbox在选中的情况下还会出现动画效果,非常不错的CSS3自定义美化checkbox组合。

56a70cbb00019efb06100379.png

                在线演示   源码下载

       4、jQuery实现美化版的单选框和复选框

       今天这款是利用jQuery实现的美化版单选框和复选框,样式风格非常简洁清爽,是一款很不错的jQuery按钮插件。

56a70e01000161c706100252.png

                          在线演示  源码下载

       5、纯CSS3 3D按钮 按钮酷似牛奶般剔透

       CSS3按钮一般都可以设计的非常漂亮,利用投影、渐变等CSS3属性可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔透的牛奶,而且在点击按钮时出现3D效果的动画,按钮按下时,按钮会轻轻的弹动一下,非常逼真。

56a70e1000013a8d05880281.jpg

                 在线演示  源码下载

        6、HTML5/CSS3开关按钮 立体3D按钮

        今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的,代码非常简单,3D效果也还可以。

56a70e1b0001142f08000557.gif

                  在下演示  源码下载

         7、CSS3自定义发光Radiobox单选框

       今天我们要来分享一款CSS3实现的自定义发光radiobox单选框插件,该radiobox选中时也有滑块的动画。

56a70e2d0001b19b05880259.jpg

                   在线演示  源码下载

      8、CSS3实现自定义Checkbox动画

      今天我们要再来分享一款CSS3自定义checkbox,而且这款checkbox还带有动画效果,当你选中checkbox的时候,会以动画的方式打上一个大大的勾。

56a70e350001219c05880215.jpg 

                   在线演示  源码下载



         以上就是8个非常个性化的CSS3单/复选框,希望对你有所帮助。

       本文链接:http://www.codeceo.com/article/10-personal-css3-radiobox-checkbox.html







PC端表单设计的研究:如何设计一个优秀的表单页面

蓝蓝设计的小编

最近身边的一些小伙伴,总会遇见B端设计工作,对于这种偏后台设计的B端设计,总会有大量的表单设计需要做,结合以前自己也有过不少表单设计的工作,在这里给大家分享一下自己对于PC端表单设计的研究,聊一聊表单在PC端中的运用。

include指令标记与动作标记详解

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

一.include指令标记

include指令标记用于把JSP文件,HTML网文文件等文件静态嵌入当前JSP网页中,语法如下:

[html] view plain copy
  1. <%@include file="xxURL"%>  

静态嵌入就是“先包含后处理”在编译阶段完成对文件嵌入,即先将当前JSP页面与被嵌入文件合并成一个新的JSP页面

eg:

[html] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="ISO-8859-1"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  7. <title>Insert title here</title>  
  8. </head>  
  9. <body>  
  10.         <font color="red"size=5>  
  11.             lalla  
  12.         </font>  
  13. </body>  
  14. </html>  
            
[html] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  7. <title>include动作标记</title>  
  8. </head>  
  9. <body>  
  10.     <br>  
  11.         <jsp:include page="demo.jsp"/>  
  12.     </br>  
  13. </body>  
  14. </html>  
运行结果如下:


二.include动作标记:

动作标记是将JSP等文件动态嵌入当前JSP网页中,语法如下:
[html] view plain copy
  1. <jsp:include page="xxURL"/>  

[html] view plain copy
  1. <jsp:include page="xxURL">  
  2.    子标记  
  3. <jsp:include/>  

动态嵌入就是“先处理后包含”在运行阶段完成对文件嵌入,即在把JSP页面转译为JAVA文件时,并不合并两个页面。

eg:

[html] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="ISO-8859-1"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  7. <title>Insert title here</title>  
  8. </head>  
  9. <body>  
  10.         <font color="red"size=5>  
  11.             lalla  
  12.         </font>  
  13. </body>  
  14. </html>  

[html] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  7. <title>include动作标记</title>  
  8. </head>  
  9. <body>  
  10.     <br>  
  11.         <jsp:include page="demo.jsp"/>  
  12.     </br>  
  13. </body>  
  14. </html>  

运行结果:

总结:静态嵌入中嵌入页面与原页面合并了,动态嵌入则还没有。

动态嵌入与静态嵌入相比较,动态嵌入执行速度稍慢,但是灵活性较高。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档