移动端用户体验:底部导航
作者：佚名　来源：可乐橙　时间： 标签：
图片来源：
设计师都知道，设计不只是为了好看。设计也决定用户如何融入一个产品，无论是网站还是app。这是一种交谈。导航就是一种交谈。因为如果用户不明白使用方式，你的网站或app再漂亮都没用。
为什么底部导航如此重要？
Steven Hoober在他的中发现，49%的人依靠一根手指完成手机上的操作。在下图中，手机屏幕上的画面表示大致的触摸范围，不同颜色表示用户能用拇指在屏幕上触及的区域。绿色表示轻易触及；黄色表示需要伸长手指；红色表示需要用户改变持握方式。
图片表示单手操作智能手机的舒适程度。图片来源：
把最重要最常用的操作放在屏幕底部非常重要，因为它们能用一只手指轻松触及。
许多应用遵循这一规律，将底部导航（又称作标签栏）作为最重要的app功能。Facebook的核心功能一触即达，能够在不同功能中迅速切换。
Facebook的iOS底部标签栏。
底部导航设计的3个关键
导航通常是搭载用户的交通工具。底部导航应该承载重要性等同的顶级目的地。这些目的地需要在app的任何地方留有直接的入口。
优秀的底部导航设计遵循以下3条定律：
1. 只显示最重要的目的地
在底部导航中使用3到5个顶级目的地。如果少于3个，请考虑使用标签代替。
底部导航避免使用5个以上，因为点击目标相互会过于接近。在标签栏放置过多的项目，让人们难以点中他们的目标。每多展示一个标签，app的复杂性就增加一分。
如果顶级目的地确实有5个以上，不要用底部导航来承载这些入口，请考虑放在其他位置。
避免内容滚动
小屏幕上显而易见的解决方式，就是部分隐藏式的导航&&不必担心屏幕空间的局限，把标签项放入滚动的标签栏即可。但是滚动的内容效率低下，因为你得滑动一下才能看到想要的选项。
iOS版&app中就存在&看不见就想不到&的问题。
2. 表达出当前位置
没有表达当前位置，可能是app菜单中最普遍的错误。&我在哪里？&是用户需要回答的基本问题之一，这是顺利操作的前提。
用户应该在没有任何外部引导的情况下，一眼就看出如何从A前往B。应该提供适当的视觉线索（图标、标签和颜色），操作就不需要任何说明了。
正因为底部导航操作以图标方式展现，它们所表达的内容应该要适合通过图标来表达。有些用户熟知的通用图标，通常这些都表示搜索、邮件、打印等功能。不幸的是，&通用&图标很少。app的设计师常常用图标来代表一些非常难以分辨的功能。
老版本的Bloom.fm应用Android版。真是相当难理解用户当前所处位置。
我在这篇文章中强调了这个问题。
避免在底部标签栏使用不同颜色的图标和文字标签。应当使用app的主色来表示视觉焦点。
左图：不同颜色的图标让app看起来像是圣诞树。右图：应该只用主色。
遵循一条简单的法则&&用app的主色来提亮当前的底部导航项（包括图标和文字标签）。
iOS版Twitter的底部菜单栏。Messages是当前选中项。
如果底部导航栏有背景色，就要用黑白的图标和文字标签。
左图：避免使用彩色图标和彩色背景的组合。右图：使用黑白图形。
文字标签要为导航图标提供简短有意义的描述。不要用太长的标签，因为它们不能截断或换行。
避免换行、截断和缩小文字标签。
菜单元素要易于浏览。用户要能理解他点击某个元素时会发生什么。
目标区域足够大，才易于点击。将界面宽度按操作项的数量等分，计算每个底部导航操作项的宽度。或者，把所有底部导航项的宽度设为最宽。
Android规范建议按照下图的尺寸设计移动端的底部导航栏。
移动端的固定导航栏。单位是逻辑像素（dp）。来源：Material Design。
标签栏的小红点
可以在标签栏显示小红点，表示有相关的新信息。
可以用低调的方式给标签栏图标加上小红点。
3. 让导航不言自明
优秀的导航应该感觉像一只隐形的手，在操作途中指引用户。毕竟，如果用户都无法找到，那最酷的功能和最有吸引人的内容都没用。
每个底部导航图标都要通向某个目的地。而不能是打开菜单或其他弹出窗口。点按底部导航图标应该直接通向相应界面，或者刷新当前激活的界面。
不要用标签栏提供控制项，用来操作当前界面或app模式中的元素。如果需要提供操作项，请改用工具栏。
iOS的工具栏
尽可能在每种情况下都显示标签栏。这样能给用户一种视觉上可靠的感觉。
不要因为功能不可用就移除某个标签。如果你在某些情况下移除一个标签，其他情况确保留，就会让你的app界面感觉不可靠、难以预料。最佳解决方案是保证所有标签都是可用的，然后解释为什么某个标签没有内容。例如，如果用户没有离线文件，Dropbox里的Offline标签会显示一个界面，教你如何添加。这个功能就是。
Dropbox应用的空状态界面。
隐藏标签栏
如果界面里是滚动的信息流，标签栏可以在滚动查看更多内容时隐藏，向下滑动尝试回顶部时再显示。
底部导航栏可以根据滚动，动态显示和隐藏。
避免使用横向滑动的动效来切换界面。激活和未激活的界面，切换过渡效果应该使用叠加渐隐效果。
叠加渐隐动画。来源：
底部导航应该：
可见且结构合理（使用3到5个顶级目的地，并且避免可滚动内容）
清晰（导航栏元素要易于浏览，点击区域要足够大，方便操作）
简单（保证每个导航图标都通向合适的目的地，而且通过底部导航要能够触达所有元素）
原文链接：
译文链接：
作者信息：
I&m a software developer, tech enthusiast and UI/UX lover.&
【设计之家 原创文章 投稿邮箱：】上一篇： 下一篇：
网站(web)响应式设计的设计流程小结-相关文章模型 动画 程序 原画 策划
模型渲染 栏包 动漫动画
影视广告 影视特效
UI视觉 平面广告 UI动效
产品设计 产品开发 美术
当前位置： >
5招有效提升移动端用户体验
来源：汇众教育
编辑：小汇
摘要：不谈APP，即使是浏览网页，大部分用户也已经是依靠移动端设备来进行了。所以，无论你是网页设计师还是在研发APP，为移动端的用户设计稳定、可用的用户体验，都是必须要做的。
1、简化导航相比于曾经所流行的大型导航设计，移动端设备和精简的导航更搭。当用户在使用移动端设备的时候，注意力和时间通常都是碎片化的，当他们打开应用和网站的时候，希望尽快找到想要的内容。所以，在设计移动端APP和网站的导航的时候，尽量根据分析和实际状况，保留最常用的的几个导航选项即可。这样的设计一方面能够节省屏幕空间，而且导航选项的触发区域也可以设计得相对更大一些。至于汉堡图标和弹出式菜单，具体用法见仁见智，可以根据实际状况灵活处理。但是有了汉堡图标这一约定俗成的菜单标识，用户可以快速理解它的含义，并且意识到背后还有一个弹出式的菜单。Ebates 这款APP 就使用了两级菜单的设计，首先最常用的导航选项被做成标签页置于页面顶部，另外一个就是右上角的书签式菜单（心型+汉堡图标）。整个设计确保了功能性，足够简单，不会让用户觉得复杂，也可以轻松找到他们想要的东西。2、多考虑手势与触感移动端的交互和桌面端是截然不同的，而你的UI和UX设计要有意识地为移动端进行适配。在这个过程中，手势交互是很重要的组成部分，设计师应该充分利用手势，帮助用户更快更高效地完成交互。常见的手势包括：点按，双击&按压&长按&托拽&缩放&滑动移动端的手势交互的地位相当于桌面端的点击交互。不过当你在思考手势交互的时候，别忘了搭配相应的触觉反馈。在我们日常使用移动端设备的过程中，常常会借用震动和力反馈来强化交互体验。而这种触感的设计，精髓在于尽量微妙一点，确保能让用户感知到反馈，又不会太过吸引人注意。触摸界面越来越多，用户是期望从中获得积极响应的。3、创造对话人们始终是希望通过语言交流来沟通的。也正是这种需求，使得对话式UI和聊天机器人能逐步走到台前，成为一种流行趋势。所以，当你的移动端UI当中，拥有让用户可以即时聊天的可能性的时候，你可以借用对话式UI 来提升用户体验：在你的界面当中加入更加触动人心的文案。无论是成段的文本，还是界面元素里的微文案，都可以通过更有触动性的文本来创造对话的感觉。就像 WTFWeather 这个应用一样，从文本到标签都采用的是对话式的表达，在为用户推送信息的时候也尽量营造出对话的感觉。使用聊天机器人和对话界面来和用户进行沟通。聊天机器人可谓是 24小时在线的客服，他们帮助用户解决问题，也能从某种程度上提升客户的忠诚度。将语音交互集成到设计当中来。Siri 、Cortana 和 Alexa 几乎是家喻户晓的人工智能语音助手了，将它们加入进来，让对话式界面更加强大。4、动画化如果你仔细观察近年来的网页，会发现动画特效已经无处不在了。动画效果能够让页面更加自然，更加漂亮，也更加引人入胜。动画不仅能够吸引用户关注，而且能够帮助用户展示如何更好的设计和交互。Google地图当中就集成了少量的动效，它们并不引人注意，但是让整个应用更好周到、完整。在之前 Nick Babich 的文章当中，他总结了动效的三个关键用途：- 呈现系统状态：使用动效来显示加载状态，内容刷新，推送通知- 用户导航和过渡：使用动效来帮助用户了解内容切换，件视觉层次，呈现状态的变化- 用于视觉反馈：使用动画帮助用户确认他们之前的操作完成了5、善用新用户引导流程和表单相比于网页，APP当中的新用户引导流程是相当关键的。绝大多数的应用因为其中的功能、服务的独特性，设计师会在用户初次打开应用的提供快速入门的教程，引导用户熟悉其功能。这一点在游戏类应用中尤其普遍。如果新用户引导教程做的足够有趣，很容易提升用户的忠诚度。确保引导教程足够简单，并且能够给用户以帮助，而用户看过之后，如果还能回过头来再次查看，就更好了。移动端网站则不同，最大的问题通常不是新用户引导而是注册表单和登录表单。移动端设备上，用户对于表单的易用性其实非常的敏感，用户不会喜欢又臭又长的表单和复杂的字段，所以，简化移动端网页的表单，能够更好地提升转化率。看看上面的GoodRx，表单的设计就足够简单。注册表单不应复杂。让用户输入邮箱注册，用户名、邮箱、密码三者绑定，登录的时候用户名和邮箱通用，这样能够便捷不少。当然，还有更为便捷的思路，就是使用通用的社交网络站好来登录注册，这样对于用户而言就更加方便了。结 语移动端用户体验要如何构建，对于如今的设计师而言，是很日常的问题了。激烈的竞争中，产品的差异往往是透过各种细节来呈现的。创建一套易用的用户界面，结合良好的用户体验，在细节上精细打磨，才能让用户真正留下来。-------------------------------------------- &END&-------------------------------------------更多相关资讯、更多技术教程分享敬请关注汇众教育官方微信、微博▼
建议与投诉请留下您的手机号
我们即刻安排课程老师为您回电！
请留下您的联系方式，我们将主动给您回电！
第一时间为您安排就近试听！
我们的服务
PC端与移动端在UI设计方面区别你知道吗
　　　　☆★长沙UI培训教学目的　　ui设计师的灵魂是设计思想，有了创意还要有交互逻辑、规范、用户体验、营销知识，具有把控整个项目进展的能力。系统学习UI设计内容，从UI中会涉及到的用户体验与交互这块开始学习。其次重点学习网页界面设计、响应式设计、软件界面设计、移动端界面设计。目的让学生制作出符合UI规范的界面，并能独立完成相对应的原创作品。在教导设计中，也会涵盖每一块UI制作的具体流程，提升学生的思维与逻辑分析能力，产品研发与策划能力。☆★长沙UI培训教学内容主要包括Axure用户体验；网页UI设计；移动端UI设计几大模块。1.Axure用户体验：学习Axure软件，了解UI设计前期原型设计的流程，具体围绕网页的原型设计与软件的原型设计。并讲解页面之间的跳转、交互状态效果。学习Axure软件，了解移动端的基本原型搭建，了解交互相关的控件与人机交互中的合理想象。主要以APP的原型为主进行学习。学习Axure软件，了解动效设计，例如下拉弹出菜单，轮播图的展示，音乐播放器的时间线效果等。学习交互设计文档的制作，集合整体框架内容，注明页面跳转层级，与设计到各种交互状态的说明。了解用户体验的重要性。从前期产品的开发，到后期的设计。主要学习在功能上、设计上如何提高用户体验。2.网页UI设计：了解网页设计的趋势、设计流程。区分不同系统、浏览器、分辨率等对网页设计的要求。关注时下流行的网页设计风格。学习网页设计规范，栅格化系统格式塔心理学。模块与细节的规范，网络广告设计讲解。学习网页界面的色彩搭配。了解各种页面导航与按钮的设计法则。系统学习广告banner的设计方式。了解网页中的瀑布流、通栏、F式布局等。学习掌握高级光影学。加强创意构图的设计形式。了解表单的设计与用户体验的融入。系统学习响应式页面设计的布局、模式与方法。锻炼学生在设计页面的同时符合SEO的设计规范。3.移动端UI设计：了解移动端界面设计的发展趋势。移动端设计与PC端中的不同点。分块讲解不同系统、不同品牌机的不同设计法则与风格。了解图标的设计分类与不同系统操作平台中的图标设计规范。锻炼布尔运算与图形造型。提高绘制图形能力。了解图标设计中的结构与光影学。具体配色原则等。分析图标的表现形式2d/3d与流行趋势。重点加强想象力的提升与创作能力。设定主题，独立创作一整套的系统图标。学习主题风格的统一化与衍生方式。了解APP当中的控件、功能性图标。学习控件中的具体搭建与配色。训练正负形图标的设计。了解产品开发流程，从前期的MPD到思维导图，低保真到高保真的具体工作流程。学习IOS端的设计规范。了解APP的安卓端设计规范。系统学习APP中主要页面的各种设计形式与规则方法。通过实战，以分组的形式开发一个产品。从需求整理到调研，再到数据整合。终完成基本的原型设计与交互文档。了解导航在APP中的重要性。如何通过不同类型的导航引导用户使用该产品。系统学习导航的12种分类。学习APP中的启动页、引导页的界面设计形式。重点学习归纳产品的主要功能进行引导展示。学习APP中的配色形式与色彩心理学。系统了解登录、注册页面中的用户体验。还有个人页面的展示设计。将APP中的内容信息通过合理的展示方式进行表现。学习APP中的列表式构图、九宫格、圆心点放射、陈列馆、轮播式构图。了解手机交互中的热点区域，按键区等。系统地分析不同终端的适配法则。系统讲解IOS端、安卓的切图原则。了解两个不同终端的切图方式与不同。man软件对APP的注释方法。了解微信平台的公众号。学习公众号的设计流程与基本要求准则。　　☆★ID模块&&&&& 1.介绍软件/新建画布/页面认识/软件优化　　2.视图工具参考线/导出预览模式/渐变填色，文字填色　　3.文字输入编辑(字号、字体、分栏等)　　4.文字群组与复合路径、对齐和分布　　5.排列、锁定、隐藏、路径查找器(焊接、相交、修剪)　　6.基础图形绘制与填色☆★CDR模块1.软件介绍(应用领域、优势、缺点)/软件界面(调色板)　　2.基本操作(新建文件、设置文件大小、出血、保存、导出、再制等)　　3.排版需注意的事宜(字号、字体、出血、文字安全框等)　　4.文本格式：文字方向、字符格式、段落格式、段落文本换行(图文混排)、分栏　　5.基础绘图(矩形、椭圆、多边形、图纸、螺旋线、完美形状、智能绘图)　　6.移动工具、填色(内部、轮廓)/视图工具(抓手、缩放、显示性能)　　7.排列、锁定、造形/图框精确裁剪/群组与结合、对齐和分布　　8.手绘、艺术笔/贝塞尔、钢笔/折线、三点曲线、连线、度量工具　　9.形状工具：A.直接编辑基本形状/文字;B.转换成曲线后编辑　　10.涂抹、粗糙、变换工具/裁切、刻刀、橡皮檫、虚拟段删除/线条填色　　11.均匀、渐变、图样、纹理、PS填充/交互式填充、网状填充吸管油漆桶　　12.交互调和、轮廓　　13.变形、阴影、透明　　14.立体(立体字设计、扁平投影效果、添加纹理立体字、渐变立体字)　　15.封套　　16.位图处理/转换(跟踪位图)位图遮罩/滤镜效果(卷页)/效果菜单　　17.表格处理/插入条码、0LE对象(图表)/对象管理器/页面设置、打印　　　　☆★AI模块&&&&& 1.介绍软件/新建文件设置/软件界面认识/文字工具/文字大小改变、旋转、复制　　2.其他格式：制表符、文字属性复制轮廓/简历制作　　3.选择工具、基础绘图学习/颜色填充、渐变工具、吸管工具/锚点编辑工具　　4.钢笔铅笔工具、路径橡皮擦、美工刀、剪刀、群组与复合路径、对齐和分布　　5.排列、锁定、隐藏、路径查找器(焊接、相交、修剪)、剪切蒙版　　6.描边面板/对象/路径/内部填充(网格工具、实时上色)　　7.变形工具/封套扭曲/变换工具　　8.画笔/符号/符号喷枪工具　　9.混合工具(带过，CDR中详说)、透明蒙版(结合剪切蒙版使用)　　10.外观面板、图形样式/描边、外观的使用/图层面板(多图层整理)　　11.图表/位图转矢量图/透明度面板(中叠加方式的使用)　　12.效果菜单(凸出和斜角、绕转、风格化)软件相互间格式的处理　　☆★DW模块　　表格切片认识DW界面、工作区，熟练DW基本操作，学习表格，切片　　框架网页掌握超链接、锚链接、富媒体、框架网页、浮动框架的使用，建立简单的传统网页站点　　html+css学习CSS三种嵌入形式、选择符、盒模型、浮动等，熟悉页面布局方法　　盒模型html+css:项目列表与导航，常用css样式、css3样式补充，居中等　　横版网页掌握和熟悉横版网页的制作技巧和注意事项，让与众不同　　竖版网页熟练掌握竖版的制作规范和技巧，不再做的“小白”　　表单制作表单，表单创建与表单样式　　下拉菜单下拉列表，dl、dt、dd下拉效　　卡式选项spry卡式、折叠式、工具提示　　JS套用与发布学会如何套用和调用已有的JS代码，让妙趣横生，引人夺目　　☆★五大学习模块 逐级提升设计能力　　1. 平面设计模块：PS、ID、AI、CDR四大平面软件。　　2. 电商设计模块：电商设计知识和技能、装修店铺以及电商运营、DW、代码。　　3. UI设计模块：AXURE、原型设计、交互设计、用户体验、网页界面设计。　　4. 移动端设计模块：ICON设计、手机主题设计、APP设计、微信平台。　　5. 岗前就业课：补充学习其他硬件UI设计、AE动效设计、互联网营销知识;参加设计项目战，沉淀个人作品，积累实际工作经验。　　☆★UI研修阶段　　原型设计学习Axure软件，了解UI设计前期原型设计的流程，具体围绕网页的原型设计与软件的原型设计。并讲解页面之间的跳转、交互状态效果　　交互设计学习Axure软件，了解动效设计，例如下拉弹出菜单，轮播图的展示，音乐播放器的时间线效果等　　学习交互设计文档的制作，集合整体框架内容，注明页面跳转层级，与涉及到各种交互状态的说明　　用户体验了解用户体验的重要性。从前期产品的开发，到后期的设计。学习在功能上、设计上如何提高用户体验　　网页设计鉴赏与规范了解网页设计的趋势、设计流程。区分不同系统、浏览器、分辨率等对网页设计的要求。关注时下流行的网页设计风格　　学习网页设计规范，栅格化系统格式塔心理学。模块与细节的规范，网络广告设计讲解　　各类的设计学习学习网页界面的色彩搭配。掌握各种页面导航与按钮的设计法则。系统学习广告banner的设计方式　　了解网页中的瀑布流、通栏、F式布局等。学习掌握高级光影学。加强创意构图的设计形式　　了解表单的设计与用户体验的融入。系统学习响应式页面设计的布局、模式与方法。锻炼学生在设计页面的同时符合SE0的设计规范　　手机主题设计了解移动端界面设计的发展趋势。移动端设计与PC端中的不同点。分块讲解不同系统、不同品牌机的不同设计法则与风格　　了解图标的设计分类与不同系统操作平台中的图标设计规范。锻炼布尔运算与图形造型。提高绘制图形能力　　了解图标设计中的结构与光影学。具体配色原则等。分析图标的表现形式2d/3d与流行趋势。重点加强想象力的提升与创作能力　　设定主题，独立创作一整套的系统图标。学习主题风格的统一化与衍生方式　　了解APP当中的控件、功能性图标。学习控件中的具体搭建与配色。训练正负形图标的设计与图标的迭代更新　　产品APP研发了解产品开发流程，从前期的PRD到思维导图，低保真到高保真的具体工作流程。学习I0S端的设计规范　　了解APP的安卓端设计规范。系统学习APP中主要页面的各种设计形式与规则方法　　通过实战，以分组的形式开发一个产品。从需求整理到调研，再到数据整合。终完成基本的原型设计与交互文档　　产品APP设计学习APP中的启动页、引导页的界面设计形式。重点学习归纳产品的主要功能进行引导展示　　学习APP中的配色形式与色彩心理学。系统了解登录、注册页面中的用户体验。还有个人页面的展示设计　　将APP中的内容信息通过合理的展示方式进行表现。学习APP中的列表式构图、九宫格、圆心点放射、陈列馆、轮播式构图等　　了解手机交互中的热点区域，按键区等。系统地分析不同终端的适配法则　　系统讲解I0S端、安卓的切图原则。了解两个不同终端的切图方式与不同点。学习mark man软件对APP的注释方法　　微信端掌握微信平台的公众号运营与要求ui需要视觉基础视觉基础是构成设计语言的小单位，在这一部分，需要运用到我们上面的原子设计理论来寻找页面中的小元素。以一个简单的Button为例，拆解出了基础的四个元素，分别是：色彩，字体，栅格，图标。在移动产品界面的设计中，还会有一些元素比如声音，文案和动效等也是需要考虑的，但都没有前面的四个元素重要，因为没有一个界面可以脱离这四个元素而存在。我们将其暂定为视觉基础四要素。如果在设计过程中尽早的定义这些模块，就能创造更好的界面和交互体验。
课程内容以实际授课为准
PC端与移动端在UI设计方面区别你知道吗
　　每当我们去求职或者跟同行交流的时候，或多或少都会问问PC端与移动端在UI设计方面什么区别，比较明显的区别到底在哪些方面呢?　　其实，人家考核你的能力就是多平台用户界面设计的转换能力，需要UI设计师要基于小屏幕的交互来思考整个设计和优化的策略。　　不妨可以跟Hr面试官聊聊下面五个方面的区别。　　1、更大的展示字体，因为屏幕小了。　　在小屏幕上显示的内容，应该适当地增加大小，让用户能够更轻松地阅读和消化。通常，在移动端上，每行容纳的英文字符的尺寸在30~40个为合理，而这个数量基本上是桌面端的一半左右。　　在移动端上排版设计要注意的东西还有很多，但是总体上，让字体适当的增大一些，能让整体的阅读体验有所提升。　　2、排版布局的尺寸和形式的优化　　从PC端迁移到移动端，应该让用户更易于访问，形态也需要跟随着平台的变化而进行适当的优化和修改。对于整体尺寸和排版布局的设计，应该更有针对性。　　比如大量的大尺寸的图片需要跟着移动端的需求而进行优化，考虑到移动端设备上用户的浏览方式，图片 好被切割为方形，或者和手机屏幕比例相近的形状;比如选择尺寸更合理的图片，放弃不匹配移动端需求的JS动效等。所有的按钮或者可点击的元素都按照用户的手持方式，放到手指易于触发的位置　　3、移除不必要的特 效　　在PC端网页上，旋转动效和视差滚动常常会让网页看起来非常不错，但是在移动端上，情况则完全不同。内容在迁移到移动端的网页和APP上的时候，效率和可用性始终是第 一需求。快速无缝的加载和即点即用的交互是用户的首要需求，剥离花哨和无用的动效，会让用户感觉更好。　　作为UI设计师，你需要围绕着点击和滑动这两种交互来构建移动端体验，悬停动效要去掉。移动端上手指触摸是主要的交互手段，悬停动效是毫无意义的存在。　　4、精简优化导航体系　　当用户打开APP的时候，他们通常倾向于执行特定的操作，访问特定的页面，或者你希望他们点击特定的按钮，所有的这些操作能否实现，大多是要基于导航模式的设计。　　在PC端网页上，一个可用性较强的导航能够承载多个层级、十几个甚至20多个不同的导航条目，但是在移动端上，屏幕限制和时间限制往往让用户来不及也不愿意去浏览那么多类目。　　移动端的导航需要精简优化，不用沿用PC端的导航模式，可以采用侧边栏或者底部导航等更适合移动端的方式。搞清楚整个导航的关键元素之后，就可以有针对性地做优化和调整了。　　5、每屏完成一项任务即可　　虽然手机的屏幕越来越大，但是当你的内容在移动端设备上呈现的时候，依然要每屏只执行一个特定的任务，不要堆积太多的内容。　　用户的习惯和多样的应用场景使得移动端界面必须保持内容和界面与内容的简单直观，这样用户在繁复的操作中，不至于迷失或者感到混乱。　　那么怎样这种清晰的体验呢?让你使用的所有UI设计元素都用来帮助户作出执行操作的决定就可以了!
文中图片素材来源网络，如有侵权请联系删除
课程选择：
您的姓名：
手机号码：
长沙天琥电脑培训学校
天琥是一所专注软件开发培训的教育机构，在2002年，天琥教育创始人柳絮在广州创办工作室，从此天琥教育扎根羊城大地。到目前为止，天琥已在全国20个省（市）拥有24所校区，成功打造天琥设计广告公司、云琥在线以及在线测评页问网三大教育平台。目前学校开设的课程有网页设
咨询热线：
400-656-1080
同学免费申请
热门课程推荐
热/门/课/程
最/新/动/态发布者: mobileui
时代的悄然袭来改变着我们的生活方式，同时也有大批的设计力量涌入移动端设计领域。在web2.0时代背景下孕育成长起来的设计师们，在进入这样一个新鲜的领域时多少有些“水土不服”。希望通过本文能给大家带来一些新的探索方向及尝试。
网络环境研究
根据 CNNIC 第 32 次络发展状况调查,截至2013 年 6 月,中国手机网民的总规模达 4.64 亿。其中,手机浏览器用户规模为3.69亿，同比增长21.0%,在手机网民中的渗透率为79.5%。用户使用手机浏览器的频率稳步提升，75.6%的用户每天都使用，其中63.3%的用户每天使用多次。同时，从使用时长上看，手机上网开始挤占电脑上网时间，成为我国网民的一种主流上网方式。手机浏览器作为移动互联网的入口地位将进一步稳定提升同时也成为网民接入移动互联网的首要入口。在这样的局势下面仅在PC端建立网站已经开始无法满足用户的需求。移动端网站建立的必要性十分凸显。
如图所示，3G4G网络的普及率以及WIFI覆盖率正快速增长，而相对占比也不断的提升。良好的网络环境将为移动端网站设计开拓更大的空间。这为网站的视觉展示以及流畅体验带来更多可能性，同时因为低速网络仍有比较大的占比，所以网站的性能优化仍然是每位设计师需要迫切关注的要点。
浏览器作为网站的承载基础，上图数据体现智能移动设备的市场占有量十分高，而普遍智能移动设备系统的自带浏览器以及第三方浏览器基本都是采用webkit内核，对网站都有较高的兼容度，这为设计带来更多可控性。（相较于IE6用户使用率仍高达24% 的PC端 【2013年6月微软数据：IE6最新市场份额，中国大陆】，webkit内核浏览器对ccs3以及html5的网站支持率达到的93.5%以上。）
交互差异性
不同的终端有着不同的交互方式。PC与移动设备的交互方式有着天壤之别，在PC上良好的页面交互方式放到移动端页面已然不完全合适。移动端有着更丰富的交互方式，比如利用手机陀螺仪的重力感应来实现一些交互（如 旋转屏幕进行转跳、“摇一摇”实现页面切换等等），比如长按保存图片……同时移动端交互已经慢慢有一套完善成熟的交互体系。设计师在这方面可以更多的去学习借鉴移动产品的优秀交互方式应用到移动端网站设计中去，也应多纬度去沟通了解其在网页上实现的可行性。此处推荐一篇文章：
响应式设计
而说到移动端网站不得不提。什么是响应式？简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。面对繁杂的移动设备分辨率，这听起来非常美好，我们接下来了通过一个案例来了解一下。
点击标题或者扫描二维码浏览（此网站在PC与移动端皆可体验）
通过案例我们能清晰了解到在各种移动终端层出不穷的今天，响应式设计的强大兼容性得到了巨大的体现。同时建立在强大的兼容性基础上，由于全终端共用一个网站，那么在开发、运营和维护上会更节省成本，而在网站建设前期会给设计以及重构加重任务；对于产品包装而言在不同终端会有更一致更完整的品牌形象。而在实际使用过程中发现，响应式设计在不同移动终端上能获得兼容度较高的视觉呈现同时会有部分功能性不够完善（如按钮点击区域过小）；而在PC端部分浏览器会出现错位等不兼容情况；我们还发现在硬件性能较差的终端下，网站的流畅程度并不高（动态展示特效会出现卡顿）；而在移动终端上网站的载入过程受到网速的很大影响。所以使用响应式设计的同时对设计师在交互设计、视觉设计，性能优化和重构方面会有更高的要求。
尽管此去任重道远，但是在国内外众多设计师的努力下依旧涌现许许多多的优秀案例。
点击标题或者扫描二维码浏览（此网站在PC与移动端皆可体验，PC端推荐chrome浏览）
该站针对PC端与移动端做不同的细致优化，出色的视觉呈现以及顺畅的交互体验让其有着浓烈的带入氛围与浑厚的史诗感，同时清晰的用户引导，有趣的深入探索以及巧妙的互动小游戏让其成为一个难得的佳作。由于承载的内容十分丰富，所以消耗网络资源较为巨大，载入时间略长。
点击连接或者扫描二维码浏览（此网站在PC与移动端皆可体验）
该站有着喜人的矢量插画设计风格，清晰的用户引导，生动流畅的动态展示，使得枯燥的介绍也变得让人容易接受起来，这不也正体现了设计的价值吗？
案例：腾讯互动娱乐UP2014 发布会邀请函
点击连接或者扫描二维码浏览（手机浏览为佳）
Html5动画设计，Svg格式文件优化，更简约新潮的视觉展示，更流畅的用户体验，让一个内容简约的页面立马上流了起来~！
点击连接或者扫描二维码浏览（手机浏览为佳）
流畅的动画效果，简单有趣的小游戏，清晰的用户引导。好用、好看和有趣三个都有了~！
点击连接或者扫描二维码浏览（手机浏览为佳）
以微信公众号为入口的轻度的拟APP设计的网站，功能按钮设计合理，跳转顺畅，日程、签到等互动内容使用流畅。
点击连接或者扫描二维码浏览（手机浏览为佳）
企业型网站，制作严谨，专题有创意，但对导航的设计不统一略显遗憾，跳转不顺畅也导致用户体验较差。
点击连接或者扫描二维码浏览（手机浏览为佳）
情感化场景设计，针对用户群的痛点表达到位，但产品展示不够清晰，未开通在线购买功能十分可惜。
点击连接或者扫描二维码浏览（手机浏览为佳）
脱胎于PC的平台站，布局合理，展示清晰，体验流畅，同时也较平淡规矩。
点击连接或者扫描二维码浏览（此网站在PC与移动端皆可体验）
视觉上延续优衣库一贯的简约，响应式设计在多个终端上获得了比较完整的视觉效果。不足的是在手机端上，按钮过小，给操作带来一定困难。
看完案例回归到实际的项目中我们会发现：设计师在执行前期的各纬度沟通十分重要，特别是和重构工程师的提前沟通，对于页面的还原度以及会有很大的帮助；由于有着兼容度较高的浏览器为基础，尝试一些新颖动画特效会让你的网站看起来更生动新潮；
跳开PC端页面设计的固定思维，更多的运用移动端特有的交互方式，会带来更酷用户体验，比如对重力感应的应用等。本文粗浅的分析希望给设计师们带来一些思考和帮助，有不足之处欢迎指正，也与诸君共勉。
, , , , , ,
向您推荐：
经常遇到很多伙伴咨询如何去提升专业、练习应该怎么去做、灵感从哪里来等等问题。结合这些问题总结和梳理了一下自己的点滴经验，希望能帮助到大家，与之共勉。
本文的目的是给刚入行的新人分享个&
每当苹果公布新的壁纸，总会有人或者手机厂商去模仿苹果家的壁纸，因为他家的壁纸是真的好看啊。今天我们来学习一下最新的iPhone8和 iPhone x的壁纸是怎样做出来的？
值得注意的是，&
被iPhone X刷了一天屏，到下午实在受不了各种标题写着“iPhone X 适配、指南、设计稿” 内容却是发布会回顾和手机介绍的标题党。索性自己写一篇只针对iPhone X适配的贴子，与适配无关的内&
@Echo 由于iOS 和 Material Design的组件体系有些不一样，所以关于组件的分类体系我会分iOS篇和Android篇来讲解，本篇文章为iOS 篇。
对于大部分入门设计师及中级设&
如果你关注过一些取得大成就的人，总会在他的成长故事中发现很多传奇的经历，比如少年时代的天赋异禀，或是30、40岁的大器晚成，为了做好某件事的废寝忘食等等…然后摸摸自己的胸脯说，他们是天才，我只是个普通&
@Micu设计你是美工？还是设计师？你是合格的设计师吗？ 设计工作中最基础的修图会吗？找素材拼图会吗？ 如果这最基础都不会，能称自己是设计师吗？能漫天要价吗？ 如果有点职业道德，先学会最基础的修图，再谈设计吧！ 一起看看别人是如何将图片合成的！ 第1组:采集素材 完成设计： 第2组: 第3组: 第4组: 第5组: 第6组: 第7组: 第8组: 第9组: 第10组: 第11组: 第12组: 第13组: 第14组: 第15组: 第16组: 第17组: @Micu设计投稿，自 weibo
从2011年开始接触APP，到现在为止也做了几个了，发现了一个共同点就是和每一个技术搭档切图的时候，会遇到不同的问题，因为技术的水平高低有限，所以他们要求你给切图的时候也会不一样，针对切图后来我总结了一套规律分享给大家，希望互相学习~ 相关阅读： 设计师需要掌握的图片原理与优化技巧 Android设计中的.9.png 切图小贴士 一.android版 在做android版本设计的时候，尺寸有很多种，这时我们要以一种尺寸为基准，那这个基准尺寸是480px*800px，设计图完成之后就开始切图了，我拿我之前设计的一张图为例子讲解下：
当看到上边这张设计图的时候，我们首先分析下应该给技术切哪些图（为了避免以后少改动，建议切图之前最好和技术先沟通下，怎么切）； 1、底部栏目的icon和背景：
这个一般有2种切法：（有默认和选中之后的效果）
2、顶部栏目的背景切图： 由于顶部导航栏的是渐变样式，所以切图只需要切一小条，技术来平铺拉伸就可以~（PS：如果是花纹背景，就必须切整条了，因为花纹切一小条就会被拉伸了~） 3、标注文字大小和行间距：（以这张图为例子，我标注好了，请看下图） 需要注意的： A：android主要有3种屏，即： QVGA和WQVGA屏density=120; HVGA屏density=160; WVGA屏density=240; B：apk的资源包中， 当屏幕density=240时使用hdpi标签的资源 当屏幕density=160时使用mdpi标签的资源 当屏幕density=120时使用ldpi标签的资源； C：我们标注的是PX，但是技术的算法是DP，所以需要PX和DP进行转化，PX和DP的转化主要跟密度有关系，当密度density=160即（屏幕尺寸：320*480）时，1PX=1DP；当密度density=240即（屏幕尺寸：480*800）时，1PX=0.75DP；当屏幕的尺寸大于480*800的时候，密度都按照240计算即可；当密度density=120即（屏幕尺寸：240*320）时，这个现在几乎没有人用了，所以我也不知道转化公式，如果您知道，可以留言告诉我啊~ 注意：因为我们做的是基于480*800尺寸的，大家都知道android的尺寸太多了，要想适配现在流行的尺寸，比如：640*960；720*1280等，唯一的解决办法就是图标可以根据不同尺寸各做一套，也就是图标需要做480、640和720共3套图标，不过如果你们的产品的要求不严格，做一套就可以，只不过是在大于480尺寸的屏幕上有些图标被拉大变虚而已~ 二.ios版 在做ios版本设计的时候，尺寸有3种，分别是：320*480、640*960、640*1136；这时我们要以一种尺寸为基准，那这个基准尺寸是640px*960px，设计图完成之后就开始切图了，我拿我之前设计的一张图为例子讲解下：
当看到上边这张设计图的时候，我们首先分析下应该给技术切哪些图（为了避免以后少改动，建议切图之前最好和技术先沟通下，怎么切）； 1、底部栏目的icon和背景：
这个一般有2种切法：（有默认和选中之后的效果）
2、顶部栏目的背景切图：
由于顶部导航栏的是多颜色的，所以只能切一整条给技术，商圈的图标要单独切出来
3、二级标题栏目的切图： &
周陟 （@UCDChina 深圳负责人、交互设计专业委员会（@IxDC）部长） ：我发现一个问题，大部分刚入行或者经验不多的设计师在碰到问题的时候都喜欢”索取”，最好有个现成的东西放那儿给他供着。这暴露了我们设计师群体一个严重的现状——自学能力的欠缺。 我上次提到设计师的三大素质（我自己觉得是这样，也是招人的时候重点考察的），这次就专门聊聊自学能力的问题，与各位打拼靠自己的朋友共勉。 作者还有一篇很有意思的分享：普通UI设计师与顶级UI设计师的区别是什么？ 什么是设计师的自学能力？ 我们对自学能力的理解是从上学的时候建立的，但那个时候的”自学能力”相对单纯，无非也就是如何通过自己看书、做题，复习到达熟练记忆，以便应付各种苛捐杂税式的考试。 但进入设计行业后，这个自学能力不仅仅限制在”了解知识、复述知识”的范围，设计师要学习各种软件，学习如何寻找灵感，学习如何与客户沟通，学习怎样规划自己的行业前景……这种交叉性的自学要求会成为很多人的屏障。并且，很难定义一个所谓的”自学能力”的量化目标。 就我个人理解，设计师的自学能力是使用合适的时间、方法、资源达到独立的、正确的解决问题的能力。 如何才能有效的自学？ 你细心的话，应该注意到上面我的用词，这些关键点就是有效自学的途径。在设计这个行当，光努力是不够的，我们不只是要强调效率，也要强调效能。回过来看，你们学校历史中是不是总有那么几个无论如何努力都始终分数不高的货色？ 首先是合适的时间； 如果一件需要花时间的学习任务超出了你的时间成本，你就不应该去碰它，或者换一个更好的方式，比如：你现在是一个从事了8年平面设计的设计师，你觉得目前做动画的收入高，你希望通过自学动画，然后跨行到这个领域，那么未必是最好的选择，首先你的8年的平面经验几乎没有再升值的空间，其次作为一个新人，也许你还要3年的等待，好死不死，你的脑子不错，等到你学有所成，动画行业又是另一个新的天地了。 正确的方法是重要的； 方法不仅是你练习的方式，还有思考问题的方式，这里强调的是设计师快速发现问题的能力，只有准确的了解需要自学的领域的难度、行业标准、设计思路、应用形态，你才知道从何入手； 比如：你想自学网页设计，并把网页视觉设计师作为自己的职业发展，你就应该首先了解，一个网站的基本结构，每个结构需要哪些工作岗位，他们的职责有何不同，一个网站视觉设计师应该干什么，抓住重点（而不要一开始去学什么HTML代码，那不是你最该关心的，我这话是说给某个朋友听的）。 资源指的是任何能够让你了解到所需知识的平台； 基础的东西先看维基和google，然后去书店翻一翻行业著作，然后下载一些软件的学习版知道你要使哪些工具，这些都是你的资源，如果凑巧你还能找到一些资深的从业人士咨询就更好了，但是要提醒的是，别人没有义务回答你，所以你先要准备好自己的问题。 独立性决定了你在自学途径中对自己的要求；你善于坚持的品质是你能够成功通过自己的努力达到目标的前提条件，在你周围没有更多的资源可以利用的时候，你只能靠自己不断的练习，思考。我发现要求很多设计师练习没有问题，要求他们思考却很难，自学的过程中，”想”永远是最关键的。 自学不是万能灵丹 你的性格不适合自学。这是正常的，有部分朋友他们的性格天生就是依赖性强，缺乏主见，在遇到困难的时候选择逃避，那么这样的性格想完全通过自学来达到一个”好高骛远”的目标是不太可能的。你需要选择一个付费的培训机构或者老师，通过一些外部的压力，让你有所提高。 除了自学还应该参与交流。交流当然是重要的，通过交流可以达到解惑的效果，有个前提需要注意，你要和别人交流，别人也需要知道值得和你交流，因此你要有所储备，交流既然是平等的也就需要基础，别以菜鸟之心度老鸟之腹，既冷了场又露了怯。 自学的技术必须转化为实际项目。你的自学有可能是为了自我提升，自我积累设计经验，但如果是为了解决实际问题，那么你自学的成绩就必须经过实际项目的检验，比如：你学习了一些新的交互设计的工作技巧，那么在你自己从事项目的时候你就应该争取机会导入进去，否则到头来，你也只是做了一嘴的好交互。 “人一定要靠自己”，说的不是抛弃阶级感情和团队协作，而是面对困难和障碍的时候，往往只有你自己才是靠得住的。缺乏自学能力的设计师，从性格与技能上都会落于下风，因此请不要让自己”被飞”的日子来得太早。 原文出处：《闲言碎语：周陟设计随笔》，感谢作者的无私分享，推荐童鞋们阅读原著，受益无穷 : ） & &
移动app开发中多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。 加上Android生态中纷繁复杂的各种奇葩尺寸，现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路是： 1、选择一种尺寸作为设计和开发基准； 2、定义一套适配规则，自动适配剩下两种尺寸； 3、特殊适配效果给出设计效果。 & 手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式，再慢慢说明原委。 第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。 & & 第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。 & 第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。 & 第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。 & 为什么选择iPhone 6作为基准尺寸？ 当面对大中小三种屏幕需要适配的时候，很容易想到先做好一种屏幕，再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6（750px/375pt）作为基准，基于几个原因： & 1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计，到320pt可能元素之间比例就不是那么回事了，比如图片和文字之间视觉比例可能失调。 & 2、iPhone 6 plus有两种显示模式，标准模式分辨率为，放大模式分辨率为（即iPhone 6的1.5倍）。可见官方系统里iPhone 6和iPhone &
初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。 现象 首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480×800, 480×854, 540×960, 720××1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640×960, 640×××2208。 不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。 像素密度 要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480×800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。 所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。 Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。 倍率与逻辑像素 再用iPhone 3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。 在现实中，这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。 在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。 由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。 Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。 如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率： ldpi [0.75倍] mdpi [1倍] hdpi [1.5倍] xhdpi [2倍] xxhdpi [3倍] &
本教程主要使用Photoshop设计佳能SD4000APP图标教程，主要使用图层样式来完成图标的绘制，喜欢的朋友让我们一起来学习。
你或许不喜欢 iPhone 6 在外观设计上的改变，但事实是，即使是仅凭尺寸增大这一条，新一代的 iPhone 已经足够引发一场换机潮。iPhone 6 和 iPhone 6 Plus
很多朋友下载了非常漂亮的笔刷或功能强大的滤镜，但是不懂如何安装，今天带你一步步完成这些工具的安装。
1.Photoshop画笔的安装
Photoshop画笔的本文教程很有意思，是最近在网络上流传的比较不错的UI设计教程，小黑板应用图标设计教程是由网友“石头想飞”的原创作品，教程简练精髓，废话鉴于国内交互设计名词混乱不统一，很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》专题，梳理控件的名称和使用事
Tubik Studio ：我们的日常生活中总是面临着无尽的选择，大量的挑战。设计的决策也是如此，一...
在业务迭代周期内，产品经理和设计师对要做的产品需求和功能点进行需求分析和设计讨论的过程中，有时会出现...
在过去的2年当中，设计领域一直在探讨UX写作（UX Writing）这一“新兴”的设计分支。实际上，...
莫贝网（www.mobileui.cn）移动设备界面设计专业网站。为UI设计师提供手机界面设计，移动应用界面设计，平板电脑界面设计，导航界面设计等手持移动设备，移动终端界面设计相关知识的收集分享，共同学习的网站。
关注微博：