页面已拦截
无锡网警提示您：
该网站已被大量用户举报，且存在未经证实的信息，可能会通过各种手段来盗取您的账号或骗取您的财产。手机UI设计和网页UI设计有什么区别_百度知道
手机UI设计和网页UI设计有什么区别
手机上UI设计，和网页上的UI设计一样吗？是不是需要单独学习？
我有更好的答案
手机UI主要针对移动客户端，比如手机、pad 等，网页UI主要则针对的是电脑显示器中需要的网页UI设计等，原理一样，尺寸是不一样的哦。
采纳率：55%
1\界面空间不同手机UI和网页UI最大的区别是空间的不同，手机就是那么大的一个地方，我们只能通过上下滑动来获取更多的信息，而相比于网页来讲，网页的空间就非常大了，你可以移动你的鼠标去你任何你想去的位置，而手机则不同，手机的空间就在一个狭小的范围内，这个时候如果我们想设计一个按钮的话，他一定要非常明显易见，不能让浏览者到处寻找，而这个按钮的位置通常在底部较合适，这样更适于人们用拇指来点击或者移动。2\ 操作习惯不同 在网页中，我们可以利用鼠标点击、双击、右击等等各种操作，而在手机上我们只有点击一种或者是长按和滑动，很明显，我们需要按照浏览者在不同媒介的习惯来定位我们不同的UI设计，来更好的引导浏览者浏览网页、满足浏览者的需求。3\精确度的不同 我们都知道在网页上鼠标的精确度是非常高的，即使再小的东西也能够通过点击或者鼠标拖拽来实现，而且精确率非常的高，但是在手机上就不同了，我们通常需要设计一个精致的按钮，点击的范围最好大一些，这样我们更能够保证按钮的精确度，因为我们不能保证很多人的手指较粗哦。同理我们还要把按钮放置的醒目一些，不能和背景融为一体，毕竟手机UI和网页UI是有很大不同的。最好还要提醒的是，在手机UI设计中，地图往往有很大的作用，因为我们不可能在很狭小的范围内放置很多的内容，我们必须做好框架和结构，通过地图引导浏览者浏览欣赏。学习的话，更需要刻苦专研的精神，多看书，多交流，多实践！然后坚持就是成功！你懂得！
本回答被网友采纳
为您推荐：
其他类似问题
您可能关注的内容
手机ui设计的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。> 移动端网页界面设计的技巧有哪些
移动端网页界面设计的技巧有哪些
机构名称:IT培训网
联系电话:2
前言：大多数的访问者，访问网站的时间一般都是很短的，如何让访问者在较短的时间里能够浏览到你想要呈递给他们的信息？这就要考虑到网站的页面设计。
移动端网页界面设计需要技巧，而且和pc端有所不同，毕竟手机界面比较狭小，如果想要展示更多的信息，让用户更好的找到我们的产品或者新闻，那就要从设计方面入手了，今天达内教育小编为各位带来的知识就是教你如何设计移动端界面！
网页设计的好与坏，除了外观设计以外还要考虑到是否适合匹配到用户的各种设备，并且在这些设备当中，网页的排版是否协调、美观，当然不只网页结构设置还有网页当中的文字设置，也尤为的重要是。当然上述的技巧不仅适用在网页，在APP中也是适用。
文字设计要简单易懂
文字设计的初衷就是方便用户去阅读理解。当用户打开一个网页后，发现里面的文字结构混乱，而且文章的逻辑也杂乱不堪，那么他们直接关掉走人。移动端的展现效果更为严重，毕竟在一个狭小的屏幕当中，屏幕的各种反光效果会加大眼睛对文字的识别难度，给与阅读带来不便。因此，在有限的屏幕当中，对于文字的设置就有了相当高的要求，而一般我们常用的文字结构普遍都是
(在2&的设计稿中文字最小可读是24PX)。因此，文字设计的不能过于单薄也不能有太多色彩，所有的&手段&都必需使文字更加容易阅读。
2.突出网站或APP的重点部分
大多数的访问者，访问网站的时间一般都是很短的，如何让访问者在较短的时间里能够浏览到你想要呈递给他们的信息？这就要考虑到网站的页面设计。一般来说，我们会将最重要的信息，设置较为醒目，方便访问者在第一时间就会看到，增加他们对网站的兴趣，促进他们进一步的去访问。
3.站在用户的角度上
大多数的用户的上网习惯是，喜欢精简的现代字体，因此如果在他们阅读的过程中突然出现了其他字体，会让他们阅读起来比较麻烦，降低用户体验
4.内容与背景的颜色要有反差
作为一个普遍的常识，文章内容的颜色要与背景颜色形成反差，已达到增加用户的可读性。如果文字的色彩很重，那么配色浅色的背景会更加易读，背景和字体色彩过于相似会难以阅读，或者背景过于花哨也会显得阅读困难和档次低。
也可以在排版中用文字玩对比(如粗细对比、大小对比和疏密对比等)，如果所有的文字都很相似，你的作品将失去视觉层次，并显得很平庸。
5.网站界面字体的风格要统一
无论是在world还是PPT等一些列的文字书写的软件上都会存在多种多样的字体大小和字体种类，但是在网站界面中的字体，却不能设计的多种多样，而是要用规格统一的字体和风格，这样不至于用户在阅读时，被字体的风格绕晕，影响用户体验。
就拿达内教育移动界面设计的来说，达内教育的UI设计师们在对网页的整体布局风格和颜色上面采用了鲜明的颜色对比，突出重点内容，方便用户在第一时间，就能够看到，在字体方面，通过简单的几个字来阐述网站内容的全意，方便用户在很短的时间里就能够清楚地了解到企业的重要信息。如下图：这样的优势是让整个看起来更为简单明了，让用户看到网页时更为的舒适。增大他们在网站的停留时间。
原文标题：
原文链接：
你也许会喜欢如下的文章？
(责任编辑：IT培训网)
------分隔线----------------------------
------分隔线----------------------------南京乾学教育科技有限公司
南京乾学教育科技有限公司
南京乾学教育科技有限公司
南京市玄武区中央路302号垠坤创意中央21号楼206室
平面设计和UI界面设计有哪些区别？
有的人经常会把平面设计和UI设计划等号，其实两者是有很大区别的：
1）*个区别，实现过程不同。
平面设计实现过程是用印刷工艺去实现，比如一张名片，设计好了需要印刷出来才能使用，这时就需要借助于印刷工艺才行。UI设计实现过程则是运用程度代码，设计好了后通过程序代码让UI设计实现其功能。
2）第二个区别，完成设计工作的人数不同
平面设计一个人便可以完成全程的设计。老板或客户提供需求后，平面设计师便可以直接完成设计。 UI设计则需要团队成员一起设计方能完成，比如设计一个APP，需要有老板或客户给一个需求，然后产品经理，交互设计师，视觉设计师，程序员来配合起来才能完成。
3）第三个区别，工作的公司类型不一样
平面设计一般去的公司，是传统企业，广告公司居多。UI设计一般去的公司，是互联网企业，比如百度腾讯这样的互联网公司。
平面设计学习阶段主要是掌握AI和PS两大主流设计软件的使用，视觉识别系统的学习与制作以及平面设计的工作流程。
三、Web网页设计基础
通过这部分知识的学习可以掌握Web端设计规范、前端设计流程，构图与色彩的使用原理Banner设计技巧，三维辅助画面表现和专题的设计方法。现在C4D的运用也是一个热门趋势，大家也是可以深入了解一下这方面的内容。
四、移动端界面设计基础：
随着手机移动设备不断普及，对手机设备的软件需求越来越多，手机移动操作系统厂商正在不约而同地建立手机设备应用程序市场，给手机的终端用户带来巨量的应用软件。这些软件良莠不齐，界面各异，手机的终端用户在众多的应用使用中，*终会选择界面视觉效果良好，且具有良好体验的应用留在自己的手机上长期使用。面对用户对手机UI的要求，手机UI设计师如何满足用户要求，如何使自己设计的软件盈利呢?手机界面不同于网页和窗体应用的界面，手机UI设计师需要挑战小尺寸屏幕下的施展空间，需要将众多的信息放在小尺寸屏幕里，这无疑是一个巨大的挑战。
这部分学习内容主要包括产品流程及用户体验分析，icon设计制作规范及方法，ios&安卓设计规范，产品动效表现以及掌握AE中制作东西的基本方法。
五、前端基础：
ui设计师之所以要学习前端知识是因为我们的发展的方向绝不是一个简单的平面设计师，而是要成为懂设计、懂用户的用户体验师。学习编程，会一些前端，并不是说我们要和程序员抢饭碗，而是为了更好的把握用户的使用心理，了解用户的使用习惯，从而使自己设计的界面更能获得用户的好感。
前端的基础学习内容包括：Web页面构成与HTML标签、CSS基础与显示效果、页面文字效果与盒子模型、浮动效果与背景关系应用、定位效果与页面布局、网站特效与动画、光影与渐变色、页面元素的变形处理、3D特效、移动布局等等。学好前端绝对是UI设计师的加分技能。
如果做ui设计的有交互设计的思维逻辑，那么在进行具体设计的时候就会更加关注用户需求和用户体验，所以具有交互思维的ui设计师才是企业真正需要的，也是大家要努力培养自己的技能。
学ui到底如何选对UI设计培训学校呢？
首先，培训班的具体课程内容，这点相对来讲也是*重要的。毕竟大家都应该明白，只掌握皮毛很难再工作当中发挥实际效果，真正能够与市场需求相结合的课程才好。
其次，培训班的授课方式也很重要。从学习效果来说，相对于网络授课来说，老师能够更好的掌握学员的学习情况,更有针对性的进行指导，学生也能够及时与老师面对面交流。因此小班面授方式学生能够学到更多，学得更快。
再次，应该挑选口碑好的培训机构，如果只是一味的追求培训费用偏低的培训班，可能*终会导致得不到良好的效果，且就业也没有一个很好地一个保障。
再次，看培训班的专业程度，建议选那种专业做ui的培训机构，这样学到的东西更能符合市场需求。
乾学教育专注于UI设计培训，拥有多年互联网从业经验的专业老师亲临授课。
每个班有10名左右学员，乾学坚持小班化精品教学，只为确保学习效果。
持续推荐工作，就业有保障。
南京乾学教育科技有限公司
南京市玄武区中央路302号垠坤创意中央21号楼206室新手都头疼尺寸问题，其实并不复杂，关键是设计本身比较难把握。
先来看看各种iPhone的尺寸和分辨率，这张图写的很清楚。
竖屏点（point）
竖屏分辨率（px）
1125 x 2436
iPhone 8+, 7+, 6s+, 6+
1242 x 2208
iPhone 8, 7, 6s, 6
750 x 1334
iPhone SE, 5, 5S, 5C
640 x 1136
iPhone 4, 4S
iPhone 1, 3G, 3GS
iPad Pro 12.9
1024 x 1366
2048 x 2732
iPad Pro 10.5
834 x 1112
1668 x 2224
iPad Pro, iPad Air 2, Retina iPad
768 x 1024
1536 x 2048
iPad Mini 4, iPad Mini 2
768 x 1024
1536 x 2048
768 x 1024
768 x 1024
最新设计指南推荐：
虽然现在出来了Iphone X ，但是我们在工作中还是会按照750*1134来设计，虎哥总结一个精简版的设计流程方法，按这个做法就可以展开工作。
以PS工具设计IOS界面。
画布尺寸：
新建750×1334
分辨率72，像素/英寸。
常见的字体大小：
24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。
中文用苹方黑，英文用San Francisco，如果安不上也可以用Helvetica代替。
app所用的字体大礼包下载（虎哥整理的）
ios开发里单位是pt
750×1334尺寸的换算关系 1pt=2px，也就是说程序员拿到我们的px单位的标注稿，自己除以2就是pt了。
界面里的小图标常见的尺寸：
24px、32px，48px等，记住4的倍数比较好。
注意图标的尺寸要统一尺寸，以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大，需要调整下。
界面上的间距和元素尺寸：
以偶数为单位，不清楚的可以截图量大公司的APP界面作为参考。
750 x 1334 设计稿尺寸：
状态栏高度：40 px
导航栏高度：88 px
标签栏高度：98 px
设计稿实时预览：
安装一个可以在iphone上实时观看效果。
标注工具：
界面的图标切图：
用选中@2x @3x导出。
启动图标：
做24尺寸，一般做方形无圆角。然后用
自动切图一套图标资源丢给程序员就ok了。
交接给程序：
最好是一个界面一个文件夹。文件夹里包括：界面效果图，标注文件图，切图资源文件包。
值得注意的是引导页切图需要单独设计多套（640××××2208）这个可别傻乎乎的用Cutterman切几套图，这就尴尬了。
适配方法3个原则：（不清楚的在网站搜索适配2字）
图片等比缩放
测试界面：
程序实现DEMO版本以后，咱们要在测试机上好好检查下界面问题，及时跟程序沟通并更改。
干货资料：
可以看看下面这几篇文章：
以PS工具设计安卓界面。
画布尺寸：
如果想一稿适配ios，那就新建720×1280
分辨率72，像素/英寸。
如果单独设计安卓MD新规范的，那就新建20
分辨率72，像素/英寸。
720×1280常见的字体大小：
24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。
中文用Noto/思源黑体（是一个字体，叫法不同而已），英文用Roboto。
app所用的字体大礼包下载（虎哥整理的）
距离单位是DP
文字单位是SP
720×1280尺寸的换算关系 1dp=2px，文字1sp=2px。也就是说程序员拿到我们的px单位的标注稿，自己除以2就是dp和sp了。
20尺寸就是1dp=3px，文字1sp=3px
界面里的小图标常见的尺寸：
24px、32px，48px等，记住4的倍数比较好。
注意图标的尺寸要统一尺寸，以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大，需要调整下。
界面上的间距和元素尺寸：
最新规范MD的做法：
栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。
常见一般常用做法：
直接把ios的设计稿照搬过来，只不过状态栏，导航栏，标签栏按照安卓的来。
720 x 1280 设计稿尺寸：
状态栏高度：50 px
导航栏高度：96 px
标签栏高度：96 px
设计稿实时预览：
安装一个可以在安卓手机上实时观看效果。
标注工具：
PxCook 像素大厨
标注的时候，如果是720×1280尺寸设计的，就选对应的xhdpi，如果是20尺寸设计的，就选对应的xxhdpi。
界面的图标切图：
用选中下面所示，根据需要选择不同分辨率的导出。
界面中重复利用的资源切图需要做成点9图片：
主要是一些按钮，单色或半透明的背景块。图标不用做点9。
启动图标：
做24尺寸，安卓对图标的样式没有要求，你可以做各种形状都行，一般做方形无圆角的，各家手机厂商的定制系统会自己加圆角。
自动切图一套图标资源丢给程序员就ok了。
交接给程序：
最好是一个界面一个文件夹。文件夹里包括：界面效果图，标注文件图，切图资源文件包。
值得注意的是引导页切图需要单独设计多套（480×800、720××1920）这个可别傻乎乎的用Cutterman切几套图，这就尴尬了。
适配方法3个原则：（不清楚的在网站搜索适配2字）
图片等比缩放
测试界面：
程序实现DEMO版本以后，咱们要在测试机上好好检查下界面问题，及时跟程序沟通并更改。
干货资料：
可以看看下面这几篇文章：
最后说句：“对界面上的字号，间距不清楚的，多动手去截图，量一量优秀APP界面，多分析找规律。”
虎哥整理。
转载请注明： &
学UI就上学UI网！越努力，越幸运！
“学UI网 ”最值得关注的UI学习平台！ 每天发布高质量的设计教程和分享设计经验，服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课（），给大家提供更多免费学习的机会。想成为设计师的你快来关注吧！
【特色推荐】
” 海量APP截图，让你灵感爆发！国内最好的APP截图站。
“” 每一个作业题都尽量配有教程，交作业就有大神免费帮你点评作业，爽歪歪！
“” 专为UI设计学习者打造的资源＋学习，双用途的网址导航站。亲爱的，你收藏了吗？
你可能喜欢的：