appUI设计文档.docx
相关任务1 .3-4张大小610*1136640*960700*13341242*2208引导图片和一张启动画面图片(短暂先做640*1136大小其他图片押后),主要向用户介绍应用的相关操作,内容介绍等之类的信息图片2 ,app主界面3 .最新物流资讯生界面和显示正文的界面界面要求扩展性好(便利以后新功能的增加)半扁平化(详细见适合开发者的Ul设计7条法则.doc),其他Ui设计相关见文档(IOS-UI.pdf)图标设计可参考图标设计doc)细黑环节包括以下内容:尺寸:UI元素的尺寸以及中间的间隔约束:布局的哪些部分是允许拉大的,哪些不允许颜色:字体的颜色,边界,背景等等一一给他们一个名字+RGB/HSB值字体:按钮,标签等等的字体一一包括重电(机体斜体之类的)以及尺寸,你在设计中用到的全部字体,运用TTF格式资源:在哪运用他们以及它们的名字图片资源:全部的单独的Ul元素图片,Wx(正常辨别率)以及2X(辨别率翻倍版本,png格式icon:app的全部icon(包括retina版本的).Png格式数等相关内容做成图表分类好尺寸叁考像素分辩率1242×2208PX750x1334p×640x1136px倍率3X2X2X3?辑分解率414x736pt375x667pt320x568pt梅理尺寸6.22X306英寸544x2.64英寸487×2.31英寸屏“受度401ppi326ppi326ppiDPI154163163(详情见尺寸弁数X18文件)iPhone6PlusiPhone6iPhone5(S设计要点总结依从:以内容为主角,其他都是配角。所运用的元素应当作为内容的补充,不要运用会分散人留意力的视觉元素及内容争抢Fl光。简化:将用户界面简化到只保留最核心的美感.每次在你要添加新元点时都应自何:是否必要?暇如你的应用不屈于嬉戏或者没有特定的主翘,那么靖慎凿运用大量的材质、3D效果和多重阴影,将关键放到功能性颜色、协调渐变和美观的文字上。“S*MCEFiTun«sFgtigl没构国庆效果的平滂中性色目,可视需要使用淅变*注外于文字和序亮的图片Th。SbowGoocOnA11*<ft6mcfde4muc.<Kam12atSXSWhMtoBc*o<(MWcan!rtw<fc919»check2*ciu>Mpbo*oaAndsohhighuoftiv7徜单任阈色A>Iimea<woIOCAi9)u.VWwVM-MScAw»1tnMWV1.atostfromthoFestivai内容最大化:内容应占满盛个屏幕,给内中的元素留出最大的空间。不要运用多重容罂,将滚动区域最大化以便给交互招出更多空间。,曲崇地满壁个宽度.导航栏占满空沏NoSemC4.Vpm19ThursdayTodayNowIOpmIlpm12sSeoulClearIZr由于西布定多大,内容可以使用较大的字体图像22616717721S197FridaySaturdaySundayMondayTuesdayYKX),颜色:运用惹眼的颜色表现能够点击或须要突出的元素。颜色和中性色调选择的正确及否聘确定你设计的成败。这是iOS8设计中将要深层次讲解的一个方面。NoSerncV:21pm使用单一的颜色去示可以点击的区域UpdatesPurchased用户界面使用了淡雅的柔色调凸显内容AvariUbIeUpdates-Concertswi.2.71.31M6UTOATt非激活状态使用淡灰色文字即时内容为了简化用户界面以及突出内容,文字将占到整个屏幕的50%到90%。考虑到这一点,你应当选用美丽的字体,通过设定适当的粗细、线宽和颜色使其达到视觉美观、适合阅读的状态。这一方面聘在文字部分进行更深化的介绍,Scratchthesurface:MicrosoftOfficecomestoiPadWord.Excel>ndPowerPointwouldbco11wrateblnsIPAdappskxtime.TheappsWMbeavalabteforyouwanttoopenandvwdocimemSproadsbMsandPfwenUtkxnYbuneedastacnpt>ontoIAcrosofVsOMce365se<vc«Hyouwanttocreateor文字城满屏IB50-90%空间.做的濠凫一些.大号字体,对比明显文字河距和结构恰当IbeyfinallylookedinthemirrorandrealizedtheyneededtogowiththecrowdintermsofiPads.Omf»m.WMi*«FBRCapMU*tsTha11wH”Mc<o*oftOtctoriPadhad负空间运用负空间凸显内容。你所能看到的东西越少,就越能将留意力全部集中到仅有的物体上。负空间能够超出呼吸的余地。不用在屏幕中堆砌太多的结构和无用的视觉元素.NoServicee9:38Pm100pxiPadAiriPadwithRetinadisplayFeatunnganA6Xchip.iSightcamera,andUltrafastwireless.From$499.Buynow>图标状态用于导航的图标有两种状态:轮廊及填充。运用轮廓的好处是不分散留意力。假如对图标进行填充,就会转移人的留意力。另外其还可能表示当前页面为活动页面O©ORecentsContacts明哧让一切明显易佳。按钮应当表现出自己的功能,文字应当便利阅读并留出舒适的间距。你的内容应当明确表现出应用的功效。例如,假如是有关咖啡的应用,则应当能止人联想到咖啡豆、浓缩咖啡和咖啡的棕褐色。文字要便利阅读在视网膜醉幕上,文字的大小不能小T22px.最佳阅读尺寸为32px“T镭为50TOoPX副标题30-50px三右FullscreenbrowsingThereisnosuchthingasantheglobalbrowsingexperience.IhavebeenSXUdyingandworkingontheWCbforabouteightyears,butnowadays,forsomereasons,Iamcomingbacktoexperiencebrowsinglikeanormalperson,a运用作用明确的图标图标不能含混不清,应当明确表现出自身的作用。在可能的状况下,尽量运用文字协助。假如你运用了图标,那就肯定不能在其他地方运用及当前图标类似的其他图标,否则会让用户看不懂。同样,不要运用,后退”或齐“提交“这种太泛泛的文卞,而应尽可能明确,例如“返回首页”或者“注册新账号”等。更多细微环节请阅读图标部分。NoSwvcaT12:02p<n寸才T_.图标应各处一致,方便好认Messenger01.'1色二、Tite.Aki23Q;49HpTite40degw描述性画面每个页面都应说明自己的用途。尽量削诚运用品牌内容,代以明确的画面标题,假如采纳了标卷栏,则还应运用富亮的当前标卷状态。说明解幕内答的标题x不使用33标.可攥作文字昭确显示Jr尚用文字更方便理解色的含义颜色是有含义的“你可以运用红色、绿色,蓝色和中性色调分别表现破坏性操作、确认操作、链接和非活动状态。假如将这些颜色用做其他用途则会误导用户。例如,删除按钮上肯定不要运用绿色。深度深度可能是最难理解的一个部分f.这是个特别抽彖,同时又很有力而独特的概念。深度是指全部内容都应当具有关联和过渡关系。在其实生活中,当你从一个房间进到另一个房间中时,你会产生过渡和距离感,这样你才不会迷路。这个理念同样适用于用户界面.,对人和人所存在的现实的冷漠,是设计的唯大忌。'-DieterRams过渡界面从个人角度来讲,我认为这是iOS8最有意思也最独一无二的一方面,每个屏幕之间的过渡、桌面缩放成文件夹然后缩放到应用。从传统角度来说,这种技巧很难操作,但XCOde5让这切变得简单实现,有关这部分技巧将在动画部分进行详解.模糊背景背景不能影响到内容的清楚度.将背景模糊化不仅能让你保证其颜色的自然,同时能够突出前最。模糊并不是无中生有的效果,它在现实生活中也其实存在,比如你定暗看某个物体时,其他物体就会变模糊。一切为了讨喜在指南中有3项能够让应用出彩的内容没有被提到:动画,手势和音效.这3项内容很简单用过火,所以要谭慎。动画动画不仅能作为画面之间的过渡,还能给你的设计增加趣味性。另外还能让简单被忽视的元索受到关注。手势自iPhone5起先采纳长屏幕以来,后退按钮按起来就不那么便利了.所以说,手势虽然比不上眼睛看得见的视觉按钮,但也可以作为视觉交互的一个延长。其对于水平比较高的用户来说特别便利。而随着我们大家的水平日渐提高,视觉提示正渐渐让位给些真正有用的功能。音效音效在应用中的运用很少,但其却能将一项平凡的任务转变成令人激烈的体验.通过音效,大家不用眼畸就能知道你运用的是什么应用。假如能让音效达到耳熟能详的效果,你就能以最小的努力减得很大的胜利。三条规则下面这3条极为亚要的iOS设计规则是万万不行忽视的:思索触摸界面、提高文字可读性并针对iPhone4进行优化。触摸设计按钮应当便利好按.在视网膜屏幕上,按钮的大小应当为60-12OPX高.最佳高度为88px0在极少数状况下,可以为文字内部的链接设定44px,但运用时要慎S用户可能很难按得到。即便是纯文字按钮也应当有至少60px的可点击区域。宽度应及高度相I可.可读性在视网膜屏幕上,文字大小不能小于22px,最佳阅读字体大小为32px。运用120-140%的线高可提高阅读体验。1.abelOne1.abelTwo1.abelThree