6

原来大厂总监是这样判断你是不是高级设计师的！

 3 years ago
source link: https://www.ui.cn/detail/622260.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

原来大厂总监是这样判断你是不是高级设计师的！-经验/观点-UICN用户体验设计平台

原来大厂总监是这样判断你是不是高级设计师的！
57.5°

2022-04-20 | 原创文章 / 经验/观点 / | 举报

|

8860 42 337 14

其实一个画面能够那么精致都是无数的细节堆出来的，很多人都只关注“大细节”，却很少关注“小细节”，但其实很多时候，就是那么多不起眼的小细节，影响着我们最终的输出效果。

今天我们来简单看几个小细节，真的是很小很小，很容易被忽略，都是实战项目。

1. 一个加号的细节

在管理人员的时候，我们需要添加或者删除人员的操作，也就是常见的加号、减号，最开始设计师做的效果是这样的：

4090890.png

其实也没有什么大问题，但就是差点精致度，如果一个页面，每个点都差点精致度，合起来就会差很多，于是我们就去想为什么它没有那么精致。

首先，我觉得线是有点太粗了，于是我们变细了一点：

4090892.png

其次呢，是否可以在对比上再加一点细节呢？比如里粗外细、里实外虚，于是我们咔咔一顿调整，最后选择了下面三张图的最后一版：

4090893.png

4090894.png

4090895.png

我们看下和第一稿时的区别：

4090896.png

是不是精致很多，虽然是很小的细节，但也影响着整体的效果。

2. 小面积少用大渐变

我们在做页面的时候经常会使用渐变色，有时候还会使用那种比较大的渐变，比如对比色渐变、互补色渐变，像下面这种：

4090897.png

在大面积上使用是没有什么问题的，但小面积就不一定了，比如这种小面的对号，用了渐变色，基本看不到，还影响识别：

4090899.png

不如直接就用白色算了：

4090900.png

不一定所有地方都要使用主色渐变。

再比如我们经常用的按钮，大渐变的按钮，最好别让按钮太短，要有一个最短宽度，这样两个字的时候会好看些，比如下面这两种：

4090901.png

是不是第二个会好一点，既然我们用了大渐变，就一定要让渐变释放出来，不然憋在一个小面积里，看不清楚，那就没意义了。


3. 前后逻辑的问题

当信息层级有前后关系的时候，正常情况下，都应该是前面的是亮起的，后面的是暗的，比如背景灰色，前面的卡片是白色：

4090903.png

再比如，分类页面的侧边栏，选中的是白色，非选中的是灰色：

4090906.png

我们可以看下最近的的一个实际案例：

4090908.png

有一些地方的逻辑是ok的，比如这种信息亮起、弹窗浮层亮起，后面背景暗下去：

4090910.png

但是有一个问题，聊天列表，选中的列表是深色，没选中的反而亮起到前面来了：

4090914.png

这就给人一种好像所有的列表都被选中的感觉，怪怪的，后来我们优化了一下：

4090915.png

这样就没那么奇怪了。这种都是考验一些基本逻辑的问题，千万不能出错，不然就会看起来很奇怪。

总结

好了，以上就是今天分享的几个很细节很细节的小点，可能在很多人眼里觉得很不起眼，但这些小点真的都是非常重要的，都是支撑我们页面精致美观的必要条件。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK