首页

一个懂市场的设计师有多可怕?

博博

一个懂市场的设计师有多可怕?

118天前发布

集创堂原创文章 / UI / 观点 

设计师不是孤立的,我们的一切设计都是多种条件共同作用的结果,考量产品处于什么样的市场,是做好设计的基石。

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

为什么要跟设计师聊市场?因为设计师不是孤立的,我们的一切设计都是多种条件共同作用的结果,考量产品处于什么样的市场,是做好设计的基石。今天要跟大家谈的就是处于现有市场、全新市场、垂直市场的产品所对应的设计策略。


现有市场的设计策略


现有市场是社会价值和用户需求已经被论证的市场,比如淘宝、京东、天猫、58同城、美团、手机类等都是现有市场。这些产品的用户量很大,新的产品加入很难发掘新的竞争机会。


就拿手机来说,经过几十年的开发后,各种产品的设计非常的雷同。所以在这个市场里,从产品的宏观角度来说,设计往往起不到太大的作用了。假如我们采用差别化战略,那么往往拼的是性价比。小米就是这样做的,小米通过优化利益链条,它可以将一个价值3000元的手机卖到1900元。


那么这里我们提一个问题,你觉得小米手机到底属于是设备还是互联网产品?


小米为什么说自己是互联网公司?一部分原因是小米是完全的借助互联网发售,这样就省去了中介环节,手机直接发给用户也确实省去了渠道成本,所以这样它才有能力把价格卖到这么低。但是这又涉及到另外一个问题,这种有形产品需要经过了解、信任、价值和转化这套流程,小米没有渠道和中介环节,那么最开始它是如何让用户产生了解和信任的呢?


为了做到这一点,小米造出了一个词:“粉丝文化”。它让用户通过在论坛不停地地提建议和互动,通过交流让用户自己完成了对小米手机的了解和信任,完成了销售的第一步。但是这还不足说明它是互联网产品,还有另外的原因。那么第二步呢?


设备类产品通常软件和硬件是融合到一起的。比方说,联想手机,它被生产出来后,它的系统不会再频繁的升级,因为联想手机的产品线过于庞大,因此也无法保证能常常升级的频率,而小米却带来了不一样的变化。


首先小米只有一款手机,这样它维护起来更加方便,其次,小米分离了软件和硬件,使自己变成了独立的操作系统,然后像app一样借助自己的平台即时收集用户的反馈和意见,定期更新和优化自己的系统。这就是互联网思维的特性二:专注、反馈、快速、频繁迭代,它在小米身上得到了充分的体现。


小米的这种研发模式,结合了手机的特点和互联网的更新特点,确实能时刻抓住刺激粉丝的兴奋点。这种模式前期确实起到了不错的效果,但是同时也埋了地雷。在产品开发的世界里,很多的难题都出现在大家都看不到的区域。比如如三星的s3、 s4 引入了大量的创新功能,加了很多的传感器,但是这些东西加入后,谁也不知道会不会对手机的基础功能出现影响,毕竟大家都不能未卜先知。到了一年后最后大家才发现三星的旗舰机,用了一年后系统会瘫痪,这是因为大量新技术的加入,带来了很多未知的问题。


小米也是,小米的软硬分离让带来了软件可以快速升级,从而可以迅速迎合用户的优势。但是同时也带来了问题,小米手机如果使用了一段时间,硬件的触摸上就会出现一些出现错误。


小米的商业策略成功后,一大批企业,华为、联想、中兴把它们的手机都变为了千元机系列。当然这些公司也只是盲目的打价格战而已,小米的千元精髓,并未被根本复制出来。


上面谈的这些,都是在讲我们从传统的设计逻辑中摆脱出来,可以尝试看到更多的商业逻辑。集创堂反对的是孤岛型设计师,我们主张设计师更多的从市场、产品、自身形态多个角度去看待问题,这样才能让自己的设计价值最大化。我们再来谈第二个例子,这个和设计有关。

翼支付要从支付宝中抢夺份额


还有一个类似的故事是天翼支付如何抢夺支付宝市场份额的故事,这种形态的产品,设计是无法起到决定性的作用的。道理很简单:在现有市场里,你的产品功能和支付宝一模一样,并且支付宝占据了市场,那么你的设计就很难找到什么突破点去打破这种统治,唯一的办法——咱们说的直白点——就是用钱砸,支付宝年收益率是4%,你是8%,这样才有机会从市场中拿到一点点份额。因为在现有市场中这种前提下,产品拼的就是钱,就是销售成本。


兰切斯特战略里曾经提到:“在现有市场中,对于那些已经形成市场统治力的产品,要想和它斗争的话,你的销售和投入必须是它的三倍才有机会获胜”。看来从这点来说我刚说的8%已经少了,应该是12%。


讲这个些例子是想告诉设计师,很多时候如果你努力的方向对,你的努力其实都是无用功,不是什么事拼命去做都就一定会带来价值的,这也是我一直在讨论集创思维的重要原因。作为一个设计者,前期一定要了解自己的目标人群、市场以及产品所处的市场。


全新市场的设计策略


全新市场是未被验证社会价值的市场,在这个市场里根本找不到竞品的,他完全是新的产品,例如Google Glass。中国的企业甚至整个亚洲的企业都很少会去挑战全新市场,这种市场的风险极高,往往推出做一款产品设计之前要用1年甚至更长的时间做用户研究,而且失败的风险率极高。当然也可能带来很多专利方面的贡献,一旦成功,利益也是可观的。


全新市场的产品做用户调研的失误率也非常之高,因为用户从来没见过设计师描述的产品,他们给出的反馈结果也未必能反应他们的真实诉求。这个时候“专家用户”的观点就变得极为重要,因为专家用户长期处在相应的这种环境中,他们对于市场的感应更加敏锐,所以他们给出的结果就更可能找到创新产品的生存本质。之前讲到到Google Glass就是全新市场的案例。


做全新市场的产品要严格思考自己是否能解答用户的刚需,这个可以参考马斯洛原型中的图解,除此之外还要考虑这个产品的使用是否会成为一个高频率事件,这样才有足够的商业空间。我们可以通过“创新三要素”来判定这个创新是否是一个合理的创新。


亨利福特说过一句话:假如当初我问客户他们,需要什么,那么他们会告诉我他们要一匹批更快的马。那么用户所要的这匹“更快的马”的本质上是什么呢?


他们本质上要的是更快的速度、更快的效率,所以创新三要素的第一个就是:


A.是否提升了人们的使用效率


例如火车取代马车,机器取代手工都是因为它们提升了人们的工作效率,这是时代发展决定的。所以提升效率是创新能否被广大用户接受的第一要素。


B.是否让人们获取更多、更准确的信息


互联网的出现取代了着书籍;电商平台酒仙网的出现让更多的人愿意通过它来购买酒水,这是因为它们可以提供给用户更多的信息(可以对比酒水的价格)。人们对于信息的获取也是一个很原始的需求,好比一位小贩做生意,在东村进货需要4元,在西村进货只就需要2元,如果他事先不知晓这些信息就有可能亏本。所以人们对信息是充满渴望的。


当前很多的社交产品都会遇到同样的问题。微信对它们的冲击力太大,特别在信息的通讯效率这方面,没有产品对手能拼得过微信。那么拼效率我们走不通,我们却可以拼在当前的场景下如何更好的提升信息。比如陌陌拼掉微信“附近的人”,就是在陌生人社交领域用更多的信息战胜了更高快的效率。再比如,同性恋社交产品在同性恋领域拼掉微信,也是因为更多、更准确的信息战胜了效率。


C.是否满足人群在特殊情况、特别资源下的需求


这个点是指一些创新有独特的商业壁垒、独特的资源优势、独特的需求的,例如12306这种产品,或者人工智能等技术领域就属于此类。


垂直市场的设计策略


垂直市场,也称为细分市场。在这个市场里我们的产品策略通常是细分一个规模很大的现有市场,例如细分淘宝、细分社交都能带来更多的创业机会。这个也是目前创业机会出现最多的市场。

比如在手机市场的红海里,假如我们生产一款老人手机或儿童手机,那么这个就是属于垂直市场。当无数老人手机涌现出来的时候,手机市场需要细分去满足老年群体的需求,因为现有市场的产品无法满足这类群体的需求,所以市场需要细分去满足特殊群体的需求。


细分这个市场需要更好地的调研出市场目标人群的需求,然后根据目标人群的特点来开发产品,设计师应该用更多的时间去调研目标人群的需求,只有更好的找准人群,才能很好的设计出被他们喜爱的功能


比方说我们要生产老人手机,那么大家可以看看上图中的界面,看出有什么问题了吗?通常我们会对于老人机的理解是认为觉得老人眼花,那么大号字体、大型图标肯定是符合老人非常关注的一个特点的设计,所以我们在这张界面中增大了字号和点击模块。但是经过调查研究发现,其实这张界面的设计里面的文字和空间摆放也是充满了问题。


首先很多老人都不明白“聊天室”这个功能的含义,它居然还放在了顶部这么显著的位置。另外像“图库”这种平时我们觉得很容易理解的文案,可能很多老人们都觉得理解起来也很困难。


另外还有一个细节特点是非常不容易发现的,你死盯着界面考虑很难会注意这一点,那就是老人点击手机的时间比预想的要长,换句话说就是老人无法区分的“点击”会和“长按”功能发生冲突。所以,我们在做老人机的设计时、就应该该取消“长按”的功能,只要老人触摸到图标就应该给予一样的反馈效果。界面的长按、双击和单击,我们都默认是一个操作。


因为在实际设计过程中,设计师还应该考虑到系统运行速度慢的问题。如果是一个缓慢的手机系统,会带来造成老人的多次点击,他们会怀疑是不是自己没有点中。所以从上述的观察,我们可以想象到联想到苹果手机的 3D Touch,这个技术对于老人们来说是多么大的认知负荷。


另外关于垂直市场,我们再谈一款深受95后喜欢的社交软件——JUJU。


微信这个产品当初在95后的人群里并不是十分被买账,记得张小龙曾经调研过几位95后的女孩,向他们推荐微信的功能。例如,微信可以免费的发消息,这可是非常吸引70后和80后的功能,就是一个很酷的功能。但95后的女孩表示毫无感觉。张小龙和她们聊了很多,最后聊起微信“附近的人”这个功能,可以查看附近的帅哥美女,两位95后的女孩才感觉这个功能很酷。


张小龙顿时感慨,深受电子产品影响的95后人群崛起后,可能会对腾讯的业务造成很大的冲击。时代的差异会带来更多细分市场的商机。那么我们可以来品评下部分95后喜欢的社交软件JUJU——这是一款二次元社交产品,很多80后甚至90后可能根本没听说过。


所谓的“二次元社交”就是用漫画或动漫番剧里的世界观来进行社交,这对很多不了解二次元世界的人来说是非常艰难的认知壁垒,笔者为了解这款软件,曾经潜心在里面陪着各路用户聊天聊了整整三天,还虚心地拜了位“师傅”,向他们请教各种自己听看不懂的名词问题。后来一问自己的“师傅”原来是个初中生,还没参加中考。

在JUJU里学习的过程中,笔者围绕了Cosplay、二次元交友积累了大量的文案和谈话内容,如果你没看过 live 现行的等几部知名漫画或者动漫的话会是非常难以理解JUJU里呈现的内容的,但是这些我们看来难以理解的词句却词让这个特殊的群体找到了属于自己的文化认知——JUJU二次元中独有的文化认知。


例如,“六娃的隐身模式”这种在JUJU在设置里是直接引用的词,其实就是app里对用户常规的隐身模式里很火的词串。大家知道为什么这里会出现六娃吗?我相信很多上年纪的人都不懂,在国产动漫界有个一个知名的漫画网站叫“有妖气”,“有妖气”上有个非常出名的漫画叫《十万个冷笑话》,剧情里七个葫芦娃里的六娃是隐身娃,它的漫画设定是从出生开始就是被动隐身的,也就是从来没有人看到过他的脸,我估计连他自己都不知道自己长什么样,这个梗不知怎么在二次元里就火了,很多二次元的95后只要看到隐身就会联系到六娃。


诸如此类的“暗语”在JUJU中是非常多的,形成了自己独有的社交文化,也让这类用户找到了归属感。


最后还是那句话——不要做孤岛型设计师,多抬头看看天,从多维度考量产品的设计到底应该如何做。


关注公众号“集创堂”,查看更多原创设计类文章。

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


如何创建人物插图——2018年世界杯版

博博


如何创建人物插图——2018年世界杯版 

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


五步创作2018世界杯超级球星插画


2018年世界杯赛正在如火如荼地进行,为了以示庆祝,我们挑选了来自多个国家的25位超级明星,给他们创作人物插图,送给广大球迷们。在创作过程中,Leo Natsume&Daniel Nyari给了我们很多灵感,非常感谢!


为了准确地画出每个球星的面部结构特征,一开始收集材料的时候就要收集的全一些。我们要从照片中提取每位球星的准确特征,这样最后做出来的插画才能“形神兼备”,才能非常生动。

让我们一起来看看设计思考的过程吧。



    

第一步


观察人物要从不同角度来看——正面,45度和侧面轮廓。此外,我们还需要收集不同面部表情的照片,比如冲刺的时候、休息的时候、微笑的时候等,才能更了解人物。做设计,我们不仅要看到“形”,还要看到“神”,多了解人物的个性和习惯有助于我们做出更有灵魂的设计创意。





第二步


接下来,我们要根据刚刚从不同角度做的人物分析总结一般面部结构和特征。我们以梅西为例,他留着经典的复古发型、大耳朵、小而有神的眼睛。当然,为了保持插图最终的统一性,所有人物的视线水平需要保持一致,并且应该根据人脸的长度和宽度以及发型进行调整。






第三步


通过前两个步骤之后,现在我们已经有了人物的主要图像了。现在,可以开始考虑人物的种族,肤色,发型和制服的颜色了,这样有助于做出原汁原味的人物视觉。同时,我们必须调整整体色调来调节亮度和饱和度的差异。





第四步


这是最关键的一步。完成以上所有操作后,就可以根据前面步骤中收集的照片选择每个球星最具特色的面部表情。例如,梅西微笑着轻轻抬起头的样子最吸引人,我们就选这个表情。







第五步


这是最后一步,我们将做细节的调整,包括人物的整体图像结构、颜色对比度、面部元素之间的比例等。然后再添加其他内容,如条纹、耐克/阿迪达斯徽标和其他此类细节。最后,将设计草稿缩小200%,以确定某些地方的设计是否足够亮。





经过上述五个步骤之后,我们的球星插画就出炉啦。我们一共设计了25位球星插画,挑选部分比较好的展示一下。And,祝大家看世界杯愉快!



























作者:Queble

翻译:熊小熊

原文链接:https://uxplanet.org/how-to-create-character-illustrations-2018-world-cup-edition-8a709dcfd589


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



表格设计(上篇):18种样式,与你分享

涛涛

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

最近在做一款工具类软件,主要涉及表格的设计,边工作边整理了一些表格的设计样式和原型图,拿出来与需要的人分享。欢迎与我交流,有需要原型的小伙伴也欢迎在下方留言。

表格样式一

表格样式主要分为两大类,第一类表格中通常以一行为组,操作均是以组为单位进行。此类表格优点是简单直观,操作感强,可提前设定好计算公式;缺点是对于某一数据的批量操作较为复杂,不方便自定义复杂计算。

常用于信息展示,无需复杂计算的网页和C端界面中。

表格样式一:缝隙

第一类表格以行为一组,表头通常固定在最上端不参与滑动,现代设计为了美观通常也没有单元格的线框,设计时为了更直观的体现一条数据,可以在每条数据之间留一个缝隙。

表格样式一:斑马线

或者用斑马线形式更直观的展示数据,避免用户可能看串行的对不齐数据的情况。

表格样式一:按钮

为了页面的简洁可以将上端按钮尽可能减少,整个表格上端原则上保留批量操作功能按钮,对于单行的操作按钮可以放置在单行中悬浮展示。

表格样式一:拖拽

因为单行是一个模块,当有需要调整顺序时可以支持整行的拖拽操作。

表格样式一:分页1

当内容较多需要除了无限滚动外,还可以选用分页的方式,目前较为常见的可以选择如下方式。

表格样式一:分页2

若不需要突出页码,主要查看都在第一页上时可以考虑将放在角落里,到达首页和到达尾页根据产品需求决定是否使用。

表格样式一:搜索

搜索功能考虑到用户需要手动输入,很难保证精准搜索,原则上所有搜索均为模糊搜索,必要精准搜索的地方使用筛选功能,给用户提供筛选选项。通常上端搜索栏不被限定搜索范围,可以全部搜索。

表格样式一:分项搜索

对比必要的分项搜索功能可以对应到各个列中,同时输入时可以给出联想结果,仍然应该设计为模糊搜索。

表格样式一:筛选

对于各个列中必须精准搜索的数据可以设计为筛选功能,可为用户提供可勾选的筛选信息。

表格样式一:高级筛选

对于部分列有筛选需求的情况,可以设计弹框输入筛选条件,也可以在此设计复杂筛选条件,筛选规则在上端展示,可以更直观的看到已筛选项。

表格样式一:可编辑单元格提示

表格中存在可编辑单元格和不可编辑单元格时,为了界面的一致性和美观性,可以考虑鼠标悬浮时给出可编辑单元格的编辑框,区分两种不同单元格样式。

表格样式一:信息预览(浮窗)

对于汇总表中如有预览详情的需要,同时对于数据仅为查看没有修改需要的时候可以考虑悬浮提示将主要数据进行展示。

表格样式一:信息预览(弹窗+蒙板)

对于详细有部分属性修改需求,对于细节没有修改需求的,可以考虑在一侧弹出弹框进行展示和修改属性。(如报价单表格信息,报价单审核状态的可以在此修改,详细信息仍在明细表中修改)

表格样式一:信息预览(折叠)

折叠模式的使用环境基本等同于弹出模式,可根据设计风格进行选择。

表格样式一:信息预览(弹窗)

单独弹出窗口在需要有多项数据进行对比查看时可以选用,弹出窗体操作通常只考虑状态改变,不建议其他数据在此更改。

表格样式一:信息预览(变导航)

此种展示方式,对于需要查看和修改较多数据的需求可以选中,汇总表将收为类似于导航栏的模式,数据可以精简只展示关键数据,弹窗可设计复杂操作,可以包含明细的修改等功能。

表格样式一:信息预览(变窗体结构)

通过减少列表高度流出信息展示空间,建议两部分在一屏内展示可分别滑动或翻页,汇总表信息完整,弹出窗体也可进行复杂操作设计。

表格样式一:信息预览(自定义表头)

自定义表头设计可以将此操作藏在较明显的位置同时可以保证界面的简洁。

后续

上篇中主要展示了一些表格样式一的一些操作习惯,除此之外还会在很多专业工具的设计中用到另一种展现形式类似于EXCEL表格。

欢迎各位做过类似项目的产品经理与我多多交流,如有需要原型的小伙伴可以在下方留言,我再将下载地址放出。如果大家喜欢这篇文章我会继续完成下篇的内容。

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

表格设计(上篇):18种样式,与你分享

涛涛

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

最近在做一款工具类软件,主要涉及表格的设计,边工作边整理了一些表格的设计样式和原型图,拿出来与需要的人分享。欢迎与我交流,有需要原型的小伙伴也欢迎在下方留言。

表格样式一

表格样式主要分为两大类,第一类表格中通常以一行为组,操作均是以组为单位进行。此类表格优点是简单直观,操作感强,可提前设定好计算公式;缺点是对于某一数据的批量操作较为复杂,不方便自定义复杂计算。

常用于信息展示,无需复杂计算的网页和C端界面中。

表格样式一:缝隙

第一类表格以行为一组,表头通常固定在最上端不参与滑动,现代设计为了美观通常也没有单元格的线框,设计时为了更直观的体现一条数据,可以在每条数据之间留一个缝隙。

表格样式一:斑马线

或者用斑马线形式更直观的展示数据,避免用户可能看串行的对不齐数据的情况。

表格样式一:按钮

为了页面的简洁可以将上端按钮尽可能减少,整个表格上端原则上保留批量操作功能按钮,对于单行的操作按钮可以放置在单行中悬浮展示。

表格样式一:拖拽

因为单行是一个模块,当有需要调整顺序时可以支持整行的拖拽操作。

表格样式一:分页1

当内容较多需要除了无限滚动外,还可以选用分页的方式,目前较为常见的可以选择如下方式。

表格样式一:分页2

若不需要突出页码,主要查看都在第一页上时可以考虑将放在角落里,到达首页和到达尾页根据产品需求决定是否使用。

表格样式一:搜索

搜索功能考虑到用户需要手动输入,很难保证精准搜索,原则上所有搜索均为模糊搜索,必要精准搜索的地方使用筛选功能,给用户提供筛选选项。通常上端搜索栏不被限定搜索范围,可以全部搜索。

表格样式一:分项搜索

对比必要的分项搜索功能可以对应到各个列中,同时输入时可以给出联想结果,仍然应该设计为模糊搜索。

表格样式一:筛选

对于各个列中必须精准搜索的数据可以设计为筛选功能,可为用户提供可勾选的筛选信息。

表格样式一:高级筛选

对于部分列有筛选需求的情况,可以设计弹框输入筛选条件,也可以在此设计复杂筛选条件,筛选规则在上端展示,可以更直观的看到已筛选项。

表格样式一:可编辑单元格提示

表格中存在可编辑单元格和不可编辑单元格时,为了界面的一致性和美观性,可以考虑鼠标悬浮时给出可编辑单元格的编辑框,区分两种不同单元格样式。

表格样式一:信息预览(浮窗)

对于汇总表中如有预览详情的需要,同时对于数据仅为查看没有修改需要的时候可以考虑悬浮提示将主要数据进行展示。

表格样式一:信息预览(弹窗+蒙板)

对于详细有部分属性修改需求,对于细节没有修改需求的,可以考虑在一侧弹出弹框进行展示和修改属性。(如报价单表格信息,报价单审核状态的可以在此修改,详细信息仍在明细表中修改)

表格样式一:信息预览(折叠)

折叠模式的使用环境基本等同于弹出模式,可根据设计风格进行选择。

表格样式一:信息预览(弹窗)

单独弹出窗口在需要有多项数据进行对比查看时可以选用,弹出窗体操作通常只考虑状态改变,不建议其他数据在此更改。

表格样式一:信息预览(变导航)

此种展示方式,对于需要查看和修改较多数据的需求可以选中,汇总表将收为类似于导航栏的模式,数据可以精简只展示关键数据,弹窗可设计复杂操作,可以包含明细的修改等功能。

表格样式一:信息预览(变窗体结构)

通过减少列表高度流出信息展示空间,建议两部分在一屏内展示可分别滑动或翻页,汇总表信息完整,弹出窗体也可进行复杂操作设计。

表格样式一:信息预览(自定义表头)

自定义表头设计可以将此操作藏在较明显的位置同时可以保证界面的简洁。

后续

上篇中主要展示了一些表格样式一的一些操作习惯,除此之外还会在很多专业工具的设计中用到另一种展现形式类似于EXCEL表格。

欢迎各位做过类似项目的产品经理与我多多交流,如有需要原型的小伙伴可以在下方留言,我再将下载地址放出。如果大家喜欢这篇文章我会继续完成下篇的内容。

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

设计大师眼中的设计

蓝蓝设计的小编

为了创作出独特的东西,你的所有大脑神经必须集中在微小的细节上。

遮罩层上滚动,使下方的列表随之滚动

seo达人

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

效果

这里写图片描述

遮罩层为一张边框样式图(如下图):

这里写图片描述

边框样式遮罩层显示在最上方,然后是中间的列表,最下层是一个透明黑色遮罩层,滚动鼠标滚轮,能控制列表滚动

实现原理

注册最上面遮罩层的滚动事件,拿到滚动滚动方向,然后控制列表滚动的方向和距离

上代码

注册事件 /**
 * 增加滚轮滚动事件(暂时只实现了chrome的滚动效果)
 * @param modalDomId 遮罩层domId
 * @param domId 需要滚动下层列表domId
 */ addMousewheelListener(modalDomId:string,domId:string){ //添加页面监听 let modalAwardPanel = document.getElementById(modalDomId);
  modalAwardPanel.addEventListener('mousewheel',function(e){
    let scrollContentDom = document.getElementById(domId); //向上滚 if (e.wheelDelta > 0){ if (scrollContentDom.scrollTop -20 >= 0){
        scrollContentDom.scrollTop = scrollContentDom.scrollTop - 20;
      } else{
        scrollContentDom.scrollTop = 0 ;
      }
    } //向下滚 else{ if(scrollContentDom.scrollTop + scrollContentDom.clientHeight < scrollContentDom.scrollHeight){
        scrollContentDom.scrollTop = scrollContentDom.scrollTop + 20;
      }
    }
  });
}

组件调用: this.addMousewheelListener("你的最上方遮罩层id","你想要滚动的列表id");
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

连BAT设计师都在用的视觉动线技巧

涛涛

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

作为设计师,我们需要很好的控制用户在使用产品过程中,他们浏览的路径,需要了解我们的眼睛是如何处理信息,本周我会结合我之前学习的一些知识和大家分享下视觉动线这个概念,以及如何在设计中进行运用!学习过程红大家任何不明白地方,欢迎加我微信交流:uiskyss

请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图

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

作为PM,你居然不知道Axure这10种非交互功能?

蓝蓝设计的小编

提到Axure,这可是绝大多数PM童鞋靠着吃饭的家伙事儿。Axure被很多人定义为一个以交互见长的原型设计工具。很多初入坑甚至入坑甚久的PM为画出炫酷的原型挖空了心思。我想这对Axure的初衷一定是有误解。

前端算法之弹幕设计

seo达人

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

大家都说前端写页面较多,几乎用不到算法。本文愿从弹幕设计这个场景来描述算法在前端中的应用,我们先来看下实现效果:

图1.1 弹幕效果

 

开场之前我们先来描述弹幕开发的难度,再集中精力描述算法设计的思路。

* 如何保证不同字号的弹幕不碰撞
* 弹幕的位置计算
* 弹幕的速度控制及动画实现
* 弹幕与视频的同步

***如何保证不同字号的弹幕不碰撞***

如果弹幕采用相同的字号,碰撞的问题处理起来比较简单,只要考虑相邻弹幕的播放速度和偏移的位置就可以计算出来。然而使用不同字号的弹幕处理起来就麻烦了许多,弹幕的起始位置不可以线性的增加,比如第一行放了字幕,接下来的字幕可以按顺序从上至下依次放置即可。

***弹幕的位置计算***

只有设计好弹幕的初始位置,才可以动态、的管理不同字号弹幕的碰撞问题。打个比方,我们通过接口获取了2秒之内的弹幕数据1000条,每个字幕的长度、速度、字号都不同,怎么管理这些弹幕,示意图如下:

图2.1 弹幕管理示意图

 

这是第一种情况,按照从上到啊的顺序依次摆放以后会有几个问题:
1. 弹幕五、六、七该怎么计算位置,按top值循环取模+累加吗?
2. 当弹幕一或者弹幕三足够长的时候,如何准时的跳过当前位置计算?
3. 当前屏幕的弹幕播放结束,如何再计算的时候利用空出来的位置
4. 空出的位置是否满足当前弹幕的高度
5. ……

一系列问题就不统统列举出来了,基于这个背景我们结合数学建模的思维方式,找到了弹幕场景相似度非常高的机场运营。我们可以把弹幕当做飞机,每个时间段播放多少弹幕和机场每个时间段放飞多少飞机一个道理。

首都国际机场一共有3条跑道,两条4E级跑道、一条4F级跑道,2016年的吞吐量为9000万人次。它的运行机制就是所有飞机通过搭台有顺序的共用3条跑道来完成运输任务的。

同理,我们也设计了几个个角色:一个是轨道(跑道)、一个是调度(塔台)、一个是弹幕(飞机),我们为每个角色设计一个类分为为Track、Main、Bullet。

* 轨道
            
       轨道这个角色很重要,它可以解决弹幕位置计算、速度控制、碰撞检测问题。
       首先,我们要来初始化轨道。通俗的说我们要修建几个跑道呢,我们不是实物,可以动态调整轨道的                        数量,计算的原则:
        轨道数量 = 播放器有效高度 / 设备基准字号
    * 播放器有效高度:播放器的实际高度减去控制条的高度,因为弹幕不可以遮挡控制条。
    * 设备基准字号:移动端是10px,pc端是12px;
        为啥计算公式是这样的?因为我们要支持不同字号的弹幕。试想不同的字号对物理空间的占用是不同的,然而如果要求轨道的尺寸是动态的,那就带来很复杂的计算。本文提出“虚拟轨道”的概念,在交通管制中最常见的就是道路合并或者改向。我们也是采用将相邻的物理轨道临时合并为一条轨道。这样就可以轻松的解决不同字号的轨道占用问题。原理图如下:
        

图2.2 轨道计算示意图

其次我们来回忆下机场的工作流程:
1. 机长呼叫塔台,CZ6132请求起飞
    * 目前跑道均被占用,请等待
        * N时刻后再次执行步骤1
    * 目前跑道 A1 空闲,准许进入
        * 执行步骤3
2. 塔台查看跑道使用情况
3. 进入跑道,起飞完成
4. 机长通知塔台,本次起飞完成,释放跑道的占用
5. 其他飞机同样执行上述步骤

按照这个思路,我们的弹幕工作流程:
    
1. 弹幕进入播放器
2. 轨道根据弹幕的播放速度、尺寸计算是否有合适的轨道提供
    * 没有
        * 通知弹幕尚无合适轨道提供,请等待;同时,弹幕队列中的其他弹幕依次执行步骤1
    * 有
        * 执行步骤3
3. 播放器加载弹幕DOM,开始播放,待播放完成
4. 播放完成通知轨道更新轨道占用情况
5. 其他弹幕同样执行上述步骤

图2.3 轨道可用性计算示意图

 

关于轨道的基本原理我们整理清楚了,当然还有不少细节比如如何和调度通信、如何和弹幕通信以及虚拟轨道检测算法等。有兴趣的同学可以参考代码吧。https://github.com/bytedance/xgplayer/blob/master/packages/xgplayer/src/control/makeBullet.js

* 弹幕
       弹幕基本是实现“飞机”的角色,我们要求它具有自身的属性和方法。比如调度中心通过id能拿到它所有的基本信息,轨道控制也可以通过弹幕进行检查和更新。当然弹幕也必须具备状态自动更新、移动、播放结束通知、自动销毁等功能。
* 调度
        调度就是搭台的化身,承接着轨道、弹幕的控制,也保持着与播放器的步调一致。它的职责如下:
    1. 播放器交互控制
    2. 弹幕队列控制
    3. 自身状态更新
    4. 数据格式转换
    5. 动画执行
        还是直接用流程图来描述更直接些:
        
       

图2.4 弹幕运行机制流程图

在弹幕启动之后,首先要检查本地是否已有缓存数据,没有的话直接请求数据并缓存,然后执行数据读取,首次过滤数据进入弹幕队列,同时启动定时器。弹幕队列的数据会定期请求轨道,检测队列里的弹幕是否可以进入,一旦确认后轨道做好登记,弹幕就可以进入播放器开启动画播放了。定时器每隔2秒就会再次更新数据进入到弹幕队列(这块不同的业务可以定制不同的规则)。弹幕播放结束后会通知调度和轨道,调度会在弹幕队列中移除该弹幕实例,轨道也会移除该弹幕实例的轨道占用。

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


日历

链接

个人资料

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

存档