15:41 提问
ios系统微信页面在底部时往上滑动的拉动效果
我在做个页面，一般手机浏览器页面到底部后，再往上滑不是还能往上动，然后留出一块（灰色）空白吗?但我现在想让我往上滑的时候不让它出现那一块，不让它往上动，能有什么解决办法吗？是否是在页面头标签加入什么代码就可以了还是？头疼啊！！求大神帮帮忙！！！！
按赞数排序
如果它这个界面是用scrollview做的，你直接设置scrollview.bounces=no(回弹效果)！
这个楼主解决了吗
一样的问题。。。
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐发布者: mobileui
微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态类建立有号、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与程序的共赢。
一、有好礼貌
为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序哎设计时应该注意减少无关的设计元素对用户目标干扰，礼貌地向用户展示程序侧提供的服务，友好地引导用户进行操作。
1. 重点突出
每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容，在确定了重点的前提下，应尽量避免页面上出现其他干扰项影响用户的决策和操作。
此页面的主题是查询，却添加了诸多与查询不相关的业务入口，与用户的预期不符，易造成用户的迷失。
去掉任何与用户目标不相关的内容，明确页面主题，在技术和页面控件允许的前提下提供有助于用户目标的帮助内容，比如最近搜索词，常用搜索词等。
操作没有注册，让用户无从选择
首先要避免并列过多操作让用户选择，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。
2. 流程明确
为了让用户顺畅地使用页面，在用户进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。
用户本打算进行搜索，在进入页面时却被突如其来的抽奖弹窗所打断；对于抽奖没有兴趣的用户是非常不友好的干扰，平添一份对开发团队的恼怒；而即使有部分用户确实被“诱人”的抽奖活动所吸引，离开主流程去抽奖之后可能就遗忘了原本的目标，进而失去了对产品真正价值的利用和认识。
二、清晰明确
作为一个负责任的开发者，一旦用户进入我们的小程序页面，就有责任和义务清晰明确告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，这样才能为用户提供安全的愉悦的使用体验。
1. 导航明确，来去自如
导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户，我在哪，我可以去哪，如何回去等问题。首先在微信系统内的所有小程序的全部页面，均会自带微信提供的导航栏，统一统一解决我在哪，如何回去的问题。在微信层级导航保持体验一致，有益用户在微信内形成较为统一的体验和交互认知，无需在各小程序和微信切换中新增学习成本或使用习惯。
微信导航栏
微信导航栏，直接继承于客户端，除导航栏颜色之外，开发者无需亦不可以对其中的内容进行自定义。但开发者需要规定小程序各个页面的跳转关系，让导航系统能够以合理的方式工作。
微信导航栏分为导航区域、标题区域以及操作区域。其中导航区控制程序页面进程。目前导航栏分深浅两种基本配色，在iOS和Android展示有所不同，如下图所示：
导航区（iOS）
导航区通常只有一个操作，即返回上一级界面。开发者可定义其内容，不可对样式进行修改。
导航区（Android）
通常情况下，系统导航左侧唯一的操作为“离开小程序，回到微信，程序后台运行”。
当用户进入小程序次级页面后，我们建议小程序自身可以设计返回操作，同事用户也可以通过安卓系统自带的硬件返回按钮返回上一级。
微信导航栏自定义颜色规则（iOS和Android）
小程序导航栏支持基本的背景颜色自定义功能，选择的颜色需要在满足可用性前提下，和谐搭配微信提供的两套主导航栏图标。建议参考以下选色效果：
选色方案示例：
页面内导航
开发者可根据自身功能合计需要在页面内添加自有导航。并保持不同页面间导航一致。但是受限于手机屏幕尺寸的限制，小程序页面的导航应尽量简单，若仅为一般线性浏览的页面建议仅使用微信导航栏即可。
微信控件库提供tab导航供开发者选择。tab栏可固定在页面顶部或者底部，便于用户在不同的tab页面间作切换。为确保点击区域，tab项不得超过4项。一个页面也不应出现一组以上的tab栏。
2. 减少等待，反馈及时
页面的过长时间的等待会引起用户的不良情绪，使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此，当不可避免的出现了加载和等待的时候，需要予以及时的反馈以舒缓用户等待的不良情绪。
启动页设计
小程序启动也是小程序在微信内容一定程度上展现品牌特征的页面之一。
本页面将突出展示小程序品牌特征和加载状态。
启动页除LOGO品牌展示外，页面上的其他所有元素如加载进度指示，由微信统一提供且不能更改。无需开发者开发。
下拉标示区
微信类所有小程序页面，都会再下拉时出现微信为其统一设计的标示区。品牌展示区由品牌名称和微信小程序提示组成。目的是强化品牌和用户对小程序的产品感知。
下拉标示（iOS深浅两色方案）
微信提供深浅两套配色方案，如此处标示所示，文字颜色不可自定义，开发者在自定义背景色时，应注意保证下拉标示的辨识度。
下拉标示（Android深浅两色方案）
微信下拉提示用于给用户明确的小程序归属者，防止造假与作弊。此处标示提供深浅两套方案，文字颜色不可自定义，开发者在自定义背景色时，应注意保证下拉标示的辨识度。
页面刷新交互（iOS）
开发者可自定义需要通过下拉交互完成刷新的页面，此类交互微信将提供标准能力和样式。在样式上，刷新图标与下拉标示配色已捆绑，分为深浅两套方案，开发者在使用时，应注意头部文字、下拉标示与刷新图标的和谐统一。但用户在该类页面做出下拉交互时，出现微信小程序页面标准加载动画。开发者无需自行开发样式。
在开发者没有在页面顶部设计tab的情况下，若定义该页面可通过下拉动作刷新，则刷新后加载状态提示语小程序品牌展示区出现在标题栏之下，页面顶部。
开发者暂无法执行定义此加载效果。
在开发者定义了页面顶部tab并定义该Tab下的内容页面可通过下拉动作刷新，则刷新后加载状态提示语小程序品牌展示区出现在顶部Tab之下，且仅刷新当前页面内容。开发者暂无法自行定义此加载效果。
页面刷新交互（Android）
与iOS相同，在样式上，Android下刷新图标与下拉标示配色已捆绑，分为深浅两套方案，开发者在使用时，应注意头部文字、下拉标识与刷新图标的和谐统一。
微信下拉标示错误使用案例
请避免以下错误使用情况，确保信息的可见性和页面的可用性。
页面内导航
微信控件库提供深浅tab导航方案供开发者选择。tab栏需固定在页面顶部，便于用户在不同的tab页面间作切换。为确保点击区域，tab项不得超过4项。一个页面也不应出现一组以上的tab栏。
Tab栏选中态默认为100%实色，未选中态带有60%，其中选中态颜色可自定义。在自定义颜色选择中，务必保持Tab的可用性、可视性和可操作性。
页面内加载反馈
开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全体，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。开发者也可以使用微信提供的，统一的页面加载样式，如图中例所示。
模态的加载样式将覆盖整个页面的，由于无法明确告知具体加载的位置或内哦让那个将可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性操作下不要使用模态的菊花。
局部加载反馈
即旨在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面改动小，是微信推荐的反馈方式。例如：
加载反馈注意事项
若加载时间较长，应提供取消操作，并使用进度条显示载入的进度。
载入过程中，应保持动画效果；无动画效果的加载很容易让人产生该界面已经卡死的错觉。
不要再同一个页面使用超过1个加载动画。
除了在用户等待的过程中需予以及时反馈外，对操作的结果也需要予以明确反馈。根据实际情况看，可选择不同的结果反馈样式。对于页面局部的操作，可在操作区域予以直接反馈，对于页面级操作结果，可使用toast、弹窗或结果页面展示。
页面局部操作结果反馈
对于页面局部的操作，可在操作区域予以直接反馈，例如点击多选控件前后如下图。对于常用控件，微信设计中心已提供控件库及WeUI控件库，其中的控件都已设计有完整的操作反馈。
页面全局操作结果——toast
其中toast适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影响较小，适用于不需要强调成功专题的操作提醒。特别注意toast形式不适用于任何错误提醒。
页面全局操作结果——弹框
对于需要用户明确知晓的操作结果状态可通过弹框来提示，并可附带下一步操作指引。
页面全局操作结果——结果页
对于操作结果已经是当前流程的终结的情况，可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成，并可根据实际情况给出下一步操作的指引。
3. 异常可控，有路可退
在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。
要杜绝异常状态下，用户莫名其妙又无处可去，卡在某一个页面的情况。2.2中所提到的弹窗和结果页面都可作为异常状态的提醒方式。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。
异常状态——表单出错
表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改。
三、便捷优雅
从PC时代的物理键盘鼠标到移动端时代手指，虽然输入设备极大精简，但是手指操作的准确性却大大不如键盘鼠标精确。为了适应这个变化，需要开发者在设计过程中充分利用手机特性，让用户便捷优雅的操控界面。
1. 减少输入
由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序页面时因尽量减少用户输入，理由现有接口或其他一些易于操作的选择控件来改善用户输入的体验。
减少输入，巧用接口
例如下图中，在添加银行卡时，采用摄像头识别SDK接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种SDK接口（详见微信JS-SDK），充分利用这些接口将大大提高用户输入的效率和准确性，进而优化体验。
除了利用接口外，在不得不让用户进行手动输入时，应尽量让用户做选择而不是键盘输入。一方面，回忆易于记忆，让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入；另一方面，仍然是考虑到手机键盘密集的单键输入极易造成输入错误。例如图中，在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索，而减少或避免不必要的键盘输入。
2. 避免误操作
一位内在手机上我们通过手指触摸屏幕来操控界面，手指的点击精确度远不如鼠标，因此在设计页面上需点击的控件时，需要充分考虑到其热区面积，避免由于可点击区域过小或过于密集而造成误操作。当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上时，往往就容易出现这样的问题。由于手机屏幕分辨率各不相同，因此最适宜点击像素尺寸也不完全一致，但换算成物理尺寸后大致是在7mm-9mm之间。在微信提供的标准控件库中，各种控件均已考虑到了页面点击效果以及不同屏幕的适配，因此再次推荐使用或模仿标准控件尺寸进行设计。
3. 利用接口提升性能
微信设计中心已推出了一套网页标准控件库，包括sketch设计控件库和WeUI重构代码库，这些控件都已充分考虑了移动端页面的特点，能够保证其在移动端页面上的可用性和操作性能；同事微信web开发团队也在不断完善和扩充微信JS-SDK接口，并提供微信公共库，利用这些资源不但能够为用户提供更加快捷的服务，而且对页面性能的提高有极大作用，无形之中提升了用户体验。
四、统一稳定
除了以上所提到的种种原则，建议接入微信的小程序还应该时刻注意不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式。
统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标，减轻页面跳动所造成的不适感。正因如此，小程序可根据需要使用微信提供的标准控件，以达到统一稳定的目的。
五、视觉规范
为方便设计师进行设计，微信提供一套可供Web设计和小程序使用的基础控件库；同时方便开发者调用。
预览地址：https://weui.io
1. 字体规范
常用字号为20，18，17，16，14，13，11（pt），使用场景具体如下：
微信类字体的使用与所运行的系统字体保持一致，以导航为例，iOS与Android对应字体如下：
导航（iOS和Android）
主内容Black黑色，次要内容Grey灰色；时间戳与表单缺省值Light灰色；大段的说明内容而且属于主要内容用Semi黑；
蓝色为链接用色，绿色为完成字样颜色，红色为出错用色Press与Disable状态分别降低透明度为20%与10%；
2. 列表视觉规范
3. 表单输入视觉规范
4. 按钮使用原则
列表外按钮上文字标准
按钮高度为44px下使用：颜色#000000 / #353535 字号18pt
可点状态下文字调整透明度为60%
不可点状态下文字调整透明度为30%
列表外按钮上文字标准
按钮高度为25px下使用：颜色#000000 / #353535 字号14pt
页面线性按钮上文字标准
按钮高度为35px下使用：颜色#09BB07 / #353535 字号16pt
5. 图标使用原则
来源：微信团队
向您推荐：
经常遇到很多伙伴咨询如何去提升专业、练习应该怎么去做、灵感从哪里来等等问题。结合这些问题总结和梳理了一下自己的点滴经验，希望能帮助到大家，与之共勉。
本文的目的是给刚入行的新人分享个&
每当苹果公布新的壁纸，总会有人或者手机厂商去模仿苹果家的壁纸，因为他家的壁纸是真的好看啊。今天我们来学习一下最新的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倍] &
为什么UI设计中，用户的个人头像大多是圆形的？大舌头藉由归纳网路社群中专家的讨论，逐步厘清这个秘密
大家有没有觉得有越来越多的平台或编者按：按常理判断，黑色是生活中非常常见的颜色，在平面设计和交互设计中肯定会经常用到。但Segment.io的创始人Ian Storm Taylor却告诫设计师们远离航旅纵横手机APP界面设计欣赏
VIPUI.design 为航旅纵横 for iPhone、Android提供了从功能构想，软件构架，交互与视觉设计以及程序开发的整套解决方案。
小清新图标设计
团队的分工协作一直是管理学家们乐于研究的一个命题，良好的团队分工可以使团队运转的更加高效，产出的效率也会有明显的提升，这都取决于分
Tubik Studio ：我们的日常生活中总是面临着无尽的选择，大量的挑战。设计的决策也是如此，一...
在业务迭代周期内，产品经理和设计师对要做的产品需求和功能点进行需求分析和设计讨论的过程中，有时会出现...
在过去的2年当中，设计领域一直在探讨UX写作（UX Writing）这一“新兴”的设计分支。实际上，...
莫贝网（www.mobileui.cn）移动设备界面设计专业网站。为UI设计师提供手机界面设计，移动应用界面设计，平板电脑界面设计，导航界面设计等手持移动设备，移动终端界面设计相关知识的收集分享，共同学习的网站。
关注微博：