产品视觉探索

今天分享一些自己积累的一些app的视觉分析，从色彩、版式、字体、产品气质等几个纬度来分析（文章有点长，但是希望大伙能看完，希望对大家有帮助）
注：文章内的色彩都是以HSB去做分析。

（坚持每日记录一个体验或者创意点子～）

1.QQ音乐

视觉分析：
1.QQ音乐品牌色为绿色，界面的设计主要以留白为主，绿色作为主色去点缀重要的信息，整体页面给人感觉非常舒适、清新、克制。

2.图标风格一直保持原有的设计风格，以面性的图标风格为主，图标色彩为绿色单色设计语言。

3.中性色也用的非常好，比如背景用的是B98的灰，非常接近白色但是又能与白色相区分，黑色用的是B10，而不是纯黑色，整体界面非常清新和自然。

2.绿洲

视觉分析：

1.绿洲app从排版的形式上和Instagram很相似，不过其他地方的视觉层面的设计也是值得学习的。

2.色彩层面绿洲用的主色绿色有点偏向橄榄绿，明度和纯度都比较适中，整体感觉比较清新，辅助颜色为浅黄色。

3.在图标层面底部图标和首页主要的图标为线性风格，而消息列表、分享界面的图标利用的是黑色描边和灰白填充的描边，整体感觉是很符合绿洲的产品气质，而不是普普通通的简单线性的图标，有一些自己的东西在里面，挺有细节的。

4.我个人特别喜欢绿洲的IP，是个仙人掌，不过呢，设计师能把仙人掌画的非常可爱动人，当用户点赞时，弹出的爱心是和仙人掌结合，非常可爱有趣，包括空白页面也是利用了仙人掌的形象去做，整个产品都赋予了情感化，能让用户感知。

3.NIKE Rub Club

视觉分析：
1.第一次使用Nike Run Club，页面给用户的感觉细腻、大方，大字号和大间距具有很强的呼吸感。

2.色彩层面，延续着留白的风格，由于产品为运动类的app，色彩方面选用了明度和纯度很高的黄色，黄色也是充满活力的颜色，很适合运动。中性色在app中只出现了纯黑色和B55的灰，整个页面非常干净整洁。

3.字体层面想说的是Nike的数字字体我非常的喜欢， 粗壮、倾斜能传递一种速度、稳重向前冲的感觉，非常符合该app的产品气质，同时粗壮的字体用在重要的信息层面上更加醒目。

4.最主要所有Nike的app版式和字体间距都保持的很一致，可能用户不需要知道logo就能大概知道是什么app，重复了相同的规则，页面细节呈现的很好，每一个细节导致Nike的app都具备相同的产品气质，这也是一种品牌形象的传递，给用户树立了很强的品牌感。

4.潮汐

视觉分析：
1.潮汐是一款睡眠、冥想、放松与专注的身心健康应用，也是关于声音的软件，我非常喜欢该应用的视觉界面设计，给人感觉很轻松、干净、素白与清静的感觉，产品本身针对的是一些高压和需要放松的人群，也希望给用户传达轻松、舒适、轻盈的感觉。

2.界面主要以卡片式的设计形式展示，主页面直接全屏场景的形式，沉浸感很强，界面也有很多细节，图标的底板利用的毛玻璃效果，图标则以线性展示，极简的设计风格，给人感觉通透与舒适视觉感受。 

3.配色层面上，以留白的形式，颜色只是在界面作为点缀，每一个小的功能点都有对应的色彩，色彩上面在不同的色相情况下，保持了色彩的纯度和明度相差不大，产生整体配色一致性和视觉感保持一致，非常舒适。背景也带了S2的蓝色纯度在里面，相比于灰色显得更加丰富一些。

4.配图也找的非常符合产品的调性，每一张图和角度都通过设计师精心挑选和设计，每一张图的质量也很高。

5.闲鱼

视觉分析：
1.咸鱼app在视觉层面给我的感觉非常可爱、活力、年轻的气质，从咸鱼logo中就可以发现，整体的感觉是圆润、逗趣的。所以咸鱼的图标、按钮、头像等都是有圆的设计语言在里面，比如中间的加号图标底板，不是普通的圆角矩形，而是超椭圆矩形，非常有细节。包括每一个主要图标都是描边+填充的设计语言。

2.从咸鱼发现黄色的背景，也是我之前做错过的事情。在黄色背景不要用白色图标和白色文字，因为黄色明度比较高，白色在黄色背景上非常难识别，所以最好用黑色，这里也为什么咸鱼在黄色背景用黑色描边的icon，刚好也能很好识别。

6.爱彼迎

视觉分析：
1.爱彼迎是一款非常优秀的产品，有很多设计层面的东西都值得我们去学习。比如从产品的角度出发，首页的搜索房源功能卡片式在页面的展示层级上是最强的，视觉的感知也会比较明显，给予用户最好的视觉感知。

2.品牌色为红色，绿色、黄色为辅色，但是很多地方出现绿色显得非常高级，因为选用的绿色纯度比较高、明度比较低。红色与绿色形成互补，使得界面功能非常清晰与高效。

3.在一些数字字体选用也非常的细心，选用了一款比较粗壮的数字字体，从而在界面上用户易于识别，同时也赋予了产品独特的品牌特性。

4.图片的质量也是非常不错的，很少出现模糊、比较不适的图片，同时让整个产品的气质非常的有格调，更能让用户很好的体验该产品，整体的体验也非常的舒适、愉快。

7.Soul

视觉分析：
1.Soul 也是比较火社交的app，不过玩Soul的时候发现他们的app还是有很多地方做的还是很不错的，底部导航利用的是船舵式，引导用户去“发布瞬间”。产品的整体图标都是以圆润的形式展示，绘制的也比较精致。

2.很有创意的点子是，用户发布瞬间的时候，底部有“soul拍相机、录制表情包、涂鸦表情”主要是图标还是以动态的形式出现，非常有趣。在社交类产品加入了涂鸦表情的点子还是挺不错的，赋予了用户更多创造的空间和想象力。

3.当用户在点击相册某个照片时，会有一个先缩小再放大的一个动效，一个小的反馈体验，大大提升用户的感知，还是挺不错的。

8.红板报

视觉分析：
1.红板报作为新闻杂志类的app，在体验上和视觉上还是比较有意思的，当用户在首页切换的时候会像看杂志报纸一样翻页，非常新颖和有创意。

2.UI界面的图标、图片、用户头像一些按钮都是以直角的形式展示出来的，非常的硬朗，相当于提取了logo的设计语言，logo本身也是直角的设计语言。包括首页的页面的角标“封面故事”都进行精心设计过。标签像是正在翻页的效果。
3.配色上面也是以黑色和红色为主，整体的科技感、沉浸感也会很强，每一个页面都进行精心的设计过，非常值得学习的一款app。

9.东家

视觉分析：
1.东家app给我印象极深的是东家的icon设计，非常记忆深刻，甚至玩过之后不告诉我logo我都记得他们的设计风格，每个页面的图标都经过精心的设计，利用了宋体的笔画进行了图标设计，具有古朴、东方美学的韵味，连返回图标都是统一的设计语言，真的是绝了。

2.图标的设计刚刚好反应出东家的产品定位，本身也是一种传统工艺、茶叶、历史等买卖的app，赋予了产品传统的图标设计基因在里头，传达东方美学。

3.包括金刚区的图标设计利用了古代门窗提取了形在图标里头，配色上也是选择纯度、明度都比较适中的也是，显得整体会比较古朴的韵味。

总结：

每一款app都有自己的产品气质，就像每一个人一样都有自己的性格，每个企业也是一样，设计师需要不断发掘公司的产品气质，从而赋予到自己的产品中去，这样才能做出合适的设计。

希望自己发现的东西对大家有帮助，从而也能巩固自身的专业能力，感谢大家的阅读～

微信公众号：黄小伟UX