（图片来源于图虫创意）

1、了解你的用户

因为你的用户是最终评判用户界面好坏的人，所以用户即是你的终极目标，不了解用户需求，即使你的界面做得再好，也不是用户想要的产品。了解用户的需求是你开始做界面的前提，试着沉下心来仔细观察用户的喜好，并了解他们的技能水平和体验观察他们在界面中如何操作。不要迷恋于追逐设计趋势的更新，或是不断添加新的功能，始终记住，首要的任务是关注你的用户，这样才能创造出一个能让用户达成目标的界面。

2、重视UI模型

在软件中，用户的大部分时间都消耗在界面操作中，比如数据录入、数据修改、数据查阅等等，这点与浏览为主的网站类页面的用户操作是完全不同的，所以我们无需画蛇添足。用户希望在新创造的界面中看到那些已有的、相似功能的或遵循基本操作方式的软件界面，即可利用已成惯例的UI模型，使用户产生亲切感。

3、保持一致

用户需要知道一旦他们学会做某项操作，那么下次也同样可行。语言、布局和设计是需要保持一致性的几个界面元素。一致性的界面可以让用户对于如何操作有更好的理解，从而提升效率。

4、清晰的视觉层次

设计时，要让用户把注意力放在最重要的地方。每一个元素的尺寸、颜色还有位置，它们为理解界面共同指明了道路。清晰的层级关系将对降低外观的复杂性起到重要作用。

（图片来源于图虫创意）

5、提供反馈

界面要始终保持和用户的沟通，不管是他们的行为对错与否。随时提示用户的行为：状态更改、出现错误或者异常信息。视觉提示或是简单文字提醒都能告诉用户，他们的行为是否能够达到预期的结果。

6、容错机制

无论你的设计多么的清晰明了，用户都会犯错。你的界面应当允许并要为用户提供可以撤销行为的方式，并且对五花八门的输入数据尽量宽容（没人愿意只是因为填错了生日的格式而重头再来）。同样，如果用户的行为引起了一个错误，在恰当的时机运用信息显示什么行为是错误的，并确保用户明白如何防止这种错误的再次发生。

7、鼓励用户

一旦用户在完成了关键操作，可以通过弹出对话框等方式及时告知用户。值得注意的是，把一个复杂的流程任务分解为若干简单步骤，将会更显繁复和让人精力分散。所以无论正在执行的任务有多么复杂和漫长，在界面上要保持流程的不间断性。

8、语言有亲和力

所有的界面或多或少都有文字在其上，让文稿尽量口语化，而不是华美辞藻的堆砌。为行为提供清晰、简明的标签，保持简朴的文字叙述。。

9、保持简洁

最好的用户界面就是没有界面。优秀的软件界面中，你看不到华而不实的UI修饰，更看不到那些用不到的设计元素。所以当想着是否要在界面上加一个新功能或是新元素的时候，再思考一下：用户或者界面中真的需要这些么？为什么用户想要在这里当这个小巧的动态图标？是否只是因为出于自我喜好和页面的漂亮而去添加这些元素？优秀的UI工程师做出来的软件界面不会十分华丽，界面中没有任何分散用户注意力打搅用户操作的元素。甚至应该达到在用户使用系统的时候完全注意不到页面和操作复杂的问题，一切都应该是顺理成章的。

（图片来源于图虫创意）

文章来源：快资讯 作者：德方科技

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

                                                            

 

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

 

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

 西藏有一个六时书修行方法，确定要改进的一两个弱点（比如懒惰，拖延），每天分六个时辰反省自己（间隔两三个小时的样子），在每个时间段有好的，不好的念头或者行为都记下来反省总结，以便在下一个时间去调整）和鼓励自己。这个弱点改的差不多了，就继续下一个弱点作为目标去改正。读富兰克林的自传，他基本上也是用这种方法，但没有分每天六次这么细。

不同的阶段，临摹的目的不尽相同。一般来说，前期临摹更多的是练习软件、技法，后期练习别人的风格表达，综合运用。所以，我把临摹分为技法临摹、半原创到原创 3 个阶段，每一个阶段没有绝对的界限，都是在积累创意，完全是可以用到自己的项目中去的。

今天会分享一个我当年做临摹练习并融入实际项目中的小案例。

临摹

大概是在 15 年左右，在网上看到锤子设计师设计的一个图标，觉得非常惊艳，当时就想把它临摹下来，这是当时临摹的一个效果。

△ 原作

△ 这是我当时临摹的图

我在临摹这张图的时候，想达到的目标是能根据自己的 logo 色及文字，做一个半原创的设计。

然后实际练习中，不断观察原作发现有一些细节值得学习：

1. 图标分为水上和水下，2 个层级，在水下的图形因为折射的关系，会发生扭曲
2. 水下会有深浅的颜色变化
3. 真实的水会流动，所以在水下会画出带明暗细节的水纹线条
4. 水下会有气泡，且气泡的产生符合真实场景，气泡的大小由小变大
5. 水面的边缘因为透光而产生边缘反射
6. 投影因为红色盒子的影响，会偏红色色相，并且有近实远虚的关系
7. 盒子的边缘会有 1px 的高光和反光
8. 背景为了增加图标的展示效果，也做了单独的设计，把四周压暗，然后加上杂色，使得整体的质感更加强烈

当时，对我来说，在练习的过程中有一个难点就是关于第 3 个细节水的纹理执行有些难度，因为其中包括了粗细变化、虚实变化、明暗变化等等，单纯的用图层样式或者矢量去画的话，难度都比较大。这个细节当时耗费了我不少时间，后面突然想到其实也可以用合成的办法来实现，然后我去找了真实水纹的图片进行叠加，很快就搞定了。所以，只要能达到效果，不能太过于局限某一种思路。

分析并完成这些细节后，就是你在做这个练习中学到的点，尝试把它们学以致用。

运用

记得当时在 360 时需要设计一套关于摩洛哥蓝色小镇的官方定制版主题图标。从搜集的当地代表性的图片中发现，多彩颜料是当地的一大特征，所以决定以染料为关键词去画一个图标，又因为颜料本身自带多彩的特点，所以以它为主题图标就很合适了。

然后在思考这个图标的时候，首先会应用参考图中的配色，并结合染缸的造型做出了第一版的效果。

这个效果虽然是表达了那个意思，但缺乏亮点，联想之前练习过水的技法表达（临摹中第 3 点细节运用），正好可以利用水的纹理做下强化，这样就优化出了第二版。

嗯，看起来感觉有了一些特点，但感觉缺乏细节，接着思考水除了有纹理高光，应该还会有边缘高光（结合临摹中第 5 点细节），所以在边缘尝试加了高光，增加体积感，做出水要漫出来的感觉。

如果只有这一层高光的话，细节度感觉还是不大够，在之前的文章《如何从优秀作品中偷师，用一个游戏案例教你思路》我有分享到在 UI 大佬的作品中能学到他们对于 1px 高光的使用（临摹作用中的第 7 点），这里因为是液体的材质表现，所以增加一个高光点增加水的通透感。

到目前为止，似乎看起来已经差不多了，但考虑到现实世界中，溢出的彩色液体在透光性很好的情况下，也会对周围环境产生影响，所以我在颜料设计的四周，配上对应的四种颜色的模糊投影（临摹练习中的第 6 点）。

在思考下，在临摹的图标中为了使得图标更加自然，作品中其实结合了很多真实世界中会发生的情况，比如水的折射，气泡的比例，深浅等等，那对于染料来说，会有怎样的真实情况发生呢？我当时想到一点是，染料在用的过程中其实很容易洒出来，所以图标背板上现在太过于干净了，增加一些细节能够使得背板能够跟主体物产生关联，也更加自然。嗯，又是一个小细节。

最后，我们对比下第一版和最终版的效果，细节确实丰富了很多。

一张动态图可以更加清晰的看到变化。

总结

这次图标的优化过程，我觉得有几个要点对我来说印象深刻的：

图标的风格可以是扁平的，但想要增加自然舒服的细节，一样可以像画写实风格那样仿照现实。你需要留心观察这个世界，就算是一张照片中也能有非常多可以利用的细节。

碰到难做出来的细节，多想想有没有更效率的办法。比如在做水纹理的时候，一开始就想着完全靠鼠绘画出来，结果效果一直不大好，然后利用 PS 合成的方法，很快就能把效果做出来。

对于图标来说，要注意其整体性。比如图标中的主体物不要跟背景脱离，不要让图标背板只是作为一个容器，而要让背板也成为图标本身的一部分，这样图标的整体性会更好。

临摹的过程中，一定要多分析，多记录自己觉得是细节的点。每一次记录，都可能是将来设计时提升细节的灵感来源。

以上内容只是我在日常练习中应用到实际项目中的一个小案例，其实还有非常多的灵感想法都来自于你平时做的练习，关键是要多动手，多总结，才能增强自己对细节的把握能力。

文章来源：优设网     作者：彩云译设计

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

2020年结束，此时正是一个很好的时间节点，我们共同探寻2021年即将拥有怎样的未来。本文将带你发现，即将在2021年流行的十种移动用户体验设计趋势。

       看到知乎上的一个问题：如何找到一家好的高端网站设计公司？

       把回答的内容也转过来记录一下。

       首先回答：何为高端？



       高端与低端是对应的，目前网站设计，中低端基本是用模板改改，相对价格低，有一些小型公司或不依靠网站运营收入的公司，“有个网站就好”，所以可以用这种低投入，内容有就行的网站建设公司，特点是马上就能用，三五天把内容发布进去就可以。备案可能需要一定时间。



       高端设计公司，一般是量身定做，为企业做网站策划、分析，按照用户研究、网站建站的目的来进行网站的定制栏目页的设计。做竞品分析、研究对方的优缺点，设计的色系和企业标准色、情感表达、人物场景、用户体验思维，越深入，思考越成熟，做的网站品质越有保障。所以需要的时间、精力、投入相对多。



       因为投入相对多，所以经营业绩好的企业、集团公司、营销类大型网站来定制的比较多。



       我们公司“北京蓝蓝设计”就是为定制的高端企业用户、政府网站、软件公司来服务的。我们挺喜欢要求高的客户，这样能体现出专业设计的水平，这也是我们和其它建站公司区别开来的地方。



       我们主要是给大型软件公司平台、系统做UE、交互设计、视觉设计，用户体验优化，这个，比网站设计更难，更专业。 往往一个公司的核心产品，值得把精力金钱投入到上面，产出最大的回报。近年来，除了做软件UI，大屏大数据可视化项目外，我们也扩展了“愿意把公司网站做成核 心产品”这样的公司成为合作伙伴，更好的为客户提供全方位的服务。



       一旦成为我们的客户，设计无忧。

       我们一定会把该做的事做好，并提供超值服务和额外附加值的。

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

作者：蓝蓝

表格，是一种最常见的信息组织整理手段，常用于信息收集、展示、数据分析、归纳整理。

      UI软件设计中最常用、最基本的是表格的设计，有些软件中80%都是表格类页面，可以说，设计开发的是否易用，很影响口碑和用户的使用感受。基础的东西一定要做好，就像我们吃的主食一样，虽然都是米和面，但是各地出产各种品种口味都不相同，要根据食客的喜好选择、烹饪。今天就聊一聊最基础的表格设计、变化和常见问题。

一、基础的表格设计美化

      基础的表格可变化的地方很少，可以根据当前软件开发选择的框架控件（ext/vue/jequery不同框架会有一些不一样）做色彩和风格的变化，如：加表格不同粗细的线、斑马格，中间无竖线种种的设计，有的表格需要标题很突出，有的内文突出，这就和内容焦点相关了。

为了操作直观便捷，在操作区放一些图标“删除、编辑、审核”，配合文字来使用，有的把操作类的图标放在最左边，有的放在最右侧，按行业用户习惯而定。

可以用固定表头（标题位置不变），允许用户排序，单元格内有很长的文字，设定最大字节，多内容用……替代避免转行，有小数点的数字右对齐，每列的大小可调整，这些也是设计开发中可以做好的细节部分。

二、特别宽的表格怎么设计？

有的表格的宽度，达到了屏幕的两屏和三屏，出现宽宽的横向滚动条，又有长长的竖向滚动条，但工作的人又必须看，可烦人了！很多软件都因为这个原因被吐槽。下面就介绍三种方法解决这个问题：

方法一

如果表格的标题是可以定制的，允许省略的，可以从业务角度取舍去掉无关紧要的，不常用的内容，把这部分放在点开的详细页内容中即可。这就像一个房间的断舍离：挑选、丢弃、分类、收纳，思考哪些物品是不要的，哪些是必不可少的？哪些是可有可无的？依次排序放在顺手的位置，ui设计的道理也是相通的。

方法二

如果表格里面的内容是确定的，不可省略的，比如银行的报表就是这么长，这么多，那我们就可以从设计的角度来优化，做一个加高版的表格。

表格为什么一组信息只能一行呢？完全可以一组三行四行，在组中进行重点信息，非重点信息以及符号化的直观转变。用大小、对比、浓淡、色彩、间隔这些平面设计的基本原则，让一个普通的“山里娃”土土的表格变成一个“青春靓丽、人见人爱”自带明星气质的表格。

方法三

大表格里面嵌套小表格，利用交互设计，巧安排空间。当用户光标移至感兴趣的那行的时候，关于它更多的内容，在下方滑动撑开出现或者右边浮动出现。这个方式虽然比较土，但也确实管用。早年在看某一招聘网站的时候，每一个人的简历只要点名字就可以看到一组关键信息，便于迅速筛选，而另外一个招聘网站，就没有这个功能，每个人都要打开之后才能看见整体信息，我后来就不怎么看那个网站了。多一步操作，对典型用户就多了许多的工作量，网站和软件的使用口碑，用户粘度就是这样在为用户考虑中一点一点积累起来的。

 上图：大表格里面嵌套小表格

     方法不会只有这三种，其他的方法要根据当时的业务，用户使用的习惯、重点，因地制宜的去设计了。软件中的表格节省了许多程序工程师的工作量，如果做大的改动或许是巨大的工作量，如果要做变动，一定要在开始的时候就要让ui设计纳入开发体系，一生二，二生三，在前期第一批实施时越注重细节，后期就会越轻松，甚至省去几倍甚至几十倍的时间挨个页面的去纠偏、修改。

      一个系统总是需要业务担当，颜值担当的核心部分，重要的页面要额外的对待、花更多的精力和时间。如果千篇一律，也就不能显示出软件产品的独到之处了。

第三 与表格配合的部分设计

第一种  “搜索查询”和“过滤”部分的设计

     大多数表格的前面都有搜索过滤功能，如果搜索条件相当多，可以精选一部分主要的排成一行，其他的隐藏，点箭头再出现。整个搜索区域也可以有隐藏／显示的按钮，来给下面的表格更多的空间。

     过滤条件区域可以定义好“条件名称”一致宽度，一般在八个字左右，避免有的字节多，有的字节少，行数多了，参差不齐，区块和区块之间也要定义好统一的间距，这样整体页面就显得整齐划一、条理清晰。

上图：搜索和卡片式信息的组合

第二种  表格操作部分的设计

       对表格的操作“导入，导出、批量导出”有的时候这类操作有10—20个，有的时候才几个，多的时候很占地方，可以用隐藏的方法，over到表格上再出现，以节省空间。

       也可以分组把同类的操作聚合在一起，把常用的放在目之所及，不常用的点后下浮出现，以节省空间，

还可以光标跟随表格的某一行，点选自动浮出一群小跟班，各种操作按钮。即节省空间，操作移动路径又很短。只是不支持批量操作。

第三种  表格和卡片式设计、统计图的整合切换

       表格是可以转换成卡片式设计的，用一个卡片代替一行的展现信息，改变一种阅读的方式。

有的也可以转换图统计图表：曲线图，柱状图让用户直观的去解读，而不必一直看枯燥的数字。

蓝蓝注：我非常喜欢这个风格。

日前，在网上流行起了一种叫 Neumorphism 的新风格，也有人称为 Soft UI，这是一种类似于浮雕的效果。这种风格的出现，给目前流行的扁平化设计增加了一种新的设计形式，很多媒体甚至还将这个风格列为 2020 的设计趋势，三星 Galaxy 系列的发布会宣传海报也使用了这种风格，可见这个风格的火热程度。那么一开始我们不讨论这个风格好还是不好，先来了解一下这个新风格趋势。

什么是Neumorphism？

最开始是一位来自乌克兰的设计师 Alexander Plyuto 在各平台发布了新的作品「Skeuomorph Mobile Banking」。这个作品自发布以来就获得了数十万浏览量，数千点赞数，热度持续飙升并登上 Popular 榜首。

作者是用 Skeuomorph 来命名这个作品风格，评论区就开始了这种风格的讨论，有的人说这是新的拟物风格（New Skeuomorphism），也有人说这是拟物风格 2.0 版本（Skeuomorph 2.0），而后来就有设计师创出一个新的虚构名词，把 New Skeuomorphism 两个词组合，Neo 谐音 New 就是 Neuomorphism。

这个名字就这么火了。大家都开始用上了这个名词出作品，成为了设计新趋势。甚至连作者后面的作品，也使用了这个名称。

再后来国外知名设计师 Michal Malewicz 发布了一篇关于这个风格的文章，将 Neuomorphism，删减了里面的字母「O」，改成了 Neumorphism。在大神的推动下大家又开始争先恐后地使用这个名称。

目前有各种对名称的说法，Neuomorphism，Neumorphism，Skeuomorphism，Soft UI，在没有实际确定的情况下，其实怎样叫都无所谓，重点是我们要知道这种设计风格趋势，关注的不是名字，而是设计。

还记得拟物风格吗？

既然 Neumorphism 只是一个虚构词，也没有任何官方认定，那就先不纠结应该叫什么，我们还是来说说它的前身吧，也就是 Skeuomorphism（拟物）。这是最早被 Apple 提出的设计概念，就是在界面中模仿现实物体纹理材质的设计，目的是让人们在使用界面时习惯性地联想到现实物体的使用方式。

拟物写实的设计风格曾经风靡全球，当时的 UI 设计师几乎都对拟物作品着迷。

而在 2013 年的 WWDC 大会中，苹果公司发布的 iOS7 系统，系统 UI 使用更简洁的设计风格。这场大会也使拟物风格逐渐过时，直到现在扁平风格的全面普及，拟物风格就再没有被广泛应用。

从前几年的设计趋势可以看到，扁平风格作为更更简洁的风格被设计师推崇，再加上苹果系统 iOS 7 设计风格的面世和谷歌系统规范 Material Design 的普及，扁平风格在 UI 设计中一直占据重要位置。

但设计的流行趋势也一直在改变着，在苹果公司发布的 iOS 13 系统中，就有出现轻拟物的设计手法，接着就有一大堆设计师猜测是不是拟物风格的回归，但我看系统中大部分界面设计也还是扁平风格，并没有把拟物风格作为主要设计风格，也许只是某种程度上解决了画笔的视觉识别问题。

拟物效果能否回归，这个言之尚早，但是新的风格趋势也许可以在扁平同质化的时候增添一点灵感与乐趣。

能用在实际项目中吗？

1. 设计

其实要做到这个效果并不难，了解一下这个风格的结构。

主要有三个样式组成，1 个背景+ 2 个投影。在这个基础上，通过改变颜色和大小参数来达到不同效果。

我尝试着使用彩色去做这个效果，使用浅色背景时还是有效果的，但使用深一点的颜色时，问题就出现了，效果更像是外发光或者普通投影。这也可能是为什么大多数作品都采用比较素的颜色作为背景的原因。

2. 浏览

这个风格最大的问题就是缺少对比度。在色彩使用上比较克制，没有大面积的平铺颜色，仅在极少的位置进行色彩点缀，作用是吸引眼球。从众多设计师的作品可以看出，整体视觉是比较平的，缺少层次。

我拿其中两张图进行了 15% 强度的模糊处理，可以看到除了点缀的位置以外，界面是没有重点的。

3. 操作

因为在界面中除了文字以外，几乎所有元素都应用了这种效果，导致界面所有内容看起来都是按钮的错觉。界面中的主要操作按钮也没有被重点提亮。正常态和点击态的对比度并没有拉开，容易造成状态混淆。点击欲望比较低，不利于引导用户进行下一步操作。

4. 动画

跟拟物效果的动画有同样的问题，元素动画效果很难做得轻快，更适合按钮的使用。由于视觉层级跟背景没有实际分离开，就像固定在了背景上一样，所以动画效果只要出现移动，就会让人觉得不合理，容易给人一种虫子在皮肤底下蠕动的感觉。

5. 开发

问题跟当年的拟物效果的实现类似，要实现这个风格，主要有两个方式。

切图：对元素的每个状态（Normal、Hover、Pressed），设计师都需要分别提供一张切图，这个会导致资源库增加大量的图片。 代码实现：这个风格的实现效果是对元素增加两个不同方向的投影，通过代码可以实现。但是需要开发对每个元素添加投影，样式代码增多，繁琐的工作量，开发也不会乐意。

附 CSS 实现新风格的网站：Neumorphism 的生成器

综合分析来看，这种设计风格目前在项目中推广和实现中并不合适。

总结

这个风格的出现也确实给大家带来了一个新的思考，这个风格会持续吗？可用吗？也许扁平风格的多年流行后，设计潮流开始往回走，但并不是直接回到拟物风格，而是在效率和视觉效果中找一个平衡点。不论这个风格的对错，起码引起了设计师的注意，也激发了很多设计师的灵感，就像当年拟物风格和扁平风格的讨论一样，不分对错，设计师也不妨多留意一下这个风格，试着做一下效果图，或许会有新的发现。