移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
文章编辑:孔宇SEO
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近发现一些能提高图标细节和高级感的小技巧，今天与大家分享下这几种风格的设计思路，以及需要注意的点。
分享大纲：
顾名思义图标之间有纵深前后关系，通过这样去处理，可以让图标层次丰富，增加设计细节，打破枯燥无味的单色扁平图标。
通常大部分人设计一个图标就直接将图形画出来后，这样就完事了，没有继续深入下去。这样图标看着枯燥乏味，普通了一些。
如上图，将图标在接口处进行细节弱透明度处理，那么效果就完全不一样了。
这里需要注意，一般都是在图标的接口处进行层叠处理，从A到B的一个线性渐变。
下面来看看案例：
△ Atlassian的品牌图标系统
使用建议：运用在面形图标效果会更好些，或者线条粗一些的图标，一般运用在TabBar上面居多。
这种比较好用，将图标进行抽象放大化处理，变成一种图形方式。一般运用在卡片设计上面居多。
左侧卡片上面，图标直接使用描边效果。卡片里面虽然加了一些底纹图形，但是整体效果略显平庸了一些 。
重新将图标进行图形化处理，既能够表达当前含义，同时设计上细节和品质感有所提升。
其他思路延展示例：
当然还有一种类似的思路，可以将图标进行放大化，并进行色彩分割处理为背景，前景放图标和文案等。
如图，我将前面两个思路综合运用，图形化背景和层叠图标。这里的图形希望大家不要乱用，尽量使用图标的图形来演变。
图标通过弱渐变透明处理，其思路有点类似第一个。但是这个方法图标整体带透明度的范围更大。
先来直接看个案例：
这种图标给人比较新颖的时尚感，层次也丰富。
如何处理这种图标？
非常重要的一点，需要注意不识别度问题。如左侧图，图标和背景之间几乎融为一体，看不清主体元素。右侧处理刚好，能够识别出图标含义。
处理时候一定要注意透明度的关系，当然也与卡片背景色有关系。
关于图标设计三个小技巧，可多看几遍，思路比较简单直接。当然最重要的是灵活运用，也可以将三个思路都融合起来去设计图标。
本文只是抛砖引玉，这些图标处理的技法，并不是能适用所有场景。大家还是需要根据自己产品特征，找到合适的突破点去设计。
文章来源：优设网 作者：功夫UX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
成本思维是什么？
今天跟大家聊聊一种思维，不是产品思维也不是交互思维而是：成本思维
为什么设计师要有成本思维，以及成本思维在做我们做设计时对我们有什么帮助。
不仅仅在工作中我们需要思考成本，在生活中我们也无时无刻都在计算成本。成本总是和收益挂钩，所以贝克尔在《人类行为的经济学分析》中提到：人的任何行为都是理性选择的结果，无利可图的事人们事不会去做。虽然这句话不能覆盖所有的人，但是大多数人就是如此。
在夜深人静的夜晚你饥肠辘辘想吃夜宵，你可以选择下楼到周边小吃店就餐，也可以选择叫外卖，前者付出的成本是你需要通过身体行动来交换最后的结果，后者则是花费一定的金钱来代替前者的行动。
那么我们通常会如何选择呢？如果这两种成本有很大的差异，比如需要到很遥远的地方那么除了身体行动成本外，时间成本也会计算其中，所以相比后者成本陡然增大，于是我们就会选择成本低收益大的方式。但是假如你现在极度想要吃那家的夜宵，外卖点餐会特别影响口感，那么你可能会选择前者，这里由于外卖口感和主观意愿影响到了我们理性的选择。
成本决定了收益的效率、大小和方式，小到你伸手拿一支笔你会选择最近的，大到我们人生的投资。成本与收益之间并非是直接关系，收益的大小的不取决于成本的大小，还有风险因素。例如我们在对 UI 界面进行优化，可以选择的方式有很多：
我们的目标是让用户获得更好的体验并且提升业务价值。3 种方式需要的成本高低不同，我们都希望付出最小的成本达到最好的效果，于是我们就会考虑到风险因素，假如新流程用户不会用怎么办，假如新版本导致的数据下滑怎么办，假如行业出了新政策了怎么办等等。所以除了这些成本外也要考虑应对风险的成本。
你看为什么有钱人都会坐头等舱是因为头等舱可以帮他们节约更多的时间，提供更好的环境与服务，让他们产出更多的价值。还有假如你的车坏了，你最直接的方法就是花钱找人帮你修而不是自学自修，因为你将花费太高的成本。
再举一个例子，我们想提升能力，有的人选择自学、白嫖，有的人选择报培训班，这也只是时间和金钱上的成本选择，如果你的自学（白嫖）在短时间收益很大那就毫无疑问帮你省了一大笔钱，但是如果自学很久都毫无效果，那么时间就是你花费的成本，时间和金钱不同的是，时间不可逆。看起来花钱比花时间更好？不是，花钱也有风险，比如课程质量和服务很差，钱没了还学不到，甚至赔上了时间。但如果你选对了，那么收益就远远会大于自学。
1. 实现成本
实现成本指的是想法与落地中间需要付出的行为、时间和其他损耗，例如我们希望提升用户下单的转化率，我们可以选择：
在这几个方案中最低成本是 「按钮设计更明显」，因为只需要调整样式和简单开发就可以实现，但收益并不是最高的，而其他的方案需要更多的角色花费更多的时间来参与，但是收益也不是显而易见的。所以如果你的产品比较成熟，那么我们一定选择成本更低的方案，反之我们会进行更高成本的尝试。
还有比如我们找工作，新公司福利待遇比现在公司好 50%，平台也更大，是否不需要思考直接去呢？当然不是，你需要考虑通勤成本、生活成本、自身成长成本等等因素。如果你 50%薪资涨幅换来的是 996、每天通勤时间 3、4 个小时，不仅仅是时间精力，还有我们的身体健康的成本，我会觉得远远不值，成本太高。
2. 机会成本
我们先来看一下定义：机会成本是指面临多方案抉择时，被舍弃的选项中价值最高的就是本次决策的机会成本。举个例子，比如当前版本我们有 1 个开发一个设计一个产品，我们面临着两个需求，但是资源和时间只够我们做一个需求，这时候 2 选 1，那个被抛弃的需求所拥有的价值就是我们所选择的那个需求的机会成本，相当于我们放弃了那个需求所拥有的价值。
再通俗一点讲，我现在有 100 万，面临着两个选择：1.银行理财，年收益 4%，40000. 2.做生意投资，年收益 8%，80000，那么就相当于我花费了这 4w 的潜在成本获得了 8 万的收益。
3. 边际成本
边际成本的理解很简单，我们可以理解为我们每付出一定的成本收货的收益或者每收获 1 个单位的收益所付出的成本。用一个通俗一点的例子来讲，比如你一共学习 10 天，第一天学完你考了 30 分，第二天学完你考了 50 分……第8天学完你考了94分，第9天学完你考了98分第10天学完你考了100分，花费的单位天数一样但是每次增加的分数却越来越少，收益也就越来越少。
在做产品设计的时候，我们往往会有一个板块叫为你推荐，比如微信阅读中的这个板块，它一次提供了用户 6 本书，虽然算法可以算出有许多书，但是这里每次只提供给用户 6 本，是因为涉及到了边际成本，少量多次提供能够让用户更聚焦，更快的选择好书本进行阅读，每多提供几本书，用户选择阅读的时间成本就会越大。有同学会问：那我只给 1 本不就好了，用户就能马上读了，何必要推荐 6 本？
我们如何保证那一本刚好是用户想读的，没有办法做到如此精准，如果每次只推荐一本书，而用户尝试了几次都不喜欢，他们就会放弃，所以这里就会选择一个临界值，比如我们可以选择每次放不同数量的书，根据数据判断在给用户几本书的时候用户阅读转化和选择时间成本更低。
4. 体验成本
体验成本也是我们设计师需要时刻关注的，俞军老师在产品方法论中提到，用户价值=新体验-旧体验-替换成本，体验成本可以包含很多信息，最主要的就是认知与交互的成本。
认知成本
如何降低认知成本可以从以下这些点进行优化
1.文案
文案的设计要求是简单易懂，避免产生歧义，之前给大家举过的一个高德地图导航在到达目的地之后给出一个“原路返回”按钮的分析，大家可以再思考一下，是否会产生歧义。还有确定、确认大家是否知道怎么用呢？
文案也需要有情感化，避免生硬、带负面情绪的问题等等。
2.样式
视觉最为直观，一个按钮一个控件的样式是否能满足用户的心智和预期，将会影响用户的认知，例如以下的几个按钮，出现在不同场景用户会出现一系列问题：为什么我点了没用？为什么还不能点？我到底该点哪里？
还有你的品牌是否识别度高，也决定了用户对你的认知，最近小米花了百万请大师做了新的 logo，在视觉上更加圆润，在圆 logo 的基础上做了很多的微调，实际上也是避免了太大的 logo 变化导致品牌认知成本的提高，认知成本一旦太高，品牌市场的敏感度和曝光度还有各种替换、衍生、配套的隐性成本也会大大增加。所以这一举动是明智的。
3.信息
比如我们希望新用户去关注一些大咖、kol 获得更好的推荐，但是如果我们只是将推荐者的头像和昵称给新用户，那么这个策略就是失败的。因为我们没有考虑新用户的认知：1. 我为什么要关注她 2. 关注她我能获得什么。所以仅仅依靠头像和名字在这里对用户的认知是没有任何帮助的。
行为成本
我们通过利用肢体来和媒介进行交互，目的是完成某项任务。其实只需要你抬手，那么就是产生了成本，只不过某些成本是固定的无法减少的，比如你要去骑车那就需要去解锁，如果没有锁车可能就会被偷走，这是出于安全考虑。
行为成本在具体数字产品中我们可以发现很多，例如你只需要将手机拿起，屏幕就会亮，相比于找到解锁键再按一下成本就低了很多。而亮屏后不直接解锁是为了防止误触或者隐私，所以还需要通过指纹或者人脸进行识别。
例如几种不同的验证方式，利用滑动拼图来解锁和输入相关验证码解锁，前者比后者的学习成本和操作成本都低。
在移动端我总结了几个减少交互成本的方法，不妨来看下：
soul 音频处理；日期选择；iPhone 底部横条切换窗口
游戏昵称随机；股票买入数量
这里也有同学会问，既然都可以代替，那滑动能否代替输入？必须也是可以的，例如 iOS 自带的计时器中选择时间的控制器，还有闹钟设置，这里要注意的是，滑动代替输入是要基于本身该信息是由范围内并且不需要精细化控制的，比如房价筛选，房价本身量级很大，用户筛选也不会精确到个位数，在这里用点击和输入会比滑动的成本更低。
反例就是音量、明暗控制，大家可以感受一下输入在这里的鸡肋。你需要精确控制选输入，需要大致的范围选点击，非常模糊的感受选择滑动。
例如我们在开车进行导航的时候，打字输入非常不便，于是加入了语音输入。还有在微信进行账号切换时，我们可以选择利用语音输入数字来验证身份。
对于新用户操作复杂功能和界面的时候，提供更多提示能够很大程度上减少用户的操作成本。
在 iOS 或者安卓的手势控制中，我们会发现又一些常用的手势比如：点击、拖动、轻扫、双击、缩放，这里我们可以定义为一级手势。还有一些不常用的比如：重按、长按、三指滑动、三指缩放等，这些手势的认知成本和行为成本都很高，定义为二级手势，不建议频繁使用。
设计师在日常工作中接到的需求繁多，无论是在做需求之前还是在思考设计方案的时候，成本思维可以帮助我们很好的规避一些问题和风险，我们追求控制成本使收益最大化。所以学会控制成本的设计师不仅仅题可以提高个人工作效率还可以帮助公司创造更多价值。
文章来源：优设 作者：应骏
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：随着公司和业务的不断发展，原先的系统不一定适用于现在的场景，因此需要进行升级改造。作为设计师，我们是如何系统性地去为业务带来更多的体系化的价值？本文作者将从五个方面进行分析，与你分享。
项目背景：
当公司的发展规模到一定程度时，考虑到信息安全、持续采购成本与相关风险，企业会采取自研的方式来实现部分协同工作软件的自产与自用，本文将以内部目标管理系统为例，阐述我们是如何系统化的做企业系统设计改版？
什么是OKR？
OKR，是Objectives 和Key Results 的缩写，即目标和关键结果，它是企业进行目标制定和过程管理的重要手段。采取OKR的管理方法，将公司目标层层分解到团队，部门再到个人，在各个层面贯穿和统一起来，以帮助实现目标达成。
改版的契机是什么？
改版不是设计说想改就能改，在做新的OKR系统之前，之前是通过「绩效系统」来进行目标管理和绩效评估，支持简单的制定和结果的评估的使用，因系统操作流程、界面体验、业务场景已经严重的影响到目标管理的效率和效果，具体体现在几个方面：
总之，工具的体验已经是严重影响公司员工目标管理的一道障碍，所以如何将整体的系统操作体验提升起来是设计急需去解决的问题。
那么，确定有问题需要改，作为设计师，我们是如何去系统性的去为业务带来更多的体系化的价值？
理清业务目标，制定设计策略，是系统性改版产品的前提，在实际工作中设计师很容易被产品的原型、对产品的描述蒙蔽，只有非常清楚的理清业务的目标，才能制定系统性、合理的设计策略来支撑业务，通过专业的设计方法来助力业务结果的达成，在这个项目中我们是如何做的呢？
对焦业务目标：
OKR系统的改版项目最开始是高层的诉求，提的业务要求很简单“让大家用起来，目标管理起来”，那么如何让大家用起来、利用系统将目标管理起来是当前需要解决的的问题。
“让大家用起来，目标管理起来”需要去解析的是，为什么旧的系统大家用不起来？为什么目标管理有这个管理机制，但是没有依赖于系统管理起来？
制定系统的设计支持策略：
设计师同行可能会问：不都是做需求吗，有啥做啥，有啥策略可言？如果是以这样的方式来做设计改版，很有可能会被业务方牵着跑，即便是知道对方坚持的不是很合理，但也没有办法来推动这件事往更好的方向发展。
理解用户，溯源本质问题，是最设计环节必不可少的环节，通过对用户的深入研究，挖掘本质的共性的问题。在这个项目中，我们通过定量+定性的手段获取用户的心声：
定量问卷——获取用户的基础的问题：
前期在公司内部针对普通员工、MGR、HRBP、高层4种角色，调研了100多位内部用户的心声，将不同岗位和职级对于绩效系统的问题真实反馈收集汇总。
定性访谈——深入获取用户的诉求：
因为系统面向对象是企业内部员工，所以针对每个角色都做了访谈调研，深入的挖掘他们对当前的产品使用问题，并将问题按照核心流程中所涉及的角色在不同阶段所需的操作和流程进行了梳理，整个阶段拆解为：制定阶段、执行阶段、结束回顾三个主要阶段，拆解每个角色在这些阶段中的触点和机会点。
结合问卷、专访谈的分析和梳理，筛选出目前系统的核心问题：制定流程、对齐关系、过程跟踪、信息触达。
在前面已经初步发现和定义了问题，这么多分散的问题如果平铺出来可能会吓到产品和研发，所以接下来需要将其系统化的变为整体的设计方案，我们需要将其串联成完整的场景，然后逐步击破，我们是如何做的呢？
重点模块及争议点的讨论：
在场景分析前期，我们设计内部针对“核心阶段”、”对齐关系“、”权限管理“、”全员OKR“进行了讨论和范畴的界定，对以下问题进行了讨论：
梳理清楚角色关系图，有助于多方去理解各个维度的关系：
结合业务需求，赋予体验价值：
OKR系统虽然最为一个内部管理系统，我们也逐步在设计侧去从“具有功能价值”往”“赋予体验价值”去发力，将更多的“能”和“可以”转变为“方便”、“简单”和“轻量化”等，来提升各个流程阶段中的体验，比如：
具体到串联场景怎么去理解？
一个新的OKR周期会经历三个主要阶段，每个阶段会涉及到多个节点，在每个一个节点上去思考发力方向：
为了便于理解，将关键的场景提供了比较简短的描述，这个描述就是从旧到新的过程，后面的设计展示也是围绕着这些内容进行展开，具体如下：
1）制定阶段，包含写、看、评、管
写：轻松撰写，高效共创
看：简单查看，便于跟进
评：轻量互动，便于记录
管：高效审核，随时跟进；条条对齐，事事关联；
2）执行阶段，包含更、改、推
更：随时更新，条条追溯
改：慎重修改，条条有据
推：合理推送，终端打通
3）结束回顾，包含查看、追溯、复盘
查看：快捷查看历史周期
追溯：记录明显标记，事事追踪溯源
复盘：复盘总结，目标达成
经过前面一系列的调研、分析总结，设计围绕着3个阶段的关键结论进行展开，即OKR制定、执行、结束三个阶段。
（因每个阶段篇幅较长，方案设计部分仅展示部分页面的思考过程和页面展示）
在写OKR时，设计让撰写轻松、可以高效的共创，主要通过以下3点：
1）清晰的页面结构
让用户能明确的感知到系统的整体结构是有规律的，可以简单被理解的，即左边全局控制，右边内容展示左边导航全局控制着写、审、查、通4个功能
右边内容展示跟随着导航内容变化
2）O与KR的录入快速切换
为了让用户可以沉浸在一个页面写内容同时，还能纵览全局结构，在写OKR的页面增加了OKR大纲的锚点切换功能，便于多个KR之间的切换，避免因页面过长带来的翻阅困难的问题。
3）减少步骤，减少跳转
减少步骤，减少跳转有很多场景都有涉及到，比如：
查看和跟进属于第三方的协同伙伴，为了让伙伴更轻松的跟进，做了2个设计处理：
在管理者审核下属员工时，简化了大量信息，前置待处理信息以及待处理的关键信息，让管理者比较直观的知道有哪些人提交了，哪些人修改了，哪些人需要重写等等。
为了让员工便捷的进度管理，在OKR管理页面以轻量的临时弹窗，来方便用户快速发起和输入内容，每条更新记录同时也能同步给关联方。
慎重修改、条条有据主要是满足管理者和关联管理诉求，OKR可以在中途被修改，但是修改的结果是需要明确告知相关人，在增加、删除、减少的内容上，以特殊的示意对比来记录依据，同时也督促发起方能审慎修改。
OKR的消息推送在整个阶段中占据了非常重要的信息触达的作用，在整个OKR的制定阶段和执行阶段不可或缺的部分，而消息推送过多将会导致信息冗余，那么如何合理进行推送消息也是重要一环。
我们把消息类型通过两个维度定义消息的优先级：“重要性”和“紧急度”，通过四象限法则，我们拆出来了：
通过此模型和产品确定了每一个消息类型的所在位置，且清晰表达的了每个消息应当的位置。
每个渠道都有相应的特点，我们结合渠道的特点去确定不同优先级的消息应当推送的渠道。
最终在实现方案上，实现了有层次、分场景的消息推送方案，尽量做到少打扰用户同时，可以及时了解重要信息。
桌面端是主力生产平台，通常是多窗口多任务，键鼠操作精确高效。在专注姿态下，我们可以尽量安静地展示更多常用功能，让用户在一个视图中即可完成相对复杂的任务。同时在列表页中，更大的空间让我们可以把目录树展开，减少导航跳转。
手机端的特点是专注当前任务。可以通过信息降噪，加强对比来让信息传达能明确，帮助用户完成单个任务；而清晰的导航可以避免小屏幕上页面频繁切换所带来的导航负担。
1）最终实现方案
结合终端的差异，把移动端定位为：侧重便捷快速的查看和沟通，同时将重编辑的场景在移动端去除了，更加侧重于查看、互动和进展更新的低成本操作的场景。
2）中途验证效果，确保上线的效果
在设计的过程中，为了进一步的验证设计合理性和易用性，针对角色代表进行了8组可用性测试，最终普遍反馈新版的操作体验更好。
针对了项目的设计效果落地，设计除了在过程中不断的跟进产品和研发提出的问题，在测试阶段提出效果走查文档，不断的打磨细节，才能保证最终的设计效果，当然付出总会有回报，新版的系统上线除了制定、管理、查看关键模块的UV和PV的业务数据达到了比较好的效果外，在新老版本的满意度和流程操作犯错率上也得到了一个比较好的验证。
在OKR系统项目的整体流程中，针对产品大改版的时候，我们设计需要前置思考业务，全局看待产品，系统性的去思考和设计，助力业务结果达成的同时让设计价值更好的体现出来，最后再回顾下整体流程：
文章来源：人人都是产品经理 作者：酷家乐用户体验设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在工作中常常被问到如何表达讲述自己的设计，为了让自己的设计有理可依，对接上下游汇报工作的时候，总结以下一些方法和观点，帮助不知从何讲述自己设计的人一些语言技巧。
以下仅是个人观点，用作探讨交流，文中所有举例均为本人工作设计输出。
设计师能做出好的设计，却缺乏系统化的语言包装，“如何讲设计”不该让它成为难题，做一个有产品思维的设计师，让你的设计以理服人，我们要不止停留在视觉表层，更要从多纬度看待产品设计，本文将从以下三点简述：01.产品设计的五个层面，02.讲述设计的流程，03.关于本次总结
做好产品设计的第一步，是了解产品， 要对于产品的需求如何确定、产品定位如何决定有一个基本的认识，在产品常识里面最重要也最常用的就是产品设计的五个层面，也简称用户体验五要素——
作为UI设计师，所处的视觉设计是表现层，是确定产品的最终形态，因此也处于产品设计的顶层（能被看到），是一个具象画的呈现；其次，往里推框架层，是确定产品外观，将界面信息和导航设计有序归类，让用户使用或者理解；结构层是为用户设计一个结构化的体验，将零散的元素转化为有序立体的空间；范围层确定产品的功能和需求；最后战略层是确定产品目标和用户需求；底层逻辑结构决定上层意识形态表现，因此在设计前我们要知道产品是属于洞察阶段，设计中是属于产品设计解决方案阶段，整体的产品设计是一个概念通过无数个层面的努力，经过时间，转化为具象表现的过程，所以我们在完成一项设计时，应该讲述一个完整的设计思路 ，不要让自己的设计思路仅停留在表面。
整个产品的设计产出是一个抽象到具象化的过程，设计的前期属于产品洞察阶段，这个时候一般由团队的老板领导结合当下市场需要，有用户的需求就有商机，想出产品大致的方向（战略层）然后通过产品经理整合梳理高层的意见确定产品大致的功能和内容输出原型（范围层），交给交互设计师优化产品细节逻辑和信息具体框架，经过研发评估能够技术实现产出交互稿（结构、框架层），这里已经过渡到设计解决问题执行阶段，最后是给到界面设计师美化视觉产出高保真（表现层）。
也就是到我们自己设计输出之前要经历这么多，如果能在讲述自己设计的时候，提前去了解这些，那么设计内容就不愁没法儿讲，光是阐述自己的设计思路就可以讲出一个故事，这也是为什么现在很多品牌卖货都开始营销产品背后的故事由来。我们设计能做好，也要会用语言推销自己的设计成果。
设计是对于某件事精心准备的过程。好的设计作品，应该拥有完整的设计流程，因此我们在讲述自己设计作品的时候，有一套完整系统化的方式是非常有效的。完整的设计流程包含以下4个步骤：
第一是我们需要去了解设计的需求背景，知道大概的方向——
来源（简单理解就是谁提出的问题）需求有可能是你的老板、你的产品经理、或者交互设计、或者视觉上的问题···
背景（笼统一点，就是这个需求是新需求还是原来有然后进行改版优化）需求的基层性质是什么，原本调性是什么，我们要做什么样的产品···
目标（目标一般都是需要解决什么问题）搞清楚为什么做这个需求，能解决什么痛点，不做无用功。
谁提出的问题，是新的需求还是旧的问题，或者我们要解决什么？围绕这几个方向将你的设计概述出来，会让非专业的人也能听懂你做了什么，举个简单的例子，我们公司后台一个很小的产品bug需求，往往这种需求就是产品经理的一个截图和他标注的两句话——
然后你完成了这个需求单，在传达给非产品经理以外的人的时候，你有可能是以下转述方式——
毫无疑问，你就是将需求者的意思一字不落的转达了，但是对于其他的听者来说，你的转述平平无奇、毫无意义，甚至都没有印象你做了什么，所以你应该讲清楚这个需求的背景——
设计需求来源是谁，原本属于产品哪个模块（来源），他原来功能是怎么样的，界面上展示的结构哪里有问题（背景），视觉用了什么样的方式改成什么样，解决了什么痛点（目标）
讲清楚谁给的需求，需要解决什么问题，是在原来的基础上不变动逻辑的情况下增加了什么达到了什么目的，才让你的叙述更完整，听起来更有逻辑。如果是一项新的需求，没有背景，那还得从设计分析说起，设计分析就是让你更专业的去做事，设计分析分为——用户分析，设计目标，和设计手段三个要点：
首先用户分析就是，分析你做的东西给谁看，而用户又分为群体用户和独立用户，在c端常见的就是独立用户，他们通常不定性，且有很多特征；在b端，目标用户一般是群体，他们大多数是有场景特性和行业特性，针对独立用户和群体用户，我们得出的用户特征、基本信息、需求结论也是不一致的，所以我们应该结合产品的调性分析一下我们做出来的设计究竟给谁看给谁用。常见的用户分析方法有：用户画像、用户访谈、问卷调查、焦点小组、眼动测试、用户反馈以及大数据分析，这些方法中最简单的是用户画像，就是举实际的例子列出真实用户的特征信息及使用场景。B端用户分析方法常用大数据分析和用户反馈，这两种方式通过对接需求的上下游就可以得知。
通过用户分析得出需求结论，满足需求就能达成设计目标——
设计目标结合卡诺模型来分析，卡诺模型—反应产品性能和解决用户需求的满意度的一种非线性关系，具体想了解的可以自行百度，站在巨人的肩膀上我们看得更远。 卡诺模型具备4种属性 ：1.必备属性：满足这个需求，用户满意度不会上升，但不满足这个需求，用户不满意会大幅度降低 ；2.期望属性：提供个性化需求，用户满意度会上升，不提供此需求，用户满意度会降低； 3.魅力属性：用户意想不到的效果，提供此属性，用户满意度大幅提升，不提供也不会降低 ；4.无差异：无论提不提供，用户满意度都不会改变，根本不在意；因此在做需求的时候我们应该尽力满足基本需求和期望需求，而可有可无的需求尽量不去做，降低效率。幸福需求是不容易达到的，如果能满足是非常棒的～这里就像是满足了设计心理学的三个层次——本能、行为、反思。
接下来是大家都熟知的设计手段，适当的讲一些述专业的设计技法，用不同的手段去实现的主画面，最后达到完成设计目标这样的结果，会让你显得更专业。设计的手段有很多种，这里主要讲述常用的三种，构图排版（采用什么构图方式，为什么这样构图是因为什么设计原则）、色彩运用（为什么使用这个颜色，因为这个颜色给人的心里感知是什么样的）、设计风格（采用什么风格最贴近产品调性，为什么用这个风格），但是讲设计时一定要记住产品的调性，不能偏离产品本身，不要盲目套用绚丽的技法，否则是不合适的。
很多时候面对非专业需求方收稿时，可能看到如下话语————
（心里是不是xxxx····“万马奔腾”，用个文明点的词）
非专业人士无法理解这二者的区别，他们认为他们的设计手段能达成设计目标，而作为专业设计师的我们就应该引导对方说出设计目标，再用我们专业的手段去满足对方的目标，去实现减少改稿次数，而不是让非专业人士去指导专业人士修改设计手段。分清这两者的区别，我们就可以在设计引导中更加主动。用设计分析的方法来讲述设计，举个例子——
会议管理——会议预约移动端优化，因为这是我们原有产品EKP里面的模块，PC端和移动端都有，因此用户可能是群体也可能是个人。所以针对独立用户和群体用户都做一个用户画像，得出他们的一些需求结论，然后目前幸福需求是没有的，纯属个人建议，日后如果有此功能，想必用户的满意程度也会大大提升。
概括一下已完成的整体主要页面，分析设计目标：
头部属于流量量较高的区域，采用卡片式设计，将会议内容置于此处，作为页面信息关键层，采用左对齐方式排版，突出会议标题和时间提醒用户。
通过不同的颜色标签，区分参会人员状态——
待进行未有操作反馈，选用橙色，属于可以持续进行并有明显提醒作用
已做反馈属于成功操作，选用已有用户认知心理的绿色
已知信息拒绝参与，是不太重要的，属于不再进行的阶段，选用灰色
接下来是设计作品的产出过程，一般情况下不可见的过程，为什么要去讲， 因为一个东西从无到有是很不容易的一件事，如果能讲述过程，就可以引燃情绪共鸣，让别人记住，让自己的设计作品也能有始有终——
设计过程一般分为四个阶段：初期阶段、中期阶段、最终定稿；具体的关键词和描述可以通过以下方式提炼出来，这里就不做详细说明了。
拿运营宣传来举个例子，我们公司中秋节月饼礼盒包装主视觉设计——
整个过程应该是有一个系统化的说明的，省略为写字的地方是我们可以插入的具体图片和过程，步骤差不多就是上述这些，可以有最初阶段的头脑风暴-提取关键词-清晰定位到中期阶段的团队合作—风格拟定-精选方案-细节刻画以及和物料方沟通对接的打样确定工艺等等过程…再到最后定稿的体验还原-问题优化…主画面的诞生是不容易的，强化这种过程参与，让不被看见的事也能展现。如果实在不好记录，你可以从一开始就截图你绘制的过程——
上图是用PS截图，再用时间轴将每一帧动态循坏播放，导出GIF然后截一张不变的底图合成就可以了。
最后是数据验证阶段，这个是设计落地的直观证实，包含主观认可和客观数据，具体内容就是通过用户或者专业的人士反馈给你设计落地的好坏，来判定你做的是否优秀成功。通常这一块的数据决定你验证你前面所有的过程，只要按照该流程认真做了，最后效果通常不会太差，如果出现很大的偏差也往往是意料之外的，因该寻求团队一起解决，不是某一个人的问题。
根据以上最后我们总结，好的设计就是满足以下4个方面：好看，好用，好记，能实现。设计师要考虑的维度不仅仅在视觉层面，什么是有产品思维的设计师，就是在执行时候要考虑上下游不同职能的工作内容，如果你的设计不能实现，再好看也是白费功夫的～从产品交互视觉多层面谈设计，会让你的设计包装显得不那么单调，系统化的方法总结到此，不足之处多多包含～谢谢你的阅读！
文章来源：站酷 作者：YiVi_eleven
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
尽管在工作中对于设计方案提出建设性和针对性的评价确实是非常难的，但不得不说，这一项技能对于每一位设计师，乃至每一位与设计师配合的职场人，都是非常重要的。
「只要我们付出了百分百的努力，最终结果一定会比第一版的设计要好。工作中，以专业的手段直接面对要解决的问题，切莫把过多的个人情绪带到工作中去，就像马东老师的米未传媒贴在墙上的标语：“有话直说是一种能力，也是一种责任。」
从业这么多年，合作过的产品、运营、市场、研发、测试形形色色，但是对于设计师专业度的评价，每个人都不一样，进行综合分析，我认为，最核心就是一下3点：
「但这里我要说的是，你自己必须做到足够专业，以下的这些是基于你给出的设计方案确实是经过认真思考后的，否则被业务方怼了也是活该。」
PART 01
在进行设计评价时，不要单纯的只是描述”我觉得…“、”我喜欢…“或者”我不喜欢…“，这无法真正解决问题，相信很多设计师也比较反感这样的评价。
我们需要深挖的是：
1、你对业务目标了解吗？该业务是用什么样的策略给目标用户带来什么价值，以及是如何实现盈利的？
2、你对设计目标清晰吗？设计师是通过何种设计策略来给用户带来价值从何实现业务目标的？
3、你有全局观吗？就是这样的设计方案是否是在现有的技术限制、用户认知约束、时间周期等等诸多条件下得到的结果？
如果没有以上，非设计师的朋友们直接指点界面颜色不好看，排版不合理，不够高大上等诸多评论，其实是很不负责任的。希望大家不要做坐在设计师背后指点江山的神。
PART 02
提问有助于设计师和业务方更好的沟通和信息传递，但在提问中不要夹杂感性的评价，而多用理性的思考。比如不要指着某个东西说”这个按钮太大了“，而要问”你为什么选择这个尺寸的按钮？“通过这种方式，你可以得到更多的背景和每个设计细节背后的原因，并感受到设计师是专业的，而不是一拍脑门的。
说服心理学中有一条铁的定律就是：”没有人喜欢被改变“。当你对我的设计指指点点的时候就证明我可能错了，为了捍卫我的设计我会非理性的做出防御性的对抗，感性的情绪表达只会让双方彼此矛盾升级，理性的表达和提问会让人更愿意交流。
所以，学会提问，比提出问题更重要。
PART 03
评价者的品味对于设计方案来说并不重要，也不应该成为讨论的重点，就像我上面说的”我觉得…“，此时你可以发出黄晓明的动图：”我不要你觉得，我要我觉得…“
不要发表“我只是个人不喜欢，最终还是看你们设计师的”这样的评论，说实话我每次听到这样的话都很火大，你都没想清楚这样不合适的理由，你跟我说什么？难道只是为了反对而反对吗？
下次如果遇到讲废话的需求方，可以直接回复：如果你不能推荐一种更好或不同的设计方案，那就别说了，不要浪费彼此的时间。
另外就是，建议必须清晰明确且可行，如果让设计师误解了你的意思，那可能比你什么都不说更严重，因为事态可能会朝着完全相反的方向发展，因此详细的阐明论点，也是一种职场沟通的能力。
PART 04
收到反馈后，首先，我们要分清哪些反馈对我们有用，哪些其实只是表达者的主观感受，把有用的吸纳进来，并做好笔记，先自我情绪冷静下来，不要急于去修改调整设计方案，多多思考流程和链路的问题。
很多设计师可能是出于多年的工作习惯，喜欢将别人的评论（尤其是有经验的设计或者领导）视为行动指南，在没有经过仔细思考的情况下采取和实施他们的想法，这很容易把自己变成一个提线木偶，久而久之彻底失去了设计师原本该有的创造力和反思能力。
设计是在美学与功能、解决用户问题与业务之间平衡的探索，设计师的方案也是在用户、公司也利益之间寻求平衡，没有一个永远正确的决定。每个人都会犯错误，每个人可能都有其背后的一番道理，无非是看问题的角度不一样而已，不要纠结于某一个细节，也不要执着于某一种特定的方案。
提升自己思考问题的视野和维度，知道如何拒绝毫无意义的反馈和评价，当你从界面细节跳脱出来看问题时，离一名真正的专业设计师就不远了。
文章来源：站酷 作者：设计情报局
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“作为用户体验设计师，我们的使命之一就是如何以最正确，最有效的方式将产品意图传递给用户。”这也是行业中大家的共识，关于设计原则也有很多，今天想给大家介绍的是 Don Norman 在《日常事物的设计》中提到的七项基本设计原则，我们将套理论付诸实践，然后通过测试，验证和迭代来提升设计体验。
PART 01
诺曼（Norman）的七项基本设计原则可以帮助确定一系列问题的答案，这些问题从目标开始，然后通过将结果与预期进行比较后结束。这七项基本原则是：发现、反馈、概念模型、示能、意符、图示、约束条件。接下来我们将从一个实际问题出发，来谈谈以下设计原则改如何运用。
我们的第一个问题是目标—我们实现目标的动力。举个例子来说：
「目标：“我们需要找到一双新的，合脚的，确定颜色和尺寸的跑鞋。」
下一阶段是计划如何通过发现和评估我们的选择来实现我们的目标。
假设我们选择了耐克网站作为首选购物平台。当我们初次进入网站，我们会看到很多不同的选项。
「发现模块」提升了选项的可见性。清晰的导航，突出的焦点和自然的视觉层次使其更容易发现和理解。
清晰的导航有助于我们轻松找到并了解网站的主要产品。但是，移动端的体验实际体验效果并不佳，因为汉堡导航很容易将信息遮盖。
耐克网站的产品详细信息页面通过清晰的导航，突出的焦点和自然的视觉层次结构选项更容易被识别。不过，您可能会争辩说，这些复杂的信息干扰到 “添加到购物袋”的这一关键行为。
焦点是吸引人视觉的主要区域，其中包括引人入胜的图像和视频，描述性标题以及清晰的号召性用语，例如“了解更多”和“添加到购物袋”。
以上所有组件均作为视觉层次结构的一部分进行排列，以帮助我们按照接收到的重要信息的顺序进行浏览。它们的位置也符合最佳的阅读模式——例如，导航栏，过滤器控件和跑鞋结果分别组织在类别页面的顶部，左侧和右侧。
其他设计原则（包括概念模型，示能，意符，映射和约束）也可以帮助我们弄清楚如何使用该网站。
许多网站功能中都存在概念模型，尤其是用于对结果进行排序和过滤的导航和控件。这些熟悉的设计模式告诉我们它是如何使用的。例如，我们知道通过过滤器将有助于优化筛选结果。
功能可供性应用于各种网站组件，例如按钮，选择框和手风琴导航，使我们可以了解如何控制和使用它们。但是，某些能力依赖于意符来阐明预期的操作。
意符被广泛用于传达应在何处执行操作，尤其是示能较弱的扁平化按钮。一个简单的描述（例如“查看更多”或“添加到购物袋”）足以告诉我们预期的操作。
映射向我们显示了对象之间存在关系的位置，例如产品详细信息页面上，当我们选择适合的款式和颜色的选项时，我们会看到可用的尺寸和价格会与之对应产生变化。
约束限制了可以使用信息的位置，地点和时间，以减少杂乱并降低认知负担。例如，导航最初仅向我们一级导航。
购买工具为我们提供了可能选择的选项序列的概念模型。禁用状态还用于将我们的操作限制在只能选择有库存的商品的范围内。
了解了如何使用网站后，现在我们可以指定要执行的一系列操作。让我们在网站上继续进行以下活动：
「行动：购买时需选择产品规格，包括合身性，颜色，尺寸，然后将其添加至购物篮。」
概念模型、可发现性、映射、约束、示能和意符可以帮助我们确定操作顺序：选择合适的→选择颜色→选择尺寸→选择添加到购物袋。
在某些情况下，某些选项（例如大小和颜色）可能缺货。如果产品不可用，则禁用按钮状表达了操作行为的限制，只能选择有库存的商品，这是非常必要的。
不同的控件交流其功能，用法以及如何向我们展示其效果
现在，我们需要实际执行我们选择的一系列动作。示能，意符和映射将帮助我们执行操作。例如，按钮的感知外观使我们想要按下按钮，标签告诉我们控件的功能，而映射使我们能够看到刚刚操作的效果。
一个简单的确认消息会通知用户发生了什么，并提供一些其他选项的可见性
一旦执行了选择的一系列动作，我们就需要收到有关请求的信息，这就是反馈。
购物车确认消息为我们提供了有关所选跑鞋的有用反馈信息，包括名称，颜色，尺寸，价格和数量。同样还提供了成功的信息和一些其他选项。
看到这些变化之后，我们现在需要将其转化为有意义的东西。反馈对于再一次为我们提供足够的信息来确定我们的行动结果至关重要。成功信息——“已添加到购物袋”和绿色的勾号图标说明发生了什么，其他选项表示我们现在已选择购买这双跑步鞋。
每个粉丝都希望看到的确认消息–真是令人高兴的时刻！
最后一个问题询问了结果是否符合我们的期望。我们可以将结果与目标进行比较。
到目前为止，我们已经使用了所有七个设计原则来确定问题的答案。现在，反馈将能够确认我们的行为是否带来了成功的结果。如果结果不是我们期望的，那么我们至少需要了解发生了什么以及下一步该怎么做。
反馈可以诱发积极和消极的情绪。如果结果不是我们所期望的（例如错误），则它们可能会引起混乱甚至愤怒的感觉。但是，当我们实际执行的动作可以实现我们的目标时，我们将感到非常喜悦！
例如，在耐克移动应用程序 SNEAKRS 中，客户可以参加抽奖来购买限量版鞋。紧张的 30 分钟倒计时结束后，获胜者会收到一条特别的消息，确认他们的抽奖结果，这为他们的经历增添了很多乐趣。
「结果：看到此消息给我带来了真正令人满意的体验——幸运的赢家。」
PART 02
应用设计原则进行 UX 设计是非常表层的。当人们在使用该产品时，我们需要了解他们的想法，感受和看法。他们可以使用吗？他们觉得有用吗？他们会再次使用它吗？
比设计原则更重要的是与真实用户进行测试，以了解他们对设计的行为和态度。然后，可以利用丰富的用户见解来改进产品。
我们若能够越早且越频繁的测试我们的想法，就能够越早的迭代产品，以更快的速度满足用户需求以及帮助实现业务目标。以下是一些流行的研究方法的概述：
远程用户测试是非常快速与灵活的，并且非常适合于早期经常需要设计验证的情况。参与者使用屏幕录制软件收集有关设计的反馈。远程用户测试为获得更多的洞见提供了便利。
面对面用户测试，就是我们常说的线下用户访谈，这种测试要适量，通常会有一个主持人。在研究期间，主持人可能会根据问题提出任务或新的活动。这种类型的研究比较花费精力和时间，但与大多数方法相比，它可以为您提供更有价值的见解。
游击队测试是指调研团队无拘无束地采访随机人群。您可以选择某些地点来确定适合您所测试设计的受众特征。迄今为止，这种研究方法是比较节省成本的，尽管您可能需要考虑向参与者提供少量奖励，以感谢他们的时间和努力。
定量测试涉及对大量用户进行研究。典型的测试包括卡片排序，树形测试，点击测试和超时测试。这些研究可能无法为您提供用户做出某些决定的原因的答案，但是它们可以帮助确定点击次数，思维模型和完成任务比率的时间。
PART 03
一旦用户测试有了结果，就可以对结果进行了。这可能需要一个漫长的过程，即整合意见，将见解归类并提出新的改进建议。
研究建议可以帮助确定要解决的可用性问题和要关注的痛点，以及增强整体用户体验的机会。这就是 UX 流程的迭代。使用相同的原理进行设计优化，然后进行测试，直到产品满足用户需求为止。
诺曼的原则可以帮助我们加深对用户交互的理解，包括人们提出的问题类型、他们的认知过程以及情感水平。如耐克网站的案例研究所示，这七个基本设计原则可以帮助我们确定问题的答案，并找到影响积极情绪（如愉悦感）的方法。
但是，设计原则实际上只是UX过程的开始。为了确定产品的体验质量，我们需要与真实的用户一起测试设计，然后使用洞察力进行必要的迭代。
以上内容源于 Don Norman 的畅销书《日常事物的设计》。它是 30 多年前编写的，但至今仍然对设计行业有着深远的影响。当然，还有更多的原则可以采用，但是 Norman 的设计哲学可以作为我们在设计工作中遵循的 UX 基础。
文章来源：站酷 作者：设计情报局
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前言
跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号(如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源，主要是安全问题。
在很多时候跨域问题我都是让后端解决，嘿嘿。但也有需要自己解决的项目！
首先在项目的根目录下建一个vue.config.js
如下：
//改变webpack的设置
const { default: Axios } = require("axios")
module.exports = {
publicPath :"./",
devServer: {
// 设置主机地址
// host: 'xxx.1xx.1xx.xxx',
// // 设置默认端口
// port: 8051,
// 设置代理
proxy: {
'/api': {
// 目标 API 地址
target: 'http://xxx.xxx.xxx.xxx:8051',//服务器地址
// 如果要代理 websockets
ws: true,
// 将主机标头的原点更改为目标URL
changeOrigin: false
}
}
},
chainWebpack: config => {//没有用到scss的这里就不需要啦！
const oneOfsMap = config.module.rule('scss').oneOfs.store
oneOfsMap.forEach(item => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
// 要公用的scss的路径
resources: './src/assets/base.scss'
})
.end()
})
}
}
转自：csdn 论坛 作者：可 乐 伢
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com