如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
即使现在很多 WordPress 网站模板、H5 在线编辑器等等，但网页设计需求依然非常多，线上编辑器尽管如何智能，但终究也是「模板式」，想完全符合用户需求的产品还是靠有经验的设计师来完成。即使是有经验的设计师，依然是需要不停的找新的设计灵感。
事隔一个月，@dailywebdesign已更新了30+精品网页截图，小编今天再次为大家整理出来，方便大家欣赏，同时也推荐大家看上一期的《26张很棒网页首屏设计作品欣赏》。
PS：这些网页设计案例均来自 Ins 的用户，并非 Dribbble 网站，所以没有对应的作品集页面链接。
Design by: @vladimirbiondic
Design by: @capouska
Design by: @gtamarashvili
Design by: @abaygulov
Design by: Samuel Scalzo
Design by: @ui_ux_joy
Design by: Rono
Design by @rathniley
Design by: @brkrobert
Design by: @kreativa.studio
Design by: @fireart_studio
Design by: Oliwia Przybyla
Design by: @outcrowdstudio
Design by: @tintinsupp
Design by: @ihrvoje
Design by: Catalin Blanaru
Design by: Craig Gittins
Design by: @dannpetty
Design by: @halolabteam
Design by: Chalar Tintin S
Design by: Samuel Scalzo
Design by: @dogstudio_be
Design by: @divan_raj
Design by: @divan_raj
Design by: @outcrowdstudio
Design by: @jan.teschner
Design by: Abhishek Biswas
Design by: Michael Brewer
Design by: Cosmin Capitanu
Design by: @janravendeklerk
Design by: @arendstom
Design by: @capouska
Design by: M S Brar
Design by: @divan_raj
Design by: @syedraju01724
Design by: Yu Long
Design by: @marcocoppeto
Design by: @bestservedbold
Design by: @akasharun4161
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一、什么是用户角色模型（用户画像）？
概念&作用
用户角色模型是真实用户的虚拟代表，通过一系列的真实数据分析，得出的目标用户模型。模型通过抽象来代表复杂的现象，好的模型强调结构的显著关系，弱化不太重要的细枝末节。我们要了解：用户与用户，用户与期望，用户与环境，以及用户与产品之间的关系并且将其视觉化。
这里的视觉化可理解为：海量的数据标签（标签化、数据可视化）。比如我们要统计每个用户的行为特征，细分到人口基本属性、社会属性、生活习惯、消费行为等信息，抽象出各个具体的标签，赋予名字、照片、一些人口统计学要素、场景描述等，最终形成一个人物原型（personas）。
创建用户角色模型的好处
· 与利益相关者、产品团队在研发中抛开个人喜好，聚集在用户动机和行为上，了解用户深层次动机与心理；
（抛开个人喜好：产品团队容易将自己的目标、动机、技巧代入产品设计中，这就是设计者心理模型）
· 避免设计陷阱，让产品设计更聚焦，防止走偏，避免把过多的心思花在其他边缘性功能上
（更聚焦、防止走偏：有人物模型为基准，团队就能清晰的对功能进行优先级排序，以核心功能、解决用户诉求的功能为主，可避免把注意力放在非核心且次要的功能点上。）
· 有助于为营销活动、组织架构、客户支持、战略规划及设计决策 提供有价值的信息。
由什么构成？
显性画像：用户群体的基本信息描述，如目标用户的年龄、性别、职业、地域分布、兴趣爱好等信息，一般通过客服人员线上交流、用户账号数据、常关注的内容做判断，间接获取数据；
隐性画像：用户群体深层次的特征描述，如使用产品的目的、解决什么问题、偏好、诉求、场景、愿景、使用频率等。主要以问卷、访谈、意见反馈等方式直接获得数据。
说到底，用户画像就是先对逐个有代表性的用户进行特征描述，然后对共性特征进行提炼、分类，最终将用户标签化、数据可视化。
二、用户画像构建的基本流程
用户角色模型不是拿来既用、用完即丢的，而是建立在系统的调研分析、真实的数据统计之上得出的有力结论。
这里要考虑用户画像的优先级，画像一般会存在多个（多个用户），通常一个用户只能有一个，不能为拥有三个以上画像的用户设计产品，容易产生需求冲突，要分清楚哪些是核心用户（既目标用户、产品的支撑者），哪些是非核心用户，所以我们的设计目标就是维护、培养、促成核心用户。
同时要以适合产品团队和项目需求为出发点，用户画像不是一成不变的，而是根据现实情况同步更新，现在我们进行四步画像构成法：
1、确定分析维度
用户角色模型是针对特定产品或特定功能的，所以人物角色的分类一般是根据用户的目标（用户需求）、行为和观点（行为倾向）进行。
举例：
目标？什么原因促使你使用该产品？解决你什么问题？
观点？产品中最喜欢的功能？为什么喜欢？是否达到了你的预期？
行为？你最近一次使用产品做了什么？用了多久？
下面以2个维度做参考：
2、基础数据收集
数据是有力证据，是构建用户画像的核心依据，在基础数据收集方面，可以先列举出构建用户画像所需要的基础数据。
具体的思路如下：
上面列举的数据纬度相对比较多，在构建用户画像过程中可根据需求进行筛选。
这些数据有三个来源：相关文献资料和研究报告、产品数据后台、问卷调研和用户访谈，可以按照以下维度区分：
（这里涉及到用户研究中重要的环节：用户访谈、数据收集，将归纳为单独的知识点于下篇文章分享，期待有你~）
3、分析建模
通过以上收集方式并成功采集后，下面开始对不同的角色进行分类（通常采集多个用户做参考，如单个用户可直接将其标签化，然后套入完整模型中）
（1）先确定好产品属性，按照用户角色进行分类，比如外卖APP有：商家、消费者、骑手 三种角色，图例：
（2）然后将角色内的用户身上观察到的一些显著的行为列出不同的几组行为变量，例如：对产品的积极性、热情度、学习能力、熟练程度、消费观等。
（3）将访谈对象和行为变量对应起来
这里就以电商产品为例，将用户个性（行为变量）做成一个区间轴，再把访谈对象放到区间轴上面对应起来，不需要那么，标出相对位置即可
注意：行为变量有两种情况
· 一种是连续性，比如使用频率的描述是：经常到从不
· 另一种则是非连续性，比如使用的平台：移动端、PC端
对这两种情况，大家要视情况而定，图例：
（4）找出重要的行为模式
把对象映射完后，寻找在变量轴上的对象群。如果一组对象聚集在6~8个不同的变量上，这很可能代表一种显著地行为模式，而这个模式是构角色模型的基础，图例：
三、画像呈现
找出行为模式后，画像呈现即从显性画像、隐性画像、场景和需求等方面，给用户打标签，并且增加一点描述性语言（描述人物行为和痛点，而不是描述解决方案），图例：
四、总结
（1）确定分析维度：当前产品处于什么阶段？需要什么信息？
（2）基础数据收集：对目标用户进行访谈，收集相关数据
（3）分析行为模式：将访谈对象和行为变量对应、找出重要的行为模式
（4）整理并呈现画像：描述特征和行为，创建人物故事
聊到这里可能有人会问：
Q：用户模型做出来会不会有人看？它是不是设计者虚构出来的套路？
A：用户角色模型是设计者通过用户访谈和观察得出来的真实用户行为，是有真实数据为依据的，所以不进行大量的用户调研，不为用户建模，不去创建用户模型，只知道意淫需求，说着“我认为该怎么怎么做”，都是一本正经地耍流氓。用户研究、用户模型是我们做好产品的基础和风向标。
Q：用户角色模型到底什么时候开始做？
A：先确定目标用户 → 对目标用户进行访谈 → 访谈后再建立用于模型
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一周前，为了听《梦想的声音》，我在APP Store 下载了QQ音乐，无意中发现「音乐」类APP里排行第9的 MOO音乐，它的预览图让我联想到这些关键词：「小众、独特、欧美、Spotify、Apple Music」。笔者之所以从品牌设计的角度分析这个鹅厂家族新成员，是因为一款新产品的品牌设计在产品从0-1过程中扮演非常重要的角色，它关系到用户对新产品的认知与心智。
体验完 MOO音乐，我发现：移动产品品牌设计不仅要充分考虑视觉表现层，还要综合考虑战略、理念、内容、交互等多个方面。
同时，品牌设计是一种「求同存异」，「同」是保持对战略、内容、用户习惯的继承性，而「异」是相比竞品作出的差异化设计。本文就从继承性和差异化，这两个维度为你分享 MOO音乐的品牌设计。希望这种分析方法能够为你的品牌设计提供帮助。
从启动图标和界面很容易看出，MOO音乐的品牌主色是黄色，背景色及辅助色基本是以黑白灰为主。
MOO音乐之所以采用这种配色方案，不仅是为了突出产品氛围，让人眼前一亮，还有可能是对腾讯新形象IP品牌的一种继承和延续。
怪奇鹅IPENGOO，腾讯集团新一代形象IP品牌，代表着一种自我突破，不断创新的精神状态。
我们希望能像魔术师一样，以经典企鹅形象上提炼出的极简鹅脸元素，为大家创造出充满趣味、创新、时尚和脑洞的产品风格和内容，能唤醒每个用户自动发出好感电波是一件很棒的事情！——怪企鹅IPENGOO官微
每位音乐家都不是一颗孤独的星球，他们保持独立又彼此相连，在他们的探索下，音乐潮流才不断推陈出新又一脉相承。
保持探索，对先锋与经典抱以同样的敬意，所以我们创造了MOO：音乐即自由
MOO Music，Life is MOOO beautiful。——APP Store MOO音乐介绍
IPENGOO（怪企鹅）的理念是：
可见，「连接、传递、突破、创新」这些新形象IP理念在 MOO音乐的启动图标、品牌理念、交互手法、推荐歌单上都有所体现。
因此，MOO音乐很可能是腾讯新形象IP品牌影响力里的一种尝试。
此外，MOO音乐的品牌色也很有可能是对腾讯旗下年轻娱乐产品品牌色的一种继承。
Sympathize（体察和同理心），可以帮助我们去理解事物表面背后的本质，得到和理解设计的微妙细节，这些本质自然的元素不只是逻辑上的，更是可以被感受的。——深泽直人
说到音乐本质、自然的元素（不是曲风），我们会联想到黑胶、唱片、专辑、音波、调音台、乐器、Live、乐谱、Launchpad等。这些音乐元素能拉近 APP 与用户之间的距离，营造沉浸式的听歌体验，从而提升产品的同理心。
比如专辑封面的轻拟物化设计，播放时音波的、背景图片和短视频等等。
当我们在为一款新产品设计交互时，需要充分考虑目标、场景、用户这些基本因素。我们通常会考虑并兼顾多数目标用户的使用行为和习惯，为新产品设计交互方式。
所以当用户看到熟悉的元素时，会很自然地知道如何去使用，降低了新产品的学习成本，这就是我们所熟悉的「Don’t make me think」。
MOO音乐的首页PLAY页，采用的是音乐+短视频（有时候是图片）的方式，当很多用户看到这种熟悉的界面形式时，已经本能的去上下翻页、单击播放/暂停，左右滑动调整进度更是再熟悉不过。
另外，MOO音乐的歌单在产品初期功能里占据了很大篇幅，因为最契合用户听歌行为场景的是歌单。
说完 MOO音乐在品牌设计方面保持的继承性，下面来说说它不同于竞品的差异化设计，主要表现在品牌理念、视觉氛围、交互手法。
从 APP 的这4张欢迎页就可以看出 MOO音乐的品牌理念和调性了：经典、创新、前卫、独立。
从目前的版本来看，MOO音乐还是一款满足小众口味、专注听歌的音乐APP，但 APP 通过4张有代表性的欢迎页，将 APP的「小众」设计得「出众」，很好地表达了产品的品牌理念。
说到产品品牌的差异化，不得不说视觉层面的设计，毕竟视觉表现层是用户体验5要素里最具体的。
MOO音乐提供两套视觉风格，默认是品牌黄色+BLACK，另一套则是品牌黄色+WHITE，笔者觉得默认的 BLACK 更有特色和沉浸感。
字体风格方面，标题类文字（PLAY、DISCOVER、FEATURELIST、ALBUM、VIDEO、VIDEOLIST）都是大写的非衬线英文字体，欧美范十足。
调整进度的交互
主流音乐APP，是通过一个进度条和一个圆点来调整播放进度，而 MOO音乐将播放页面下方声波区域作为调整进度的热区，通过明暗的对比来表现播放进度。
虽然这种交互方式在腾讯自家短视频微视APP 中也存在，但 MOO音乐还是作了细节上的处理。
切歌的交互
通常情况下，在音乐APP 播放页面的其他页面，都有一个控件让你随时可以切歌，甚至是收藏，查看播放列表。
MOO音乐将切歌控件设计成了黑胶+滑块，切歌时只需向右滑动，而且 iOS系统还会伴随震动反馈。这个微交互设计得蛮有意思，这让我联想到胶卷相机拍完一张，然后拨动卷片扳手的机械反馈感。
目前 MOO音乐在 APP Strore 里才第2个版本，细节上的体验不可能一步到位。
笔者借此机会向开发者提一点个人的建议，仅供参考。
希望当前播放的歌曲与背景短视频或图片有一定的关系，比如系统可以根据歌曲的曲风、类别等标签，自动推荐匹配相关短视频和图片，让歌曲与背景环境更协调。当然，也可以让用户自己设置推荐或随机。
在 PLAY页面切下一首歌时，希望显示歌曲正在加载的状态，底部的音波区域好像可以作一些文章。
（iOS）歌曲评论页里的评论输入框常驻在页面底部，但视频评论页的评论输入框没有常驻，而且滑到底部时，不太容易滑到顶部，可能是小BUG。
（Android）轻触切歌控件里的暂停按钮后，黑胶旋转的角度被重置了。希望能与 iOS版一样，暂停后黑胶旋转的角度不被重置。
APP 默认的会员价格是18元/月，若勾选了到期自动续费，则价格是15元/月。
虽然这2个价格都不便宜，但相对来说，自动续费的价格更有吸引力，但这个相对有吸引力的价格却需要用户主动勾选「自动续费」才能看到。笔者建议将这2种价格都显示出来，通过单选按钮的形式去交互。这样，用户很容易就会发现自动续费的价格优势，毕竟与18元相比，15元就不怎么贵了。
MOO音乐于11月初发布在 APP Store，网络上比较多的评价是「抄抖音、抄乐趣、抄Spotify、鹅厂又抄了……」。
但作为设计师，笔者希望我们将关注点放在设计层面，去客观的评价一款APP，不要因为别人的评价而忽略了一些有品质的设计。
当我们仔细体验交互和视觉的细节后，会发现鹅厂的设计是有很多地方值得我们学习的。
最后，面对主流音乐APP、短视频APP、Spotify、Apple Musici、乐趣……MOO音乐既做到了对腾讯新形象IP、音乐元素、用户习惯的继承性，又做出了一些不同于竞品的差异化设计。这套「组合拳」已经打出了这款音乐APP 的品牌形象，希望这些内容对你有启发。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
这是一个以故事形式来展现网站：Oat the Goat，动画很有感觉，虽然小编目前的水平还做不出这类网站，但看看也可以增加点灵感、阅历，原来网站还能这样做的，一个网站，一个温暖的故事，来一起欣赏电影般的酷站，Enjoy!
网站名称：Oat the Goat
网站地址：http://oatthegoat.co.nz/
（请在PC端欣赏，浏览该网站时记得打开声音哦~）
故事是从一只羊咩咩的历险开始，他翻山越岭，途中遇到一些困难和遇到困难的小伙伴们，接着一起去克服，然后越来越多的小伙伴们一起去冒险，经过重重险阻，最终…… （还在让大家自己欣赏才有 Feel 的）
所有的画面非常的漂亮，就像在看电影一样，同时网站还带有一至交互体验，让用户去选择。
截图：羊咩咩遇到第一个有困难的小伙难了哦，我们继续看看……
截图：要选择你要怎么做了
故事结局如何？请自行观赏，同时您可以在下方评论处说出你的想法：）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
按钮在UI设计中是一种常用的UI控件，在界面中作为主要的行动点，引导用户进行相应的操作，它在用户和产品的交互中承担着重要的作用。
按钮设计看似简单，但是如果想要更好的交互体验，引导用户进行相应的操作，提升产品的转化率这仍是我们需要研究的问题。下面小编将从按钮功能类型和设计要点两个方面进行分析。
一、按钮功能类型
按钮的功能类型往往决定了一个按钮的设计方式，是需要强调还是需要弱化；文案是需要强引导，还是直接阐述功能；按钮上是放图标还是不放图标等。按钮根据功能的不同，可以分为不同的类型，主要有行为召唤按钮、表格按钮、标签按钮、命令按钮、悬浮按钮、开关按钮这六大类型。
1.行为召唤按钮
行为召唤（CTA）按钮其目的是诱使用户采取某些操作， 从而提高产品的转行率。简单来说就是通过设计诱导或激励用户点击按钮，例如立即购买、订阅关注、利益诱导、文字诱导等。
1）诱导购买
当行为召唤的目的是诱导购买时，按钮的设计不管从颜色、形状、样式都需要突出。让按钮看上去可点击，让用户进来第一眼就能知道该按钮的用途。如下图所示：
以美团外卖为例，该按钮的颜色采用黑黄对比、形状采用具有亲和力的圆角，在样式上加入投影同时加入送餐员的元素，配上小红点，能够清晰的给用户传递出可点击部分有去结算、送餐员。另外加入价格诱导，让你可直观看到优惠了多少钱，促使你进一步操作。
以淘宝详情为例，该按钮是一个组合按钮，由加入购物车和马上抢以及店铺、客服、收藏等组成，作为行为召唤按钮我们可以明确的看到，不管从颜色、形状、样式都能够让我们快速注意到。
2）订阅关注
当行为召唤的目的是订阅关注时，其重要程度相比诱导购买低很多，但是在设计时我们仍然需要考虑一个问题，这个问题可直接决定该按钮大小、样式等，这个问题就是需要根据产品目的判断是诱导用户订阅关注重要还是让用户阅读内容重要。如下图所示：
当内容重要时，按钮的设计需要弱化处理，以优酷视频的发现页和星球页为例，这两个页面很明显是以内容为主的界面，在设计时直接弱化了按钮形式，让按钮和整个界面相融合，但是按钮设计的原则是让其看上去像按钮，因此当按钮只是文字时可以加图标进行引导比如优酷视频发现页，也可以加入弱底纹进行引导还能让界面看上去整洁，比如优酷视频星球页面。
当订阅关注重要时，按钮的设计需要强化处理，以橘子娱乐和土豆视频为例，橘子娱乐采用粗描边渐变按钮，同时加入图标进行引导，具有较强的视觉引导作用，很容易唤起用户的关注。土豆视频采用黄色填充加图标引导，在视觉上和产品内容形成强烈对比，明显的以关注为主的界面。
3）利益诱导
当行为召唤的目的是利益诱导时，该按钮设计根据重要程度较高，因此在设计时可以考虑颜色、形状、加入图标、诱导文字等设计方法。如下图所示：
以大众点评为例，其领奖按钮明显比赚积分的层级高，因此为了突出领奖按钮采用了色块设计的样式，同时赚积分按钮采用描边设计进行弱化处理。
以腾讯doki为例，其打榜页面冲榜的重要层级较高，因此在设计时不仅采用了色块、加入动效图标、同时还加入了诱导文字，让按钮更明显同时诱导用户点击，其他去浏览按钮则采用描边样式弱化处理。
4）文字诱导
文字诱导简单来说就是通过文字，诱导用户进行下一步操作，多用于空页面、活动页面中，因此在设计时采用简单的色块填充即可，如果该页面为活动页面也可增加渐变或投影样式，让按钮更有空间感，进而突出按钮。如下图所示：
以得到为例，当你还没有学习计划时，它会对你进行提示“开始制定学习计划”，同时其按钮采用重要程度较高的色块+投影的方式，诱导用户点击。
以大众点评为例，当你还没有攻略时，它会对你进行提示“我也要创建攻略”，同时其按钮采用渐变填充的方式，诱导用户点击。
2.悬浮按钮
悬按钮浮是 Android 应用中最常见的一个控件。不过随着Android和iOS规范的不断融合，在iOS中也经常会看到各种各样的悬浮按钮。在设计上悬浮按钮应该采用显眼的颜色，以抓住用户的注意力。同时它应该是积极正向的交互，比如创建、分享、探索等，同时并不是所有页面都需要加悬浮按钮。如下图所示：
以UC浏览器为例，悬浮按钮在订阅页面的右下角出现，将按钮和界面结合很容易看出创建内容的意思，同时点击按钮还可呼出图文、视频等操作图标。
3.标签按钮
标签按钮往往呈多个出现，多使用在二级导航或条件筛选下面；以及表单页面作为切换条件选中。因此在设计样式上有选中状态和默认状态，同时其重要程度较低，在设计时不能喧宾夺主，需要弱化处理。如下图所示：
以支付宝为例，它主要用在投保的表单页面，其主要目的就是一个切换条件，重要程度远不及我要投保按钮，因此在设计时默认用的描边处理；选中采用淡淡的色块。
以转转为例，它主要用在导航下方，其主要目的也是切换条件，用户主要操作是看下方筛选出的内容，因此在设计时也进行弱化处理。
4.表格按钮
表格按钮也就是由一个白色网格加文字组成的按钮，从视觉上看和页面融为一体，特别不突出。因此多用在个人中心中不太重要信息或者不想让用户操作的退出登录界面中。如下图所示：
以爱奇艺为例，在我的界面中，关于我们和退出登录都是用的表格按钮，由于关于我们是不太重要信息，退出登录又是不想让用户操作的内容，因此采用表格按钮最为合适。
5.命令按钮
命令按钮也就是该按钮具有明确的指令，多出现在弹框中，通常会有一个文字或2个文字出现的情况。其要求是文字语义要明确，尽量不要用确定、好的、要等词汇，同时根据用户右手操作习惯居多，因此将重要的按钮放在右侧。如下图所示：
以京东金融为例，左图是京东金融退出的二次确认页面，右图是我调整文字之后的页面。我们说到文字需要表意明确，因此将确定换成退出后表意更加直白，降低用户理解度。
6.开关按钮
开关按钮也是我们很常见的一个组件。表示两种相互对立的状态间的切换，多用于表示功能的开启和关闭。当按钮开启后可能还会带来其他的相应操作。开关按钮最常见的就是手机设置中，但是也有很多APP将其用到界面中使用。如下图所示：
以美团外卖和小猪短租为例，它们在提交订单页面时都采用了开关按钮，同时在小猪短租中，当按钮打开底部会将“您可再入住完成10天内补全信息”进行展开显示，提示用户去填写。这种点击展开的操作还可增加更多的功能相关内容。
二、按钮设计要点
1.根据产品为按钮选择适合的形状
在按钮设计时，需要根据整个界面风格设计合适的按钮，按钮样式主要有直角、小圆角、全圆角三种样式。
直角的含义：严谨、力量、高端。适用于金融类、奢品类产品中，让产品给人严谨安全、高端的感觉。例如寺库。
半圆角的含义：活泼、年轻、安全。适用于儿童类、年轻化、娱乐类、购物类的产品中，提升亲和力，拉近用户的距离。例如土豆。
小圆角的含义：稳定、中性。适用于用户跨度较大的常规类产品中，例如微信。
以寺库、微信、土豆为例，寺库是品类电商，因此在设计时需要提现高端，因此在按钮设计时采用直角设计。而微信的用户群体上到七八十岁，下到几岁其年龄范围广，因此采用稳重的小圆角较为稳妥。土豆短视频其用户群体较为年轻活泼，因此采用全圆角较为适合。
2.使用合适的状态
在部分界面设计中需要考虑按钮的不同状态的设计，从而提高用户操作流畅度。移动端完整的系统按钮可以分为正常状态、按压状态、禁用状态。
其中，正常状态和加载状态展示的是APP的主色；按压状态在正常态的基础上叠加不透明度15%的黑色#000；禁用状态是设置灰色或者将正常态设置不透明度45%，该状态适用于提交界面中使用，比如登陆注册、转账等。如下图所示：
以京东金融为例，当未输入转账金额时，按钮禁用为灰色，当输入金额时按钮为正常状态。不过随着互联网的发展，宽带速度不断的提高，按压状态慢慢被抛弃，他存在的意义不像以前网络不发达的时候，点击还需要时间反应。
3.提供恰当的反馈
当用户点击按钮时，他们希望界面可以给些恰当的反馈。如果没有任何反馈，用户会以为系统没有收到他们的操作，然后就会重复点击。这种行为常常导致多个不必要的操作。如下图所示：
以土豆短视频为例，当点击关注时为了避免用户点击没有反应的情况，可在按钮上添加加载状态，当关注成功后图标状态改为禁用状态，同时文字变为已关注。
总结
按钮设计看似简单，但是如果想要更好的交互体验，引导用户进行相应的操作，提升产品的转化率这仍是我们需要研究的问题。本篇主要将从按钮功能类型和设计要点两个方面进行归纳总结。
按钮功能类型：主要有行为召唤按钮、表格按钮、标签按钮、命令按钮、悬浮按钮、开关按钮这六大类型。在使用我们需要根据对应的功能和重要程度选择适合的设计。
按钮设计要点：主要有根据产品为按钮选择适合的形状；使用适合的状态；提供恰当的反馈这三大注意要点。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
什么是信息架构？怎么理解用户体验五要素？本文用大量的案例和插图帮你轻松掌握这个基础知识。今天想要跟大家聊一聊关于 UX 和 IA 的话题。其实在写今天这次分享的题目的时候我修改了很多次，为什么会修改很多次？这要从我在 medium 看的一篇文章说起，这篇文章的标题是《6 Tips How to Apply Information Architecture in UX Design》，翻译过来的意思是在用户体验设计中如何建立信息架构的6点建议。
当时读完文章，虽然觉得文章里讲的一些散碎的概念迷迷糊糊可以理解，但这些概念就像盖房子的砖块一样，我完全不知道这些砖块该怎样才能盖成一栋大楼，或者我就站在楼下而因为自己视野有限完全不知道这栋大楼到底长什么样子，所以因为这个原因我一直苦恼于该如何去清晰的表达想要分享的内容，思来想去决定这次分享不能仅仅是我对某篇文章的翻译，想要弄清楚这篇文章到底在讲什么，先要弄明白文章里的知识，当我们了解清楚了这些信息之后再来理解这篇文章就会轻松容易得多，下面就将我总结出来的内容分享给大家。
UX 即 user experience，译为用户体验。
IA 即 information architecture，译为信息架构。
他们的关系可以简单理解为良好的信息架构是用户体验的基础。
我们平时听到了太多关于用户体验的东西，大家都以为用户体验就跟交互设计差不多。我之前确实也是这么理解的，但是最近发现我的这个想法是有些过于片面了。
我们可以把用户体验的工作分解成五个组成要素，分别为战略层、范围层、结构层、框架层、表现层。
它们都是自下而上起作用的，每一个层面都是根据它下面的那个层面来决定的，所以表现层由框架层来决定，框架层则建立在结构层的基础上，结构层的设计基于范围层，范围层是根据战略层来制定的。每一个层面的决定都会影响到它之上层面的可用选项，信息架构只是用户体验结构层的一部分而已。
IA 即 information architecture，解释出来就是合理的组织信息的展现形式。
主要任务是为信息与用户认知之间搭建一座畅通的桥梁，是信息直观表达的载体，通俗点说就是信息架构不仅仅是设计信息的组织结构，还需要研究信息的表达和传递。
这么说也许还有些抽象，举个简单易懂的例子：
我们来看这个商场的平面解析图，通过这个图我们可以很清楚的了解商场的结构，从而快速定位自己的位置还能顺利找到自己想要购买的产品。信息架构对于一款产品来说就相当于商场的平面解析图，就像现在我们看到的这幅图一样，商场的每一层都有相对应的分类区块来指导消费者。试想如果一个商场没有对商品进行有序的分类，那么我们在逛商场的时候就很难顺利挑选出自己所需要的商品，面对各种无序且数量繁多的商品我们一定会崩溃，这样的情况对于男士来说绝对是场灾难，但对于女性来说也许会是一个充满未知探索的挑选过程吧。
但不管怎么说在这里设计师需要做的就是规划好这些楼层信息层级，主要做的工作就是：分类、层级梳理等。简单的说就是规划好每一层有什么商品，同一层商品怎么分布等等信息。
所以在互联网产品设计中：设计师梳理信息架构，其实和刚才说的梳理商场楼层架构的概念是差不多的。
一个好的信息架构一定是会满足两个维度的需求，即用户需求和产品目标。
从用户的角度出发它可以让用户在一定的信息规划下更容易找到自己想要的「东西」。
从产品目标角度来看它能通过「信息架构设计」去教育、说服、通知用户。
所以用最简单的两个字来说其实信息架构就是在做分类。
再回到刚才那个例子想一想，把商场里的商品分类其实对于我们产品而言就是在给我们产品中的信息分类，以方便用户能更好的使用我们的产品，而不会想要把产品卸载，从而使产品达到易用好用想用的目的。就跟我们逛商场一样，当我们能够根据指示顺利买到自己所需的商品的时候我们就不会因为找不到我们想买的商品而失望的离开商场。
那么问题来了，我们该如何进行信息架构分类呢？也就是信息架构的分类方法是什么呢？
这里给大家介绍2种方法，从「产品目标」出发我们可以采用「从上到下」的分类方法；从「内容和功能需求分析」出发就可以用「从下到上」的方法进行分类。下面来跟大家分享一下这两种方法的具体做法。
刚才说了从上到下是以产品目标即战略层出发的分类方法，所以最开始就是先从最广泛的、可能满足决策目标的内容与功能开始进行分类，然后再按逻辑细分出次级分类，这样的「主要分类」和「次级分类」就构成了「一个个空槽」，将想要的内容和功能按顺序一一填入即可。
我们以微信为例：首先根据产品目标将「主要分类」即一级架构分为「最近会话（微信）」、「通讯录」、「发现」和「我」；然后再进行「次级分类」分类，比如「发现」下再分「朋友圈」、「扫一扫」、「摇一摇」等等；最后将相应的功能（如朋友圈feeds、发朋友圈、朋友圈消息等）填入到相应的「朋友圈」分类中。
这样就像是先有了大概的框架我们再根据这些框架往上面加东西的感觉是一样的。
接下来我们再来说一说从下到上的方法：
刚才说了从下到上是由范围层驱动从产品的功能和内容层面出发的，所以我们就要先把已有的所有内容，放在层级分类中，然后再将他们分别归属到较高一级的类别。这种分类方法其实就是在做「归类」。
其实从下到上的信息架构方法也包括了主要分类和次级分类，但它是根据对内容和功能需求的分析而来的。先从已有的资料开始，我们把这些资料统统放到级别的分类中，然后再将它们分别归属到较高一级的类别，从而逐渐构建出能反应我们的产品目标和用户需求的结构。
具体工作中我们可以将所有的功能点用一张张卡片写下来，然后让目标用户参与到信息分类中，并反馈相关分类标准作为我们产品设计师去梳理信息架构的参考。实践过程中，更需要设计师或者产品经理本身有一定的信息筛选、梳理、分类的能力，进一步通过用户测试去检验分类的信息传达有效性。
其实就好像我们日常生活中收纳衣服，我们会根据不同标准去收纳，比如我们可以根据季节分类，也可以根据颜色分类，或者是根据款式分类，每个人都会有不同的分类习惯，所以这里归结到工作中才会让目标用户参与到信息分类中，毕竟我们的产品是服务于用户，所以还原用户使用习惯和使用心理也是我们同样要注意到的，这样可以给我们提供一些有效的分类信息帮助我们更好的做出清楚的信息架构。
当然这两种方法都有一定的局限，从上到下的架构方法有时可能导致内容的重要细节被忽略，而从下到上的方法则可能导致架构过于的反应了现有的内容，因此不能灵活地容纳未来内容的变动或增加，所以在实际运用中是需要我们将这两种方式结合起来灵活运用。
这两种方法虽然有不同的视角但其实最终目的都是让我们的产品易用好用最终达到想用的目的，所以让这两种方法对接、交汇、融合之后得出的结果才应该是我们理想中的产品信息架构。
刚才提到用户体验的5个层级是自下而上对其上面一层起作用的，信息架构位于用户体验要素第3层结构层，刚才说了结构层的设计基于范围层之上，所以这里遇到的影响因素我们还要返回到范围层面去寻找，范围层又包含两个维度，功能和内容，在从范围层到结构层这个过程中我们会遇到很多影响因素，所以把这些影响因素总结起来我们还是要从用户层面（内容）和产品层面（功能）两个维度来理解。
从用户的角度出发，理解能力、操作习惯、目标内容使用频率等等这些都会成为影响因素。
从产品角度来看，产品的核心价值、主线功能、特色功能等才是影响信息梳理的因素。
这两个层面当然也不是完全割裂的，在做信息架构的时候可以先从一个层面出发得出一个结论之后再用另外一个层面去验证得到的答案，然后再不断优化在验证过程中遇到的问题。
不同人会有不同的分类结果，因为根据不同情况我们所需要关注的侧重点会有不同，我们根据不同的影响因素会得出不同的答案。每个人都会得出不一样的分类结果，没有哪个结果是完全正确或者说是完全相同的，就像数学中的排列组合一样，内容越多我们得到的结果就会越丰富，但是这些结果当然不是全都合理的，所以就需要设计师根据自己的经验结合产品层和用户层的需求找到合理的解决方案。我们都知道在产品设计中想要设计出来一款完美不需要迭代优化的产品几乎是不可能的，所以我们能做的只能是结合各方面的影响因素和自己的经验理解一直优化产品让它接近于完美的状态。
现在我们来思考一个问题：为什么微信朋友圈这么高密度使用的功能要放到二级菜单呢？
微信的创始人张小龙是这样解释的：
保持主干清晰，枝干适度。产品的主要功能架构是产品的骨骼，它应该尽量保持简单、明了，不可以轻易变更，让用户无所适从。次要功能丰富主干，不可以喧宾夺主，尽量隐藏起来，而不要放在一级页面。
举这个简单的小例子供大家了解信息架构这个概念，体会一下如何用一个更全面更发展的眼光去看待产品结构这个抽象的问题。
要在 UX 中建立良好的 IA 我们需要特别注意的5个关键点：
所以我们绕了一大圈来看，在 UX 中建立良好的 IA 的5个关键点其实最后还是回归到了用户体验的5个要素。再回到刚开始分享提到的那句话，从上到下表现层是由框架层来决定，框架层建立在结构层基础之上，结构层基于范围层，范围层根据战略层制定。这里每一个层面都是根据它下面的那个层面来决定的，相当于把用户体验要素每一层需要做的事情从另一个维度又解释了一遍。
当然这里要注意一点，这些层级都不是完全割裂的，如果你要求每个层面的工作在下一个层面可以开始之前完成，那样一定会导致你和你的用户都不满意的结果，而相反的，应该规划好你的项目，让任何一个层面中的工作都不能在其下层面的工作完成之前结束。这里最重要的一条是，在我们知道基本形状之前，不能为房屋加上房顶。 不管我们是在这5个层级的哪一层，我们不能忘记的就是要把这些连成一个整体去理解，他们一定是相辅相成互相影响的。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
苏格兰有了第一座设计博物馆，你永远不知道建筑和室内设计的边与限在哪里，它只有用不完的灵感之泉，和看不尽的精彩设计。建筑位于苏格兰东北海岸线上的悬崖，地理位置不平凡，它如何能平凡呢？
博物馆外的材质是预制混凝土，它沿着起伏的混凝土墙延伸，像千万年前的高山被慢慢风化，形成一种自然形状，曾踏上高山环云游九天，曾在无数飘渺的岁月里看世间。当太阳经过的时候，奇妙的光影效果产生，它是建筑与自然的联系。再看看室内的设计，大厅和楼梯的地板使用爱尔兰蓝石灰岩，数百万年前的海洋动植物化石藏在其中，寓意室外那片水。白色混凝土则是像濒临灭绝的淡水珍珠蚌致敬，混凝土里有不少贝壳，二楼和画廊内的地板材质选用产自欧洲的橡木，餐厅和野餐屋的地板和墙面材质是用的竹子，自然的声音在这里每天奏响。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
好看的锁骨千篇一律，
有趣的肚腩duang来duang去。
11月22日，
那一天，是西方的感恩节，
那一天，也是中国的小雪。
歪果仁感恩上帝的厚德与恩赐，
…
我只想感谢我身上的秋膘…
它，比秋裤更便利；
它，比暖宝更亲腻；
它，比集体供暖更懂你；
它，比炭盆烧炕来的更容易。
感谢久坐，感谢外卖，感谢秋膘，
让尽情放浪在暖冬的我，肥而不腻。
创意周报 – 2018年11月第3周
一周热销图片TOP5
NO.5 图片ID：678491803（点击查看图片）
感恩节将近。
这张垂直视角的感恩节餐桌照片中，
果蔬与肉类食物颜色搭配鲜艳，
木质桌面纹路不抢眼。
很适合作为网页大图、banner、
移动端开屏背景和海报背景等用途使用。
NO.4 图片ID：735764617（点击查看图片）
在国内绝大多数人更熟识双十一，
但“黑色星期五”才是世界范围内的购物狂欢节。
在国内的权重虽然不及双十一，
但是黑五的影响力依旧不可小觑。
NO.3 图片ID：1076345054（点击查看图片）
这张智能场景矢量图在8月时曾经上榜一次。
可爱、生动的形象和冷静、严谨的冷色调是让这张图片
从众多固有风格的科技主题画面中脱颖而出的重要原因。
NO.2 图片ID：1071512777（点击查看图片）
这张3D霓虹场景利用简单的几何结构搭建亮部背景，
前景空间的留白倒影也为画面增加了立体感和质感。
是一张通用型很强的背景图。
NO.1 图片ID：1092261245（点击查看图片）
经典的红、金配色，剪纸风格设计。
中国传统的窗框轮廓，左右对称的排版。
可见该作者对于传统题材的理解和用心。
一周热销题材TOP5
NO.5 健身（点击查看该题材）
进入秋冬之后，健身题材屡次上榜。
除了有氧运动的内容以外，力量训练内容增加明显。
不论男女对身体线条的追求越来越以欧美为目标。
NO.4 城市（点击查看该题材）
从后台数据来看城市题材摄影画面在上周的热销，
主要是互联网公司的采购为主。
在互联网企业不断发展的过程中，
以城市为核心、为载体的成长方式需要更多的城市影像
来传递各类品牌理念、产品诉求等信息。
NO.3 圣诞（点击查看该题材）
圣诞题材毫无悬念入榜，
小编目测未来几周内圣诞题材会一直榜上有名。
圣诞装饰主题的照片在上周比较抢眼。
NO.2 科技（点击查看该题材）
本次热销的科技题材中，以太空科技画面为主。
太空技术不但是各国国力竞争的重点项目，
也承载了人类不断探索和追求超越的梦想。
NO.1 金融（点击查看该题材）
双十一之后，人们结束了购物狂欢。
把视线集中在了各种销售行为背后的商业逻辑上。
中产阶级也更关心各种商业顶层的内容。
金融题材内容作为严肃话题一直处在讨论热点。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
蓝蓝设计的小编 http://www.lanlanwork.com
