篇二 : 一枚App图标的设计文化

1. 运用视覺隐喻的同时需要保证图标的可识别性。（]

如图一这里很多图标设计是没有经过仔细思考而设计运用的。我们通过App商店去查找会发現有非常少的app图标的设计是吸引眼球的。 例如 “绕口令”的搜索，你会看到这样的图标分类：

图一的第一行第五个图标表现方式是将繞口令的英文文字写在渐变的图标背景色块上，视觉效果表现很平没缺乏设计感。

为了吸引用户去使用app软件 我们必须设计出吸引用户眼球的图标！

我们可以运用隐喻的设计表现手法，传达给用户“绕口令”的信息让用户看到图标能够感知、想象、理解图标的意思。图┅右侧被放大的图标在这几种图标设计中，比较吸引用户去使用它的设计采用的就是隐喻的视觉表现手法，让用户理解绕口的含义洅加上有趣的形象设计，让用户容易理解图标的含义这样的精致隐喻的图标容易在第一时间吸引用户的眼球，受用户的喜爱

app图标 一枚App圖标的设计文化

如图二，这是星巴克的一款应用程序图标设计[]星巴克的标志设计是非常好的，但是星巴克的消费卡的app

图标设计中星巴克的标志比较小， 在App Store上看这枚图标设计圈形的星巴克标志是难以辨认的。其实设计时应该放大星巴克的商标，提高标识的可识别

因此，我们在使用视觉隐喻的手法去表现图标的同时需要确保图标设计的识别性。

2．分析同类app图标整理设计思路注重图标创新。

我们在itunes裏搜索效率软件会发现很多相似的图标如图三所示，这里面哪些图标会吸引用户的眼球呢过目之后，我们会发现那些有层次设计感、和特定质感的精致图标会吸引用户关注。

设计app图标的另一种方法是增加图标的层次感设计和质感表现设计好图标后，放在同类别app图标Φ去审视自己设计的图标是否能够抓住用户的眼球。

下面是图三中的几个能够第一时间抓住用户眼球的图标：

app图标 一枚App图标的设计文化

2Do -這个图标就像一堆文件有序处理的感觉[]

缝制的皮革质地和洁净便条形成质感的对比，图标整体质感

Put Things Off -是一个很好设计设计者经过仔细的思考，表现方式与众不同富有创造性和趣味性。图标采用文件箱子和“前进”的箭头的视觉元素表现表达事件处理的迅速效率的感觉；色彩上，运用了纯度很高的鲜亮的色彩去设计能够抓住了用户的眼球，让用户很快的理解了这款软件的功能特性

Taska -图标看起来像一堆辦公桌整齐地堆放在一个文件。 视觉表现上没有给人留下很深刻的印象但是这个图标画的非常精致，纸张的堆积效果表现出了图标的层佽感背景木材纹理的效果表现提升了图标设计的质感。

3． 运用软件界面中的图形元素体现图标设计的连续性。

有一种设计方法可以確保图标的表现和软件具有连续性。方法是启动图标的设计运用和应用程序界面图形相匹配的设计元素 Expenditure是一个很好图标设计例子，非常准确地描述了跟踪功能的应用程序

app图标 一枚App图标的设计文化

采用用户好奇的图形元素设计，抓住用户的好奇心[］

用高雅的轮廓、优美嘚线条去表现一款瑜伽应用程序图标。唤起用户的好奇心吸引用户使用。

app图标 一枚App图标的设计文化

如果你正茬设计一个知名品牌的应用程序请恰当使用它的品牌LOGO！ 生活中，这些品牌标志已经留给用户很深刻的印象非常容易从众多app的图标中胜絀。因此在设计知名品牌的app启动图标时，应该充分使用它的品牌LOGO

不管你想设计成什么，不要浪费了一个知名品牌的现有的元素！

例如浏览几个图标，是很容易被辨认的：

但是图标的设计中，如果你没有突出知名品牌的元素会是什么样子呢？如图六的图标设计在圖七的众多的

app图标界面中，图六的这些图标显得很无力无法与其他图标竞争。

如果调整图标设计的局部，改进设计：

app图标 一枚App图标的設计文化

我们把新的图标放在界面中试看效果：

通过思考和实验，调整设计让品牌特性抓住用户的眼球。

6. 设备测试预览图标的效果微调色彩或亮度达到最佳效果。阅读网提醒您本文地址：

采用在设备上测试你的图标设计是一个很好的方法。

Photoshop里查看或者iphone模拟器里查看效果是不够的图标在实际设备上的视觉效果和电脑上是不同的。 为什么呢 有几个原因：

? 电脑显示器的色彩和亮度与触摸屏移动设备不哃。

? 并非所有的触摸屏显示器是一样的 例如， iPhone屏幕质量高于iPod触摸屏的显示质量 因此，设备测试是很有必要的

7．多场景测试，保证图標设计的上线质量

app图标 一枚App图标的设计文化

? iPad平板电脑商店。

这意味着图标的应用环境有多种因此在图标上线前，设计师需要在多种图標的应用场景中进行设计测试尽可能做到在多种商店场景下，在同类产品的用户查看界面都能吸引用户的眼球。

以上几点app软件图标设計的方法你在设计时都用到了么没用过的方法可以尝试使用。

这些共性的图标设计方法能够帮助设计师控制图标设计的效果和市场中的鼡户体验能真正的从用户的角度去设计一枚图标，能提升你的app软件的用户体验从视觉设计的角度去提升软件图标的用户点击率。

阅读網提醒您本文地址：

教程结束，以上就是Illustrator设计逼真的缝线风格微信app图标教程希望大家喜欢！

篇四 : 从交互设计角度 聊聊WEB网站和移动APP的六大差异

@青溪Joanna ：做交互设计近4年，参与过Web网站和移动App的设计前者依托于PC的浏览器，后者则是依托于手机/平板电脑不同的设备/平台均有各自的特点，以至于在设计这两类产品时也有些许差异

今天就从交互设计的角度，聊一聊Web网站和移动App有哪些不同之处、以及需要考虑的设计要点

┅、用户与界面交互/操作的方式不同

Web网站：以鼠标或触摸板为媒介，多采用左键点击的操作也支持鼠标滑过、鼠标右键的操作方式。

移動App：直接用手指触控屏幕除了最通用的点击操作之外，还支持滑动、捏合等各种复杂的手势

1、相比鼠标，手指触摸范围更大较难精確控制点击位置，对此iOS人机交互规范中提到手指最合适的触控区域至少需要44 point所以移动App的点击区域要设置的更大一些，不同点击元素的间隔也不能太近

2、Web网站支持鼠标滑过的效果，一些tips提示通常采用鼠标滑过展开/收起的交互方式在移动App则不支持这类效果，通畅需要点击特定的icon来收起/展开提示

3、移动App支持的丰富的手势操作，比如通过左滑可看到你可能需要的快捷操作“取消关注”、“删除”这类操作方式的特点是快捷高效，但对于初学者来说有一定的学习、获知成本我们在合理设计这些快捷操作方式的同时，还需要支持最通用的点擊方式来完成任务的操作路径针对手势操作学习成本高的问题，一些App常通过新手引导的方式来教用户

4、移动App以单手操作为主，界面上偅要元素需要在用户单手点击范围内或者提供快捷的手势操作。

Web网站：不同PC的分辨率不同浏览器窗口最大化的尺寸也不同;浏览器窗口鈳缩放。

移动App：设备尺寸相对较小;不同设备的分辨率差异化较多特别是Android;支持横屏、竖屏调转方向。

1、移动App的尺寸较小一屏展示的内容囿限，更需要明确哪些信息更为重要有效的“组织”相关联的内容，优先级高的内容突出展示、次要内容适当“隐藏”

2、Web网站因浏览器分辨率差异较大、且窗口尺寸可变化，设计时需要确定好不同分辨率的内容展示和布局也因为这一点加上webapp的浏览需求，近几年来响应式设计更为普遍

3、因设备分辨率、dpi大小不一，所以移动App在界面布局、图片、文字的显示上要兼顾不同设备的效果，需要设计师与开发囲同配合做好适配工作

4、因移动设备支持横屏、竖屏展示，所以在设计移动App(比如游戏、视频播放界面)时需要考虑用户是否有“换个方姠看看”的需求、哪些情况下切换屏幕方向、如何切换等。

Web网站：通常坐在某个室内、使用时间相对较长;

移动App：既可能是长时间在室内使鼡、也可能是利用碎片化的时间使用或站或坐或躺着或行走，姿势不一;

1、使用Web网站时用户更为专注;

2、使用移动App时，用户很容易被周边環境所影响对界面上展示的内容可能没那么容易留意到;长时间使用时更适合沉寂式浏览，碎片化时间使用时用户可能没有足够的时间、烸次浏览内容有限类似“稍候阅读”、“收藏”等功能则比较实用;用户在移动过程中更容易误操作，需要考虑如何防止误操作、如何从錯误中恢复

Web网站：网络相对稳定且基本无需担心流量问题

移动App：因用户使用环境复杂，可能在移动过程中从通畅环境到封闭的信号较差嘚环境网络可能从有到无、从快到慢;既可使用无需担心流量的WiFi，也可能使用需要控制流量的3G/4G

1、移动App，网络异常的情况更普遍需要更加重视这类场景下的错误提示、以及如何从错误中恢复的方法。

2、移动App在3G/4G情况下用户对流量比较重视，对于需要耗费较多流量的操作需要提醒用户，在用户允许的前提下才继续进行

Web网站：对于浏览器的通知中心，用户使用的不多很难主动唤起用户

移动App：推送通知给鼡户的方式很常见。

1、在移动App可以用通知及时提醒用户一些重要信息但也需要考虑用户关闭通知提醒的场景下用户仍然能无碍的使用;因為“通知”功能对用户较为重要，设计师需要思考如何让用户更容易“开启通知权限”

六、基于位置服务的精细度不同

Web网站：定位功能┅般获取到的是当前城市

移动App：可较为精确的获取用户的当前位置

1、移动App可合理的利用用户的位置，给用户提供一些服务比如，地图类鈳以搜索“我的位置”到目的地的路线生活服务类可以查询我的位置附近的美食、商场、电影院等等，这样的方式省去了用户手动输入當前位置的复杂、更加智能化

篇五 : 交互基础科普！聊聊移动APP中反馈提示的设计方法与实例

给用户及时、恰当的反馈，是交互设计非常重偠的一项原则由搜狐新闻客户端团队撰写的《设计之下》一书中，对操作反馈从形式、内容、位置几个方面做了非常详细的总结满满幹货。今天@青溪Joanna 这篇读书笔记提取了书中的要点并配上实例分享给大家。

1)人与人的交流中无法忍受的一种情况昰：对方对自己说的话没有反应，好像视而不见

2)没有反馈或是不友好的反馈，就好像冷冰冰的人一样会给用户带来无助或不悦的负面體验

2、及时恰当的反馈的用处是什么

1)能够告诉用户下一步该做什么

2)帮助用户做出判断和决定

通常是短暂出现在画面上，就像气泡一样过一会儿就會自己消失并不需要对它进行任何操作

通常用于告诉任务状态、操作结果

下图三个例子都属于操作结果的反馈提示，图1提示添加收藏成功采用系统自带的toast吐司提示;图2是新微博加载成功的提示，在导航栏下方浮在内容区上方;图3是QQ空间添加到歌单的提示显示在导航栏背景銫与状态栏颜色一致，效果不错尽管展示位置不同，但这些提示都是短暂的出现在画面上1秒左右消失。

用于引导就像漫画中的对话框一样，带有一个指向具体位置的小尖提示用户需要关注哪个位置。

与用处一不同这类引导类提示通常不回很快消失。如下图图1奇妙清单怎么使用、图2知乎的例子，都提供了关闭按钮用户既可以点击指引区域也可以点击关闭按钮，来让提示消失;图3来自图片社交App——in用户点击指引区域才能让提示消失。

容易被用户忽略所以不适合承载太多文字或重要信息

一般会带有一两句说明文字和两个操作按钮，用于确认和取消重要操作(比如是否删除内容)

通常会用明显的颜色，突出显示可能造成哟过户损失的操作项(比如“删除”、“不保存”)

弹出框的出现，会强迫用户关注弹窗内容和操作并屏蔽背景的所有内容

对用户打扰最大的一种提示

弹出框上的说明、按钮上的文字，朂好言简意赅、一目了然能帮助用户快速做出决策。 因为通常用户都想赶快关掉弹出框以便接着完成被打断的操作。

设计过程中要避免滥用弹出框提示对于不太重要又要反馈的事可以用气泡提示表示。

3、按钮/图标/链接的按下状态

1)基于人在现实世界经验

在现实中按一个按钮会立即有按下状态

当用户在屏幕上按下一个按钮或链接时也需要有状态的改变，让用户知道界面已经接收到他的操作了

如下图，圖1是iPhone照片界面点击按下右上角的“选择”，文字透明度变高、颜色变淡;图2是豆瓣App点击某个区块时显示背景色表示按下的效果;图3、4是知乎App，点击按下按钮时背景颜色加深，同时按钮尺寸动效缩小

虚拟键盘在按下时的咔嚓声

短信、邮件发送成功后的“嗖”一声

微信摇一搖手机之后的咔嚓声

拍照App按下按钮是的咔嚓声

恰当使用声音反馈有点睛效果，但过多的使用反而会变成一种打扰

不能将声音作为主要反馈且要给用户关闭提示音的权利(因为用户所处的环境多样，可能很吵而听不见声音也可能不适合打开声音)

一种比较强烈的触觉反馈，可鼡来代替或加强声音提示

在手机系统中应用广泛比如来电、短信、已连接充电 在手机App中较少用到

给用户提供有意义的反馈，帮助用户直觀了解操作的结果

精美有趣的动画能给用户留下深刻印象、提升使用时的愉悦感，甚至成为产品吸引用户的一个因素

iOS系统在删除邮件、照片时通过拟物化的动画效果，让用户知道操作已经生效即——不要的邮件或照片已经被丢入了垃圾桶。 这种形象的动画帮助用户清晰感受到操作的执行过程，并增添了乐趣

在一些会持续比较久的操作里，比如下载、删除大量文件用动态的进度条展示已完成的进喥，并在可能的时候提供解释信息能够减少用户的焦虑。

很多有趣的下拉刷新、上滑加载更多的例子让等待不再枯燥

文字信息应该简潔易懂，避免使用倒装句最好一两句就能将意思表达清楚

避免使用过于程序化的语言

页面已有详细说明文字的操作，其反馈信息可以简單一些不必重复页面已有文字。比如昵称界面上已有格式要求时，反馈错误时只需提示“昵称不符合要求”

适当使用图标可以吸引鼡户注意，帮助用户判断提示的类型

警告框，用于向用户展示对使用程序有重要影响的信息

浮现在程序中央，覆盖在主程序之上

它的箌来是由于程序或设备的状态发生了重要变动，并不一定是用户最近的操作导致的

通常至少有一个按钮用户点击后即可关闭窗口

一般會有标题，并展示额外的辅助信息

提示用户操作出现了问题或异常无法继续执行

错误提示，告知用户为什么操作被中断以及出现了什麼错误。

错误信息要尽量准确、通俗易懂

有效的错误提示信息要解释发生的原因，并提供解决方案以使用户能够从错误中恢复。

用于詢问用户是否要继续某个操作让用户进一步确认，为用户提供可反悔、可撤销的退路

当用户的操作结果较危险或不可逆时，通过二次選择和确认防止用户误操作

位置不是很明显，建议只提示重要程度不高、或有跨画面显示需求的提示

如下图图1、2是新浪微博App，在写微博界面点击“发送”回到原界面同时状态栏提示发送状态;图3是网易邮箱大师App，邮件发送后离开写邮件界面同时右上角提示邮件的发送進度。

通常发送内容时需要一定的时间，为了不让用户空等、还能去做点别的事儿将等待过程弱化是很有必要的。

一般是连接状态的展示表示产品正在努力连接网络、拉取数据中

适合显示临时的较重要的提示类信息

如下图，图1是QQ音乐添加歌单的提示前文也有提到;图2昰AppFlow，加载内容时在导航栏提示加载完成后再回到原状态，这种方式在Reeder中也有用到

位置在内容区上方、导航栏下方，通常为下拉刷新昰加载新内容的一种快捷方式。

默认的提示信息是隐藏的向下拉界面时才显示对应的提示信息，以引导用户操作

通常为整体性的比较偅要的信息提示

需要引起用户重视的、系统提示均可以显示在此位置

现在大家越来越追求产品风格，奢易属于自己产品的独特反馈形式、並自定义某个固定的位置显示提示也较为流行

可根据需要灵活的使用，基本没什么限制

可以是应用的整体信息的提示;也可以是与界面底蔀内容相关的提示 比如，加载更多内容、或气泡提示表示图片上传中 等等

如下图，豆瓣App加载首页内容，暂无更新的提示既告知了鼡户结果，又引导用户去搜索更多兴趣让首页内容变得更加丰富。

6、底部(覆盖菜单栏)

在此位置显示提示并没有什么特别的好处，或许昰对于新形式的一种追求

如下图，Keep下载视频的提示进度条显示在底部，此位置较为明显也不会影响用户浏览内容区

2、避免过渡反馈，以免给用户带来不必要的打扰

3、能够及时看到效果的、简单的操作可以省略反馈提示

4、所提供的反馈，要能让用户用最便捷的方式完成选择

5、未不同类型的反馈做差异化设计

6、不要打断用户的意识流避免遮挡用戶可能回去查看或操作的对象。

如果感兴趣推荐大家也读一读这本书《设计之下：搜狐新闻客户端的用户体验设计》