汉字是来自自然的语言，有着生动的内涵和规律，笔画的点转横折，勾勒并呼应品牌的内在魅力，在积累和沉淀的这些作品中，通过汉字的美学理念表述着品牌独特的形式风格，以上作品，一起来交流吧！
© 版权所有，未经允许不得私自使用！
感谢关注
贺冰凇视觉艺术
原文地址：站酷
作者：贺冰凇
转载请注明：学UI网》贺冰凇品牌汉字卷！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
根据不同内容进行视觉呈现，可以在不改变布局结构的前提下，带来差异化的感官体验。主题化设计就是在背景层和元素层进行视觉发挥，不改变原生结构，被众多产品进行设计发挥。
比如优酷 APP 在视频播放页面，视频窗口下方区域会根据影视作品特征进行主题化设计。会在背景、图标、按钮和选择器等元素上面进行主题化设计，情感化的设计更能带给用户共鸣感，提高用户对产品的感官体验。
空状态的设计从生硬的文字提示延伸到情感化的表达，运用更加视觉感的形式带给用户良好的感官体验。
最近在体验酷狗音乐时，初次进入播放页无歌曲时，采用黑胶 CD 作为空状态展示。当用户操作分享时则会以精美的配图来强化空状态，带给用户反馈的同时，也提高了播放页的视觉感。情感化的设计更能与用户产生共鸣，增加用户对产品的好感度。
用户在进行功能操作时，除了底层需求层面的反馈以外，反馈设计的视觉感也是至关重要的。好的设计可以加强用户对产品的好感度，让功能操作也能赏心悦目。
最近使用荔枝 APP 进行录音时，轻拟物的录音机设计印象深刻。在录音过程中磁带进行动效转动，带来场景化的真实感体验，停止录音时也会停止转动，动态的及时反馈提高用户使用体验。轻拟物动态设计不仅强化了视觉感，动态及时反馈也是非常不错的设计表达。
产品的流量区域属于众多功能争相曝光的区域，在这个方寸之间的设计发挥，体现出了设计师的能力。如何将有限的资源发挥到极致，带给用户更多的功能体验，需要产品设计师多在交互层面探索。
最近在使用酷狗音乐听歌时，底部标签栏上方的播放状态区域给用户提供了播放/暂停和切歌等操作，可以左右滑动来进行延伸功能切换。用户可以选择默认状态进行歌曲之间的操作，也可以向右滑动以显示歌词为主，方便用户在听歌时观看歌词。在方寸之间通过滑动交互承载了多重功能，满足用户更多操作体验，提高用户对产品的使用体验。
针对一些重点功能的按钮设计，在按钮造型、配色、图标风格、微动效等方面都在不断强化，以此来提高功能的关注度。
荔枝 APP 在录音模块中，为了突出录音按钮的存在感，结合了动态 IP 来进行强化。IP 形象从右下角出现与消失的动态效果，提高了录音按钮的关注度，俏皮可爱的形象也增加了设计的趣味性。
产品除了在使用体验层面不断优化以外，主要还是需要传递服务价值。服务的升级可以提高用户的认同感，情感化的设计可以辅助服务的可视化呈现。
自如在“家福卡”模块中，顶部视觉区域通过动态礼仪进行升温设计。每次进入都会有人偶形象打招呼，显得非常懂礼貌，使得用户感受到被尊重，提高了亲和力。通过动态形象进行礼仪表达，不仅提高了栏目的关注度，也让用户感受到这是一款有温度的产品。
用户反馈是打造优质产品的关键，如何提高用户反馈的意愿至关重要，设计师都在不断的思考和尝试。
自如 APP 在采集用户反馈时，设计了底部弹出的形式，询问用户是否愿意推荐自如。从绝不到强推设置了 0-10 分，当用户选择 9 分或以上时直接提交，低于 9 分可以描述原因。相对于比较隐藏式的用户反馈设计，这种打分制的形式用户操作更加便利，不会占用过多时间，用户参与的意愿也会更高。
注册应该算是用户比较排斥的操作，但也是不得而为之的事情。通过情感化的设计降低用户的排斥感，在趣味体验的环境中完成注册，可以带给用户更好的使用体验。
最右 APP 在注册时，进入注册界面 IP 形象以打招呼的形式出现，当用户输入密码时则会双手蒙住眼睛。IP 情感化设计带来了更多趣味性表达，以此推动了更加人性化的设计体验。
分类设计采用纯文字的表达显得比较单一，也有一些产品会结合图标或者图形设计进行装饰，以此来强化关注度和视觉感。
最近在使用肯德基 APP 点餐时，发现纵轴导航的分类设计结合了品类图标，提高了浏览辨识度。运用图标来强化可视化设计，提高用户点餐时对于品类的辨识度，也能强化当前栏目和默认品类的差异。小小的改变不仅优化了视觉感，也能带给用户更好的感官体验。
对于运动类产品来说，运动后的数据展示对于普通用户而言显得比较生硬，理解度来说不够直观。可视化的设计提供了更好的解决方案，看图比看文字更直观易懂。
One More 提供了简洁直观的训练数据预览，通过可视化的形式展示训练后增强的肌肉部位，以及通过肌肉颜色变化体现训练的强度。通过人体结构结合训练强度进行可视化表达，不仅可以提高用户查看训练数据的关注度，也能提高数据的理解度，增强用户使用产品的体验度。
个性化设计可以满足不同用户的使用需求，也能体现出产品的差异化服务。提高设计的差异，带给用户更加人性化的体验至关重要，无论是感官体验层面还是功能操作层面，只有带来不一样的体验才能提高用户的黏性，增加用户对产品的好感度。
今天给大家分享的这 10 个优秀案例，希望可以开启大家的设计新思路，在常规解决方案的基础上延伸出不一样的设计创新。
原文地址：黑马家族（公众号）
作者：黑马青年
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
又到了一年一度的龙虾季，龙虾最好吃的时候是6月、7月、8月，这三个月是龙虾长得最为强壮，个头大，肉质丰满，也是最好吃的时候，码字的时候想想这肉感口水都快流出键盘了，我先去舔下吃完龙虾的餐盘先。
没有一只龙虾能活着离开厨房，同时也没能逃过设计师的鼠标和创意之手。接下来就带大家分享关于龙虾类型的设计，滑到最后有彩蛋哦！
、
看了这么多不仅是嘴馋，作为设计师的你们是不是手痒也想自己用龙虾创作一把，于是我在吃完龙虾后，拍了下面的这个场景。
突然想到国内《神话》电影中成龙有一场类似的场景，于是与《权利的游戏》海报中的风格结合下，虽然画风有点暗黑。
但是如果从小龙虾的角度来看，这几个月对它们来说是个灾难，这也是作为龙虾最后的倔强。
虽然一想龙虾挺惨，但作为国人夏季夜宵时必备的龙虾，实在控制不住十三香、蒜泥、冰镇、蛋黄各种口味刺激食欲的味蕾，吃货的本性再次打败了刚刚对龙虾稍有些留存的感性
原文地址：修先森撩设计（公众号）
作者：修先森
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
2020 年 9 月上线，大概用了一年的时间，在核心功能上就已经与 Figma 对齐，而在这一年半里，他们还做到了很多不同且明显有考量国内用户习惯的特色功能，下面，就挑几个我比较感兴趣的点展开聊一下。
轻松管理素材、实现高效复用
有 Figma 在先，做资源社区已经成了在线设计工具的标配，而「即时设计」从一开始，就额外给出了一种与众不同的资源形式——资源库，用于提高组件库、图标、插画等素材的复用性。
与其他工具「选好资源——创建副本至工作台——打开文件复制所需元素」的流程不同，资源库类型的资源，只需一键「引用」，即可将对应资源保存至进编辑页面左下角的「资源库」，然后做设计时可以一键拖拽复用。
同时，资源库的内容会和广场上公开的资源保持同步，发布者新增、修改、删除内容，引用者都可以实时更新，虽然暂时只允许官方发布资源库，但实用价值可见一斑。
另外，即时设计的资源库不仅能保存广场中的设计资源，还可以把编辑区域所有可见内容，包括个人收集的常用图片素材等，一键上传并保存，在任何一台电脑上登录账号就能随时使用，相当于给了你一个不限容量且所见即所得的设计云盘。
比起像 Figma 一样平铺展示所有文件的“粗放模式”和团队的一级项目管理，即时设计增加了可以自由嵌套，不限制层级的文件夹管理功能，同时，还适配了拖拽和列表移动的操作。
而对于单个文件的管理，即时设计也根据国内用户习惯进行了优化，通过「跟进文件」，可以将你自己近期需要处理的文件专门整理到「正在跟进」页面，快速查看。
针对团队的协作需求，即时设计还做了一个「文件状态标签」，可以给文件打上自定义的标签内容，比如进行中、评审中、已完成，既能直观了解项目情况，又能进行筛选，有效地提升了团队用户对接效率。
从这些点里，相信大家都能能看得出，即时设计团队对一些细节需求的洞察能力，而且在很多方面都做了足够多的思考。
导入 Figma、Sketch、XD，导出 Sketch
为了满足设计师的迁移需求，即时设计支持了 Figma、Sketch、XD 三种主流文件格式的导入，同时，它还是最早支持 Sketch 导出的设计工具。
除了上面提到的，还有很多能看出有特别考量的功能，可以一键导入个人字体包的云端字体库，可以远程预览设计稿并打点评论的手机 App、微信小程序，自定义多彩主题……
虽然插件市场还没开放，但也有了不少吸引人的第三方合作插件，比如「字由」、iconfont、IconPark 等等，都是在 Figma 里不曾有过的体验。
创新能力，我们自然是有的，而且还很足，国内不管是庞大的用户基数，还是独特的软件环境，也都会让我们的国产工具得到更加特别的发展。
本土工具的自主研发之路还很长，但「即时设计」无疑是开了一个好头，而且步子迈得昂首挺胸，我也相信，他们有能力，之后给出更多的惊喜，支持国产，不妨一起期待一下~
即时设计：https://js.design
原文地址：功夫体验设计（公众号）
作者：彩云Sky
转载请注明：学UI网》为什么说是时候选择这个工具了
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在产品设计中动效很常见，一个好的动效方案在提升用户视觉和心境体验的同时，还的的确确解决了很多其他设计问题。
好的动效设计总是在比拟现实，所以当我们思考为页面添加动效时，不应该感性的随心所欲的发挥自己的创意激情，而应该像科学一样，有一些基本的方法原则指导来我们，以此提升动效可用性。
今天主要分享一下在数字产品中动态设计的13个基本原则，希望对大家有所帮助。
▍缓动 ․
现实世界中绝大多数物体都不会突然运动，再保持匀速，最后突然停止（机械类运动除外）。而是缓慢加速或缓慢减速，这就是缓动。
缓动几乎适用于产品中任何元素的出现或离开、以及部分图数据加载等。
滑动内容
图表加载
在加载信息时，我们可以对信息归类分组，并按顺序依次延迟内容出场时间。这就是延迟与偏移，可以清晰的表达内容之间的关系。
在二维平面，如果信息很多，为了避免信息过载，我们可以将不重要的信息，或负面操作放置在前景内容后面，这就是叠加。用来模拟现实纸张叠放，创建出二维平面中的前后空间感。
当我们点击某个内容时，我们通过改变内容中某个主要元素（用于视觉引导的过渡元素）的轮廓并移动，这样可以将用户自然的带入下级页面，这就是蒙版。通过保留过渡元素的识别性，创建出无缝过渡，降低用户跳转页面时可能产生的迷失感。
现实世界大多数物体运动轨迹都是弧线，所以当位于角落的元素移动时，我们调整运动轨迹呈弧线，可以让元素运动更加流畅自然，这就是弧型。
注意：下面案例中元素上移是从左下往右上的弧线，但回来不是原轨迹返回，而是将弧线对称反转（类似抛物线），从右上往左下。
如果一个主要操作中包含其他操作，在用户与其互动时我们可以直接将元素分离出来，这就是克隆。再通过模拟现实世界中液体分离，可以清晰的表达出内容的包含关系。这类设计常见于底部的舵式导航按钮，点击后出现一系列功能图标。
将两个元素的属性进行关联，通过影响其中一个元素的属性，去影响另一个元素，这就是父子级绑定。给两个元素创建了一个隐形的传动轴，呈现一种用户正与内容进行实时可控的互动方式。
下图是通过小圆圈的旋转属性影响中间数值。
当某个元素存在先后两种样式时，我们可以给元素路径设置动态，使其形状从起始状态逐渐变化到结束状态，这就是转换。从起点到终点的无缝过渡，清晰自然的表达出任务结束。
在一个二维空间中，一屏展示的内容有限，当触发另外一个二维空间时，为了减少页面跳转，我们借助中间层并降低不透明度，或把背景模糊，这样可以将它们同时放在一起展示，这就是遮罩。帮助我们理解当前空间与原本空间之间的关系。
当看二维平面有些乏味的时，我们可以给页面赋予三维空间的深度，像真实世界的物体有厚度一样，用来表达该页面存在其他可以互动的侧面。这就是多维度，解决原本二维平面没有深度的问题，也带来更强的位置感。
线上产品中：
【哔哩哔哩】有做下图中类似的3D页面翻转效果（我一时忘记在哪个模块，有知道的同学可以留言告诉我，谢谢）。
【红板报】有做翻页效果，感兴趣的同学可以去看下。
金融和运动类产品中数字很常见，每次加载数字时，我们可以赋予数字动态变化，这就是数值变化。作用不仅仅是传达出数字的动态性质，更重要的是强化数字与用户的绑定关系（类似上秤后上涨的数字告诉你又“强壮”了。嗯？继续努力），让用户更加积极的维护数据变化。
界面中元素的运动速度并不是始终一致，当有多个元素时，为了建立良好的层次结构，我们可以让重要的可交互的元素运动速度更快，非交互元素运动速度更慢。（也可以根据设计目标反过来处理）这就是视差，将用户视线引导到可交互元素上，同时让非交互元素保持动态一致性。
页面中，我们始终在处理内容的展示与空间转换，为了能看到更多内容细节，我们让内容支持缩放来模拟相机变焦。为了能体现内容与内容在空间上的关系，我们模拟摄像机推进和拉远，这就是缩放与推拉，带来了更多的深度与空间体验以及无缝转换。
缩放
推拉
原则用于参照，在理解原则的基础上去打破。这样，动态设计将给我们带来了更多可能性。
尽管一些效果在当下实现上任然有着较高的成本，但相信随着技术的发展，在将来的产品设计中会看到越来越多让我们惊艳的设计解决方案，只是在这个过程中还需要我们共同努力鸭！
参考文献：
https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
作者：幺零三
转载请注明：学UI网》UI动效设计原则
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
即把视觉主体做成玻璃质感或者是琉璃质感，并且在排版的时候，通常会把主体压在文字上，通过透明的材质使文字发生折射，创造出强烈的视觉反差。
酸性设计是一种结合了金属质感、镭色渐变、达达主义、机能素材等特性的设计风格，在视觉上会有一种“酸”的感觉。
有很多设计会把这种不锈钢质感的风格统统归结为酸性风，其实我觉得二者的差别还是挺大的，首先，这种不锈钢质感的颜色是黑白灰的，而不是彩色渐变；其次，整个海报的主色调通常也是黑白灰，视觉效果会低调、简约一些，并没有“酸”的感觉。
因电影《蜘蛛侠之平行宇宙》的系列海报，荧光风也火了起来，画风类似街头涂鸦，并采用饱和度极高的对比色搭配，会有一种刺眼、眩晕的感觉，但视觉冲击力确实强，而且很酷、很潮。
弥散渐变是一种通过模糊效果塑造的渐变效果，看上去像似水墨晕开的感觉，而且通常会加上一点杂色质感，使用这种渐变效果来绘制一些简单的插画，有一种清晰、时尚的感觉，常用于食品海报中。
即通过简单的几何图形来绘制纯二维的插画，效果简单而抽象，这种风格一直都是设计师的宠儿，所以并不是最近才开始流行的，但是RGB色彩的使用可以让画面更加具有视觉冲击力，再配合灵活的描边和排版处理，这种风格也变得越来越现代、时尚。
这个备受争议的设计风格，喜欢使用很大胆、很刺眼的配色风格，比如玫红色配绿色，插画很随意，类似小孩的画作，在排版和构图上也很不严谨，完全不符合传统优秀设计的定义，故被称为新丑风，在商业设计中要慎用。
这类设计通常以文字为主，没有图片元素，把主要的文字通过3Ｄ贴图或者扭曲的方式，使其呈现出三维的视觉效果，这与文字通常呈现出来的状态完全不同，所以视觉冲击力也很强。
3Ｄ的世界是最接近真实的世界，所以3Ｄ是大的趋势，而如果把3Ｄ和富有想象力的插画结合起来，那么效果会更加的惊艳和震撼。
在3Ｄ的基础上继续深化就是3Ｄ动效，被经常用在电商设计、线上海报设计和网页设计中。
画面中的图形也是简单的几何图形，但质感通常是用渐变工具做出的、比较粗暴的金属效果，再加上复古的配合和杂色质感，看上去很像上个世纪的海报。
即把早期的电脑、电子设备出现故障所呈现出来的画面和效果，融入到设计当中，通常也会结合蒙太奇手法（拼贴风）使用，常用于艺术设计中。
机能风也不是这两年才出现的，但最近也很火，画面的氛围比较科幻，通常以机器人或者被机械加工过的人物作为视觉主体，标题字体一般会用简洁、硬朗的无衬线体。另外，类似电路板造型的界面框也是机能风常用的设计元素。
– over –
转载请注明：学UI网》13种当下正火的设计风格，潮爆了！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
删除逻辑是怎样的？
无法找回：是否需要二次确认设计、以及展示删除后结果）
可以找回：是否需要展示如何找回的说明？
删除对象：
是单个、批量还是全部？
删除方式：
手动删除：点击删除还是滑动删除？
自动删除：何时开始？是否展示剩余的时间
删除状态：
包删除成功提示、删除失败提示、删除过久的提示
数据的处理是怎样的？
信息/逻辑是否会发什么变化、是否自动保存进度/记录、是否影响后续链路里的逻辑处理
中断方式：有意、无意中断的处理都是怎样的？
中断程度：后台继续运行还是彻底退出后台？
软/硬件变化时的处理：
包括耳机的连接与切断、电话的来电与挂断、网络的中断与恢复
显示是否有边界值？
包括最小值、最大值、到达特定阈值
显示是否有时效性？
内容过期时怎么显示？到达某个阈值时怎么显示？内容不存在的显示？
其他考虑点：
· 显示格式：如日期时间的数据格式：2022.05.01 2022-05-01
· 显示分辨率：各种分辨率下如何显示，最大，最小考虑极致情况
· 显示样式：是否对齐组件？需要统一？是否有差异化设计
加载前中后该如何显示？
包括默认状态的显示、初始状态的显示、加载中的显示、加载过长的显示、加载成功的显示、加载失败的显示、加载为空的显示等等。
加载方式：
手动加载还是自动加载？优先加载哪些内容（文本或图片）？
加载范围：
展示数量是多少？一次性全量展示还是分页加载展示？
push机制：
推送内容说明、全量用户还是局部用户、推送的时间/周期/次数等都是怎样的？
push交互：
跳转：原页面删除、无法进入、push过期时该如何处理？
返回：返回到哪里？
· 当期操作进度、记录是否保存？
· 是否需要展示退出说明、原因？
· 退出程度：
是当前页面、某段流程、退出后台运行、杀死后台、还是手机关机？
· 默认排序是怎样的？正序还是倒序？哪个选项优先
· 排序维度是怎样的？按时间/销量/质量/数量/评分/信用等等排序
· 是手动刷新：如下拉刷新、点击刷新
· 还是自动刷新：何时开始刷新？是否提前告知用户？是否提前自动保存操作记录
· 缓存机制是怎样的？包括缓存对象、数量、范围
· 缓存位置是哪？手机本地、服务端
· 缓存的清理是怎样的？自动清除还是手动清除
好了，以上就是一些常见的交互机制，希望你在输出交互方案、产品为文档时有所帮助，避免漏掉一些内容，减少和开发的相爱相杀。
原文地址：和出此严（公众号）
作者：和出此严
转载请注明：学UI网》了解这9种交互机制，不怕跟开发相爱相杀了~
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
1.1音乐故事
我大概2011年左右了解到网络上有一种音乐概念叫“古风”，用到了很多民族、东方古典、戏曲元素，创作人员大部分都是业余音乐爱好者或者音乐专业学生，在acg论坛、贴吧、微博、分贝网、yyfc、5sing发布作品和交流。后来有一定影响力的创作团队开始举办线下演出，古风圈开始吸引更多年轻人 。2018年在北京召开中国国风音乐发展研讨会，包括古风圈的墨明棋妙等。国风音乐有更多的可能性，那么它是如何制作出来呢？
1.2音乐制作流程
音乐制作从盈利性上分为商业音乐制作和非商业音乐制作，区别在于商业音乐的制作目标之一为盈利；非商业音乐不用做商业用途，制作目标因人而异。
制作流程如下：
1）策划和制作人有区别，制作人除了完成策划的内容，音乐素养更高，会在制作上提出更有建设性的修改意见。策划更多情况下只负责确定制作人员和项目进度跟进。
2）作曲、作词、编曲的先后顺序根据制作人员不同会改变，内部达成共识即可。
3）乐器实录指在录音室录制乐器音轨，非必须环节。如果不选择实录表现，则用音源代替。4）编曲给出的分轨文件就是由音源表现。
5）和声的编写有时是作曲、编曲负责，有时也由歌手发挥，顺序不一定排在主旋律录制后。
6）混音如果涉及同张专辑的多首歌曲，需要母带师介入完成整体调整。
1.3用户群体
独立音乐人：包括在校音乐专业学生或者已工作的业余音乐创作者。希望通过音乐表达自我，记录生活，结识朋友，提高演奏及创作能力，因此带有弱社交目的。
音乐团体：社团、乐队、团队、工作室、制作组。
音乐制作委托方：有制作适合自身音乐的需求，包括策划、导演、制片、制作人等。
2. 痛点及情境
2.1痛点
从制作音乐的契机分为自发制作和委托制作，其中涉及到几个角色：自发制作者、委托方、受托方。
自发制作者（音乐人）：
1）音乐人之间缺少了解，难以构建信赖关系
2）很难找到相似风格的音乐人互相交流
3）想找能长久合作做音乐的朋友或团队
自发制作者（乐队/社团）：
1）想找能长久做音乐的拍档
委托方（企划负责人/比赛举办方）：
1）企划对音乐人的特化需求（对风格、完成度的需求）
2）比赛的题材限制，音乐人工种的筛选
受托方（音乐人/团队/工作室）：
1）受托方对素材的特化需求（对风格、题材的需求）
2）受托方对企划的信任从何建立（对企划介绍、企划进度、作品数量、作品质量的需求）
2.2使用情境
一名在校大学生Y在为自己导演的短片寻找合适的配乐，因为周围没有音乐学院，班上同学也没有这类技能，她找到了国风音乐圈这个APP，通过搜索风格缩小范围，随手点进一个音乐人主页去翻阅他的作品和参与过的企划，通过企划推荐又找到了其他的音乐人及团队。Y创建了自己的企划，填写短片的介绍，上传样片。
3.竞品分析
3.1竞品优缺点
分析5sing音乐人&腾讯音乐人&豆瓣音乐人&网易音乐人。
优点：
1）经营时间久，积累了很多小众音乐人；
2）音乐更新频率高；
3）有比较多的消音伴奏；
4）有beat（一种音乐素材）交易、词曲交易。
缺点：
1）对某些工种分类缺失，导致相应工种曝光度很低，合作时不能第一时间建立信赖关系；
2）最近web端增加了音乐身份筛选，但依旧有些混乱，听众不适合放在音乐人中筛选，编曲和制作人有相似度，但职能完全不同；
3）在申请入驻时，无法选择多个流派。
优点：
1）下属音乐平台多，可以搜索到很多作品；
2）有词曲出售。
缺点：
1）没有促成音乐制作工种间合作的功能（不清楚入驻后是否有该功能）。
优点：
1）音乐风格分类很广泛；
2）根据听众关注列表来推荐，能帮助相近喜好的听众找到感兴趣的音乐人。
缺点：
1）部分音乐人自定义的页面布局板块混乱；
2）没有音乐人间交流合作的功能。
优点：
1）网易会推出一些音乐策划项目，促成创作者间合作；
2）网易云音乐个性化推荐增加音乐人曝光度；
3）有创作者社区；
4）有beat、词曲交易。
缺点：
1）对身份的分类太少，只有制作人、作词、作曲、编曲、演唱。
3.2总结
几个平台对音乐人来说，都没能给出一条流畅的制作链，音乐人签署授权协议后，和平台的联系变强，但和合作者的联系几乎就和听众与之的距离差不多。音乐人有向部分人展示demo或beat的需求，还无法满足。有平台促成社区，效果待观察。
4.流程及功能
4.1流程
根据第2部分的情境分析出流程如下：
选择合作者流程
4.2功能结构
寻找合作者功能结构
5.页面展示
故事的开篇：开始寻找合作者
5.1招募
若已有合作者，可在创建企划/团体时添加成员。发起人有修改企划信息的权限，可以转让企划或退出企划，若发起人未转让直接退出，则企划结束，所有成员都会看到该结束状态。流派风格可以多选，在主页最多展示5项。
招募有时限，可以避免太多废弃招募占据招募首页。创建完成后，可以添加已有的合作者为企划成员。发起人可以选择企划来发布招募。
动效说明：这里展示的是策划（制作人）点击+号进入创建企划页面的过程。文字出现时配合图标的弹性变化，微微下沉再恢复。切换页面时速度曲线为渐缓。
动效说明：这里展示的是添加已有成员进企划名单。选择工种。选项框展开有弹性变化。选项拉到底时，会有位置偏移再回弹。选好以后的工种滚动入场。
5.2搜索
音乐人搜索的需求包括按个人、按团体、按作品、按企划。根据音乐制作的流程，得到对个人的筛选条件最主要为工种。按作品筛选的下级筛选条件是流派风格。按企划筛选的下级筛选条件是题材。按团体筛选的下级筛选条件是流派风格、题材。
5.3标签和身份
标签在搜索、主页展示、作品展示都有着视觉分流的作用。该应用中涉及到的标签包括：流派风格、工种 、题材。
流派风格标签
用户身份按结构分为个人和团体，按需求分为委托方和受托方。
按结构分，个人：策划/制作人/监制、作词、作曲、编曲、歌手、乐器演奏、混音/母带、画师、视觉设计、PV师；团体：乐队、工作室/团队、比赛举办方。个人身份间可以多选组合。团体身份不可和个人身份多选组合。
按需求分，委托方：策划/制作人/监制、比赛举办方；受托方：作词、作曲、编曲、歌手、乐器演奏、混音/母带、画师、视觉设计、PV师、乐队、工作室/团队。
结合两个维度，得到4种身份类型：个人委托方、团体委托方、个人受托方、团体受托方。
以下是关于身份的几点考虑：
画师/视觉设计/PV师
狭义的音乐制作本身不包括宣传（如封面设计、海报设计、PV/MV制作），所以画师、视觉设计、PV师等工种视具体情况会删减。
乐队
考虑到组建乐队主要为乐器演奏者和歌手兼任作词、作曲、编曲，所以在团体中把乐队单独列出来的，权限和工作室、团队一样。
音乐听众
一开始整理用户身份的时候，对音乐听众这个身份的取舍思考过。保留的原因是这个应用主要面向音乐制作人员，但音乐制作也是一个交流的过程，不单与音乐专业人士，与听众的交流也是必不可少的。去掉的原因是听众这个身份的门槛较低，如果在用户中占比过多，就失去了做音乐制作交流平台的意义。
工种标签
身份与工种的关系：身份有时对应一个工种，有时对应多个工种形成的集合。如身份A->策划，身份B->作曲/编曲/混音。
题材标签
5.4主页
除了用户主页，企划也有主页。在企划主页的简介中，会展示企划的父子级关系图，帮助音乐人了解该企划的发展。企划关系由发起人编辑。音乐人也可通过查看推荐的相似企划寻找感兴趣的项目。在个人主页还会推荐相似的音乐人、相关企划，团体主页推荐相关音乐人（团体成员）、相似团体团体和相关企划。
动效说明：以选择的企划的头像和名称作为转场衔接。招募列表数据项快速退场。企划主页作品列表快速入场。加关注按钮在卡片信息完整出现后再入场，提示用户可以关注该企划。
6.总结
作为系列的第一篇，介绍了国风音乐圈的项目背景、用户群体，针对用户分析其痛点并描述出寻找合作者的使用情境。以音乐人制作交流圈为切入点，分析相关竞品。有了参考后给出流程和功能结构图。从寻找合作者开始讲起，展示招募模块及涉及的设计点。
原文地址：黑马家族（公众号）
作者：黑马青年
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
业务背景
以我们 CCO 体验设计团队为例，主要服务阿里体系的消费者、商家、经济体等业务领域。随着业务不断扩大、用户角色多、体验复杂、设计师人力有限、定制化需求不断增加，设计面临严峻挑战。
1、业务多：30多个产品应用
2、角色多：覆盖消费者、客服小二、服务管理、业务运营、中台管理、客户 6大类用户群体。
3、体验复杂：设计师需兼顾用户和客户两个视角。
从组织上，85% 设计师纵向支撑业务，15% 设计师横向做标准化，反哺业务设计师。标准化实质解决的问题是保障基础体验一致性。
标准化怎么做
核心通过页面梳理、抽象、分发、衡量，保障基础体验一致性。
案例实战
以数据可视化场景为例，讲述如何做标准化。
1、业务现状
共有11个应用，涉及89个页面。
2、问题
体验不一致：各个工作台页面架构、组件、样式野蛮生长，缺少规范导致体验不统一。
低效：部分场景缺失，组件重复建设，大量定制；沟通协同内耗大，成本高。
3、策略
体验统一：框架、组件、样式。
提效：代码化、工具、交付机制。
4、体验统一
包括框架、组件、样式。
框架
(1) 现有页面收集
(2) 用户场景分析
(3) 页面归类
结合用户看数内容（例：概览、分析、详情）和交互形态（例：平铺、下钻），对页面进行归类。
(4) 确定典型布局
通过统计高频复用形态，确定典型布局。
组件
(1) 页面结构分析
组件的收敛，需要先对页面分析，确定模块层内容。例：模块包含页头、筛选、图表、表格。
(2) 模块层分类
横向收集全部业务，将模块层分类。细分模块扩展形态，放到对应的篓子里。
(3) 模块专项治理
接下来，需要对每一个模块进行专项治理。比如图表模块，再拆再抽象成指标、图表、单选、多选 4类场景。场景里再对主体和变体（也就是扩展形态）分类。
样式
(1) 确定优化内容
围绕视觉凌乱，要做的便是完善设计语言。设计师需要结合自身技术底层，补充缺失规范。例如布局、色板、字体、动效。
(2) 确定组件范围
通过统计高频复用组件，确定需要梳理的组件范围。
(3) 布局
图例位置：线上有9种，通过从业务场景按阅读顺序划分，最终收敛成2种。
组件高度：真实线上情况，只能看2个指标，高度规范缺失。
需要根据用户分辨率调研，提炼典型分辨率。比如用户是win系统，包含菜单栏、任务栏等默认高度，再减去本身页面页头等默认高度，得到 3 档。确定组件建议默认行高 240px。
轴标签旋转角度：现状有顺/逆时针两种，通过分析标签类型，结合阅读顺序、轴与标签亲密度，确定默认角度为顺时针。
(4) 色板
通过场景梳理，确定不同组件使用的色板类型及缺失色板。
补充语义色板：从业务里抽象2类场景，指标和柱/饼/环场景，定义颜色。例如带正面语义，用绿色，比如升、已到岗、正常。带负面语义，用红色，比如降、旷工、失败。
(5) 字体
结合自身业务场景问题，从场景、版权、风格、识别、极值共5个维度选择字体。
举例场景一，纵向数据场景里，将市面上数据竞品用到的字体都横向铺开尝试，做排除法。比如din没版权，苹方非等宽字体，普惠102识别性弱。
举例场景二，在核心数据呈现中，helvetica 品牌风格弱，普惠在1亿以上极值过宽。
最终我们根据自身业务场景特征，用普惠和普惠102，运用在对应场景里。并同前端提炼规则。
(6) 动效
首先，需要确定动效价值，明确动效需要解决的问题。这里围绕舒适度、活力、层级、反馈来讲。
通过动效场景链路分析，确定优化范围。
加载动效：围绕让用户认知过程更为自然。通过组件横向梳理、抽象图形、组合样式的思路，输出方案。比如这里共梳理17种组件类型，抽象成9类，包括点、线、面、饼、环、柱、文本、图标、词云，再进行组合产出方案。
出场动效：通过业务分析、提炼场景、优化效果。比如这里共提炼 3类场景，有通用、监控、舆情。围绕过渡不自然、卡顿、缺少情感化表达来优化效果。
浏览动效：通过提炼场景，来强化元素之间的层级与空间关系。比如单个组件、联动、下钻场景下，围绕点击感知弱、重点不突出、缺少悬停态来优化效果。
沉淀速度参数：将优化动效场景的速度参数，同前端约定规则沉淀组件库。
5、提效
包含代码化提效、工具提效、机制提效。
整体思路
从设计组内到技术产研的提效过程。
提效面向用户依次是：组件设计师、业务设计师、前端、产品。
搭建目前还在进行中，这里主要从交付-工具-代码化来分析。
交付内容
1、业务设计师：sketch/figma物料 (样式、组件、区块、模板、规则 )
2、业务设计师：kitchen工具（样式、组件、区块、模板）
3、组件工程师：组件规范/组件官网
交付机制
新需求：通过评估复用性、抽象、内审、沉淀物料。
现有业务：通过页面梳理归类、抽象、内审、沉淀物料。
6、衡量
从物理到行为层，包括样式、组件、框架、组件交互 共4个维度。通过一致性评分衡量标准化覆盖的好坏。
总结
回归课程，在B类业务里，服务多个产品、多用户角色、体验复杂的场景下，在定制化+标准化团队阵型里，标准化实质解决的问题是保障60分基础体验一致性。
总结：B端体验标准化包括物料的产出、交付以及衡量标准。
产出：包括框架、组件、样式的收敛来梳理、抽象页面。
交付：面向2类用户群体，业务设计，需交付物料和工具。组件工程师，代码化需提供组件规范，组件线上化需助力组件官网的建设。
衡量：一致性评分包括样式、组件、框架及组件交互。
原文地址：AlibabaDesign（公众号）
作者：CCO 设计
转载请注明：学UI网》如何做B端体验标准化：以数据可视化场景为例
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
最近几年以来，大家能看到B端设计趋势已经越来越火热，在B端设计中关于图表的设计算是为数不多的视觉发挥点了。那么怎样才能做好图表设计，让设计出来的图表高大上，符合业务需求，让业务方和总监对你赞不绝口，本文就必须看完和收藏了，因为实在是太实用！
应用设计越来越依赖数据驱动，对高质量的数据可视化需求也越来越高。然而我们身边却充斥着令人困惑和误导的数据图表，但我们其实可以通过遵循一些简单的规则来改变这个情况。
选择错误的图表类型，或默认为最常见的数据可视化类型，可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容，可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。
当使用水平条时，在基线的左侧绘制负值，在右侧绘制正值。不要在基线的同一侧绘制负值和正值。
删数据起点会导致曲解。在下面的例子中，看左边的图表可以很快的得出结论，值B比D大3倍多，而实际上，两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。
对于折线图，总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势，因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。
折线图是由线连接的“标记”组成，通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的，并且对于较短的时间间隔非常有效，但当数据更新不频繁时，这可能会导致混淆。
例如: 使用折线图来代表年度收入，如果数据是每月更新的，则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值，而在特定时间实际的收入数字是未知的，所以可能会产生误会。在这种情况下，使用垂直条形图可能是一个更好的选择。
平滑的折线图可能在视觉上很好看，但它们错误地反映了背后的实际数据，而且过粗的线会模糊真正的“标记”位置。
通常，为了节省可视化空间，当有两个具有相同度量但大小不同的数据系列时，可能倾向于使用双轴图。但这些图表不仅难以阅读，而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例，只是浏览图表，然后就得出了错误的结论。
饼状图是最流行的也是经常被误用的图表之一。在大多数情况下，条形图是更好的选择。但如果你决定做一个饼状图，有2个比较好的建议:
1）不要超过5-7片，保持简单
2）可以将额外的最小段分组到“其他”切片
如果没有适当的标签，无论你的图表有多好，它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。
将数据放在切片上可能会导致多个问题，在可读性问题上和窄切片上都会有挑战。相反，添加黑色标签能清晰的链接到每个部分。
在确定饼片秩序时，有几种常用的方法:
1）将最大的切片放在12点的位置，然后将下一片切片顺时针降序排列
2）把最大的切片放在12点的位置，第二大的放在顺时针相邻位置，第三大的放在11点的位置，其余的切片按顺时针降序排列
同样的建议也适用于其他许多图表。不要默认采用字母排序，将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图)，以确保最重要的数值占据最突出的空间，减少眼球运动和阅读图表所需的时间。
饼图通常不是最容易阅读的图，因为比较相似的值非常困难。当我们把中间部分去掉，创建一个圆圈图表时，我们腾出了空间来显示额外的信息，但这样牺牲了清晰度，极端情况下，图表就会变得毫无用处。
不必要的造型不仅会分散注意力，还可能导致对数据的误解和用户的错误印象。你应该避免:
1）3D元素，明暗面
2）阴影、渐变和其他扭曲的多彩色
3）斑马图案，过多的网格线
4）过度装饰，斜体，粗体或衬线字体
颜色是有效的数据可视化的组成部分，在设计时考虑以下3种颜色类型:一个定性调色板最适合显示分类变量。为确保易用性，所分配的颜色应该是不同的。连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合，可以创建一个连续的颜色集。
发散调色板是两个连续调色板的组合，中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。
看看一个方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以帮助你生成各种调色板。
根据美国国家眼科研究所(National Eye Institute)的数据，大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。
1）在调色板中使用不同的饱和度和亮度
2）把现有配色去色然后检查对比度和可读性。
确保排版能够准确传达信息，帮助用户专注于数据，而不是分散用户的注意力。
1）选择易读的字体，避免衬线和装饰过度的字体
2）避免使用斜体、粗体和全部大写
3）确保与背景有高对比度
4）不要旋转文字
这个简单的技巧将确保用户能够更有效地阅读图表，而不会扭伤他们的脖子。
如果你的任务是在web和移动项目中添加交互式图表，你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现，并能提供大量交互想法。
帮助用户通过改变参数，可视化数据进行探索。然后得出结论，最大化价值和洞察力。在下面的示例中，你可以看到IOS Health应用使用了各种数据表示的组合。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com