吉祥物设计简单卡片-百度、虾米、音悦泰网站交互设计分析

这里每个人都是产品经理【起点学院】，BAT实战产品总监带你了解产品和运营。

苹果“Mac之父”Jef Raskin曾说过：“对于消费者来说，界面就是产品。” 界面是用户体验我们产品最直观的接触点。 界面做得好将会大大提高用户使用我们产品的乐趣。 所以我们长期以来一直在追求界面设计的进步，才能在众多同类产品中脱颖而出。 接下来我会通过对排名比较靠前的几个音乐网站的界面的简单分析来阐述我对交互设计的一些见解。

站长网排名前三的国内音乐网站分别是：百度音乐、虾米音乐、音悦台。 我会分析页面的简洁性、美观性、配色和细节。

百度音乐：

简单性：★★

页面上堆积了太多不必要的内容，比如客户端的二维码、中间的广告、百度搜索框等，让整个页面感觉杂乱。 太多文字组成的音乐分类看起来还停留在传统网页的水平，使得界面显得非常密集。

美观度：★★★

页面采用了黄金分割的布局结构，也采用了现在很流行的扁平化设计，再加上推荐音乐的小动效，美观度也有点讲究。

颜色搭配：★★

小编并没有看到什么明显的配色设计，主要是符合百度的整体色调。

细节处理：★★

小编并没有发现什么特别好的细节，而无处不在的百度推广着实让小编反感了。

虾米音乐：

简单性：★★★

与百度音乐相比，虾米音乐没有一堆文字，密度感也没有了。 色块通过留白来区分，效果还是很好的。 但色块小，色块多，没有大气和简约感。

美观度：★★★★

虾米音乐还采用了黄金分割布局结构，集中在屏幕中间，两侧留有空白。 主要原因是它可以集中用户的视线，抓住焦点。 卡片式的色块分布符合当下的时尚潮流，也是最重要的模块设计思路之一。

颜色搭配：★★★★

虽然页面没有大面积使用橙色，但整个页面确实给人以暖色为主的印象。 人们习惯了先入为主的想法，在色彩的完整性上做得很好。 橙色的波长介于红色和黄色之间。 它是一种非常活泼、绚丽的颜色，也是最温暖的颜色。 它给人一种奢华、温馨、兴奋、热情的感觉。 应用于音乐网站更适合用户的心情。

细节处理：★★★

界面是产品与用户的交互，细节才能打动用户。 虾米音乐里有一个细节我非常喜欢。

今日音乐人是一张小卡片，形式非常俏皮可爱，每天的图片都处理得非常精美，感觉虾米音乐每天都会给你寄一张漂亮的明信片。 “听了吱吱”，是不是很可爱？

银月台：

简单性：★★★★★

音悦台的界面设计在国内是设计得比较好的。 以大图片作为背景，整个界面非常简洁，不仅具有很强的视觉冲击力，而且对网页的内容做了很好的补充，而大背景的设计方法在国外网站。页面通过留白来区分章节与章节，看起来很干净

美观度：★★★★

垂直滚动的页面显示方式，用户使用起来非常方便，迎合了移动终端的发展，也具有良好的审美表现力。 整个界面浑然一体，从上到下保持着统一的风格，各个板块也分类清晰，具有相当好的一致性和完整性。 这样的设计可以让用户对你的网站留下深刻的印象，我们甚至不用刻意记住就能记住银悦泰的网页结构，完美塑造了品牌效应。

颜色搭配：★★★★

采用黑色和绿色配色方案设计。 绿色是柔和自然的颜色，黑色是沉稳的颜色。 两者的结合使网站看起来稳重柔和，清新高贵。 让使用者有一个平和的心态，很安静，很舒服。

细节处理：★★★★★

直到顶级设计为止都很可爱

由于它采用垂直的网站分布结构，用户可能会下拉到最底部，当下拉到某个位置时就会出现这个可爱的小吉祥物，当我们向它寻求帮助时，我们可以立即回复。 爬到上面是不是超级可爱呢？

优秀的用户体验登录验证码

银悦泰使用的是最近比较流行的极测验证推出的滑动验证码。 用户只需拖动滑块即可完成拼图，验证完成时间仅需不到两秒。 极其美观、便捷的验证码ip形象，不正是体现了银悦泰对待用户的诚意吗？

通过以上的分析，小编为大家总结了几点：

如何设计一个简洁、精致的网页？ 采用时下流行的扁平化设计，通过简单的图形、文字、色彩的组合，去除多余繁琐的装饰，达到直观、简洁的设计效果。 例如，我们可以在网站上使用大背景，不仅可以达到非常华丽的效果，而且如果图片选择得好卡通人物，也可以准确而深刻地向您的用户表达网站的主题。 大标题也是不错的选择。 简单大气的文字效果可以集中用户的注意力，同时也不会让你的网站显得繁琐。 卡片的模块化表达现在似乎是很流行的一种，得益于移动互联网的普及。 卡片式的设计可以让我们的网站更加有序，而且图片的放置不杂乱而是整齐有序吉祥物设计简单卡片，这也增强了我们网站的可读性，用户可以通过浏览图片轻松找到自己喜欢的内容。 通过研究发现，人们在浏览网页时相对于文字更喜欢图片，而通过卡片式设计的图片呈现可以有效提升用户体验。 我们知道，颜色可以直接影响用户的情绪。 红色代表热情，黄色代表温暖，橙色活泼，黑色沉稳，绿色自然，灰色安静，白色纯净。 单色背景，通过色调和色调吉祥物设计简单卡片，可以给页面带来流畅的美感。 绚丽夸张的色彩可以带来强烈的视觉冲击力，同时使网页充满艺术气息。 如果你希望你的网站呈现给用户，你需要仔细考虑你应该使用什么样的颜色组合。 通过细节的处理，我们可以让用户感受到网站背后设计者的用心，如果有回报，用户就会对我们的网站更加忠诚。 细节需要在生活中去发现和积累，比如上面可爱的吉祥物引导，或者是极限经验验证的滑动验证码。 这些细节可以作为参考。