问题：关于电商类IOS APP UI的设计求助
本人没有接触过电商这类APP的开发项目,但是现在因为突然来了一个要开发此类app的任务,无奈只能自己自学如何开发IOS,现在已经自学了一段时间,大致了解了,不过没有接触过实际项目是无法跨过的坎,还请有经验的牛人大致说下在电商类app,比如JD,天猫之类的UI主要是分别采用了什么样的组件..
例如最下面那个包含了"主页","分类","我的"这类东西的那一条以及顶上包括那个"扫一扫","搜索栏"的那一条可能是采用了哪类组件?以及相关的一些设计思想.
多谢解决方案1:
你可以先拿出你最想知道的部分讨论。不然真是无从说起。
解决方案2:
这个问题也太大了吧。。
以上介绍了“关于电商类IOS APP UI的设计求助”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/610361.html
上一篇： 下一篇：| 522: 链接超时
-- Event ID: 35ab613a0634661c
如果您是网站管理员，点击查看。如需网站监控，可以使用。
您的浏览器
百度云加速iOS App icon、启动页、图标规范UI如何设计_专心做教育_天涯博客_天涯社区
教育行业最新知识
今日访问：[$DayVisitCount$]
总访问量：68
开博时间：
博客排名：暂无排名
以下内容都是我在做App时通过自己的经验和精品的分析得来的，希望会帮助到你。但是有时个别情况也要个别分析，要活学活用。
一. App &Icon
在设计iOS App Icon时，设计师不需要切圆角，直接矩形就可以。
下面是App Icon需要的尺寸和命名（尺寸和命名不做解释）：
尺寸 & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 命名
1.57x57 px & & & & & & & & & & & & & & & & & & & & & & & & &&&&&&Icon
2.114x114 px & & & & & & & & & & & & & & & & & & & & & & & &&&Icon@2x
3.40x40px & & & & & & & & & & & & & & & & & & & & & & & & & &&Icon-40
4.80x80px&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& & & & Icon-40@2x
5.120x120px & & & & & & & & & & & & & & & & && & & & && & &Icon-40@3x
6.120x120px & & & & & & & & & & & & & & & & & & & & & & & &Icon-60@2x
7.180x180px & & & & & & & & & & & & & & & & & & & & & & &&&Icon-60@3x
8.72x72px & & & & & & & & & & & & & & & & & & & & & & & && &&&Icon-72
9.144x144px & & & & & & & & & & & & & & & & & & & & & &&& &Icon-72@2x
10.76x76px&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& & & & & &&Icon-76
11.152x152px & & & & & & & & & & & & & & & & & & & & &&& & Icon-76@2x
12.29x29px&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& & & & &&&Icon-Small
13.58x58px&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& & & & &&Icon-Small@2x
14.87x87px&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& & & & &&Icon-Small@3x
15.50x50px&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& & & & &&&&&Icon-Small-50
16.100x100px & & & & & & & & & & & & & & & & & & &&& Icon-Small-50@2x
二. 启动页
下面是启动页需要的尺寸和命名（尺寸和命名不做解释）：
尺寸 & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 命名
1.320x480 px & & & & & & & & & & & & & & & & & & & & & & & & &Default
2.640x960px & & & & & & & & & & & & & & & & & & & & & & & &Default@2x
3.640x1136px & & & & & & & & & & & & & & & & & & & & &Default-568h@2x
4.750x1334px & & & & & & & & & & & & & & & & &LaunchImage-800-667h@2x
5.px & & & & & & & & & & & LaunchImage-800-Landscape-736h@3x
6.px & & & & & & & & & & & &LaunchImage-800-Portrait-736h@3x
三.& App内图标
我会把App内的图标分成四类进行规范设计：第一类顶部栏内的图标；第二类底部导航栏内的图标；第三类内容区域的图标；第四类弹窗、浮层内的图标。
1.顶部栏内的图标
在设计顶部栏内的图标时应注意，图标的高度不能超过顶部栏高度的一半。以750x1334 px的尺寸为例，顶部栏高度为88 px，图标不能超过顶部栏的一半就是44 px， 但为了页面的美观感与整体性，图标的高度最好与顶部栏标题的字高度保持一直，一般图标的高度控制在32-36 px左右。
2.底部导航栏内的图标
底部导航栏内不仅只有图标，一般每个图标下都会有对应的文字，这种情况就比较复杂，因为你需要把图标距上间距、图标与文字间距、文字距下间距等因素考虑进去。图标与文字上下间距一般控制在20 px左右，文字大小在20 px左右，图标与文字间距控制在14 px范围内，最终图标的大小在40-44 px左右。 和顶部栏的原则一样，底部导航栏的图标不能超过其高度的一半，若底部导航栏高度为98 px，图标不要超过48 px， 再加上底部导航栏的文字48 px高的图标也不太合适，所以以我的经验之谈，最佳高度是44 px。
3.内容区域的图标
其实仔细研究就会发现，App里的图标分为两种，一种是可点击的，一种是起修饰作用的不能点击的。可点击的图标往往比起修饰作用的图标大。我在做内容区域的图标时为了使整体的App看上去比较统一，图标的大小范围和顶部栏、底部导航栏的图标上下不超过2-4个像素，基本和文字的高度一致。可点击图标范围在32-36 px左右， 不可点击图标范围在24-28 px左右。
4.弹窗、浮层内的图标
首先说一下弹窗和浮层的概念，好多同学对把这两个混淆。弹窗指程序运行出现较为严重的问题时，告知用户相关信息，有些会提供有用的选项。而浮层是指当用户轻点某个控件或页面中的某一区域时浮出的，半透明的临时视图。这两个部分的图标的可以控制在28-32 px左右即可。分类： |iOS与Android用户界面（UI）设计规范 - 简书
iOS与Android用户界面（UI）设计规范
相信很多人都在开发设计APP时会遇到很多界面上的问题，要以多大尺寸来设计？分辨率是多少？该怎么切图给开发......下面的文字就给出一点点技巧总结，但也要给合团队在开发时的习惯。每个工程师们所使用的控件，书写布局习惯来实际移交的图是不一样的，但八九不离十，都是遵循一个原则，便捷开发、自适应强的开发模式。iOS篇
一、尺寸及分辨率
设计图单位：像素72dpi。在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计，现在iPhone 6和Plus出来后有很多人会使用6屏幕尺寸来设计。如果是我来做的话，我会使用640×1136，对Plus做单独的修改适配，因为Plus的屏幕实在是大了，遵循屏大显示更多内容的原则这里本应该是需要修的了，有更好办法的话希望大家可以分享一下。Ps：作图的时候尽可能确保都是用形状工具(快捷键 U)画的，这样更方便后期的切图或者尺寸变更。二、界面基本组成元素iPhone的app界面一般由四个元素组成，分别是：状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。
PS：在最新的iOS7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变，尺寸高度也还是没有变的，只不过大家在设计iOS7风格的界面的时候多多注意下~三、图标尺寸
四、字体大小iPhone 上的字体英文为： HelveticaNeue 至于中文，Mac下用的是黑体-简，Windows下则为华文黑体，所有字体要用双数字号。下图是百度移动用户体验部（MUX）做过的一个小调查，可以看出用户在iOS app中可接受的文字大小。
五、切图切图是APP设计中的一个重要过程，关系到APP的界面实现，及各种适配性还有各种性能苹果在没6 Plus前，我们只需要提供两种图，普通图及视网膜屏幕图。以640××960是一样的）做的设计图的话就会好办一点。直接出设计图上的原大小图标，比如我们命名一个图片叫 img-line.png，我们给开发的图就要改变这个名字叫 img-line@2x.png 就是在后缀名前加上@2x表示视网膜屏的图，iPhone4的还需要把这个图尺寸按比例缩小50%，得到正真的img-line.png。然后把这两个图移交给开发，iPhone6的图在规范里是与5s使用的是一样的，也是@2x图。有些UI则需要做适当的适配，比如拉长，拉高，这个开发会去做。对于iPhone 6 plus的话范里给出的是@3x相信大家也知道是怎么回事，但如果要使用PS放大的话，大家做图的时候就需要使用形状工具来做，放大后还需要仔细微调，这里就不多做讲解PS： 在出可按的图片切图时需要注意图片的可按区域大小，有时图标很小，实际切出来的放在上面，用手指是按不到的，我们就需要对图片单独处理，拓宽图片的有效区域，这里是拓宽非放大，就是改变画布大小使图片尺寸面积扩大，使图片四周拓宽多余的透明区域 ，从而改变可按大小。六、颜色值问题iOS颜色值取 RGB各颜色的值比如某个色值，给予IOS开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根据开发的习惯，有时也用十六进制)七、内部设计1、所有能点击的图片不得小于44px（Retina需要88px）2、单独存在的部件必须是双数尺寸3、两倍图以@2x作为命名后缀4、充分考虑每个控制按钮在4中状态下的样式，如图：
一、尺寸及分辨率Android界面尺寸：480*800、720**1920Android比iPhone的寸尺多了很多套，建议取用720*1280这个尺寸，这个尺寸720*1280中显示完美，在中看起来比较清晰，切图后的图片文件大小也适中，应用的内存消耗也不会过高。二、界面基本组成元素Android的app界面和iPhone的基本相同：状态栏、导航栏、主菜单、内容区域。
Android中我们取用的720*1280的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。状态栏高度为：50px导航栏高度为：96px主菜单栏高度为：96px内容区域高度为：1038px (-96=1038)Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和菜单栏一样的：96pxAndroid为了在界面上区别于iOS，Android 4.0开始提出的一套HOLO的UI风格，一些app的最新版本都采用了这一风格，这一风格最明显的变化就是将下方的主菜单移到了导航栏下面，这样的方式解决了现在很多手机去除实体键后再屏幕中显示而出现的双底栏的尴尬情景。
三、图标尺寸Android设计规范中， 使用的单位是dp， dp在安卓机上不同的密度转换后的px是不一样的。
四、字体大小Android 上的字体为：Droid sans fallback，是谷歌自己的字体，与微软雅黑很像。同样，百度移动用户体验部（MUX）的调查中，可以看出用户可接受的文字相应问题。
具体大小，还是那句话，找自己喜欢的app界面，手机截图后放进PS自己对比调节字体大小，切记，一定是高清截图。五、切图Android设计规范中单位是dp，dp在安卓机上不同的密度转换后的px 是不一样的，所以按照设计图的px转换成dp也是不一样的，这个可以使用转换工具转换，开发一般会有，也有些开发会使用px做单位，因为做了前期的转换工作。六、颜色值问题Android颜色值取值为十六进制的值 比如一绿色的值， 给开发的值为 #5bc43e
设计为人民服务。当前所在位置： >
热门微信号：
iOS APP向用户征询授权的五种设计模式
作者： 浏览数：0 用手机扫描二维码
阅读，只需一秒。精彩，尽在掌握！iOS只给你一次机会去征询授权,一旦那些缺乏耐心和理性的用户(多数用户)出于无论什么原因而拒绝授权,其结果就是要么无法使...
iOS只给你一次机会去征询授权，一旦那些缺乏耐心和理性的用户(多数用户)出于无论什么原因而拒绝授权，其结果就是要么无法使用关键功能，要么需要退出app去到系统的Settings里面重新设置授权然后再回到app。所以，怎样尽可能确保用户在初次使用产品时一次性通过授权？翻译：C7210，腾讯ISUX（上海）交互设计师转载自微信公号：Beforweb对于iOS app，当功能涉及到推送通知、访问照片或调用相机、获取地理位置等等时，都需要向用户申请授权。申请会发生在app运行的过程中，而不是像Android那样在安装的时候就莫名其妙的问用户是否同意app调用某些系统功能。不过如今Android也在向iOS的方式靠拢。对于产品设计方而言，这里最大的问题在于，iOS只给你一次机会去征询授权 - 一旦那些缺乏耐心和理性的用户(多数用户)出于无论什么原因而拒绝授权，其结果就是要么无法使用关键功能，要么需要退出app去到系统的Settings里面重新设置授权然后再回到app。所以，怎样尽可能确保用户在初次使用产品时一次性通过授权？这是一个既有挑战性，同时又有点意思的话题。我们归纳了市面上常见的五种设计模式，供大家根据自己产品的实际情况进行参考。1.直接问，然后祈祷很多app会在初次使用的过程中直接弹框索取权限。确实是最简单的实现方式，但被拒的可能性也最大(除了那些足够大牌到用户没理由不信任的产品)，用户如果决定重新授权，必须完整执行前面提到的设置流程，因为这个弹框是唯一一次决定的机会。有些功能相对复杂的app更是会在初次加载的时候就执行一系列的授权申请，先是要求调用相机，然后问是否允许获取地理位置，最后还要让你授权接收消息通知。某些时候，这种简单粗暴的方式也确实可用，比如前面提到的，用户已经足够了解和信任这款产品的情况下。但对于多数产品，你不能做这样的假设；即便对于那些大牌，说到底也无法100%确保用户不会看走眼或习惯性的点击拒绝。2.诱导用户从本质上讲仍然是“直接问”的模式，但这类app会在询问时通过一些小技巧变着法的诱导用户点击“允许”。实现成本不会比第一种高出很多，但获取授权的几率会增大。看看Lyft的做法：3.问两次，让用户有所准备你也可以使用变通的方式在某种程度上突破“只能问一次”的局限，譬如在真正的系统对话框出现之前展示一个定制化的“假”的对话框。如上图所示，左屏当中的对话框完全是定制化的UI元素，用户点击OK之后才会出现真正的iOS授权申请。这种方式有两点好处：如果用户在“假”的申请中拒绝授权，那么你不会浪费掉唯一的那次“真”的系统授权机会，只需要关闭对话框即可；当用户将来再次需要用到相关功能时，你仍然可以通过这种方式征询授权。“假”的对话框在形式上可以自由发挥，譬如加入更多教学内容或引导元素。两次提问的情境是可以根据实际情况进行控制的，例如Shazam这样，将第一次机会放在进入实际app之前，与引导页当中的内容整合起来。4.等用户用到相关功能时再问另一种更加情境化的常见模式就是等到用户实际用到与系统权限相关的功能时再征询授权，例如当用户点击“当前位置”按钮时，询问是否允许使用当前地理位置，或是当用户进入拍照界面时，询问是否允许调用系统相机。这种模式的优点很明显，就是用户在实际功能情境中会对将要发生的事情更具预期，所以通过授权的可能性就更高。5.清单模式如果app较为复杂，功能涉及到的系统授权较多，那么与一个接一个的弹框相比，清单模式更具积极的引导性。例如下图所示的Periscope所做的这样，将所需授权的信息以清单的形式展示出来，使其在感觉上像是某种正式的任务流程，用户每点击一个任务便会弹出一个授权申请，同意授权后，该任务完成。如果用户拒绝授权？无论怎样努力，用户还是有可能拒绝授权。这种情况下，一些app会简单的告诉用户怎样一步一步进入iOS的设置当中打开授权。不过从iOS 8开始，app可以在自己的界面中提供deep-link将用户直接带去系统设置界面。下图演示的就是一旦用户拒绝在Shazam当中授权，他们仍可以点击“Go to Settings”按钮，一键进入系统设置，重新打开授权。当然，这并不属于引导用户进行授权的模式，但相比于从前来说，至少算是不错的补救措施。End.带你落地游学14天，量身定制的叙事化游历体验，亲临荷兰设计周，考察欧洲设计最前沿趋势。了解详情和报名请登录：或点击“阅读原文”↓↓↓↓↓
手机版地址：
微信号：uicner
原iconfans,UI中国-专业界面交互设计平台的官方账号.官方消息发布,分享优秀设计文章,UI招聘相关信息,行业消息,服务UI设计师群体!
TA的热门文章
推荐其它微信帐号
热门文章排行
(), All rights reserved 京ICP备号-12