TOUMA的用户体验设计

TOUMA的用户体验设计

 
   

IOS7设计师笔记(原创)【ios7设计的尺寸】

图标尺寸

IOS7推出后,图标尺寸规范略有调整,为了得到更加精准的显示效果,大家可以参考参考下。

下表列出了图标的标准尺寸,按照此规范zuo作图,可以使图标能在搭载IOS7的多种设备中正确显示显示。

(单位:px)


所有图像和图标建议使用png格式,避免使用隔行扫描的PNG图像。

配色方面不需要限制web安全色调色板。

图标设计线条画,而激活图标则增加填充,未激活状态的线条消失或者反白。如下图:



欢迎大家关注我的微博@Gaoyoungor,与你分享更多关于设计。


字体字号

Helvetica Neue仍旧是iOS的默认字体,但普通文本通常是以细体字展示,而不是常规或粗体。需要突出强调的文本通常用的是中粗字体(例如,导航栏标题)。

表格中的字号就是系统系统的标准字号了,所以大家不要出现一些奇葩的字号了,附件提供给windows平台下的朋友一种可替代的字体。

以下是我在一个项目中的实践。


UI布局

·表单


·导航栏



竖屏模式



横屏模式导航栏缩短


IOS7 UI Transition Guide 笔记

1.  桌面启动应用程序图标更新到iphone:120X120px, ipad:152x152px;


2. 启动画面要添加回status bar(顶部zhuang状态栏);


3. view controller 用full-screen layout;


4. 重新设计bar button 图标(线条化);


5. 按钮要使用无边化(多为文字直接作为按钮);


6. 使用相对布局,auto layout,尽量不要写死坐标和大小(是否预示着大屏iphone的到来?);


7. 用户可自定义字号;


8. 注意底部手势的使用,IOS7将优先响应系统的控制面板(从底部上滑手势,唤出系统控制面板,软件内部谨慎使用);


9.尽量去特效化去拟物化,保持界面元素平滑和层次感(这就是简约设计的难点了);


10. 在application:didFinishLaunchingWithOptions:里判断版本 6 or 7 来载入相关资源(IOS6可以和IOS7呈现不同的UI效果);


11. 状态烂透明,其它bar都是半透明的;UIBarPositionTopAttached代表bar背景延伸到status bar,总高128px(导航栏高度高度加状态栏), UIBarPositionTop代表不延伸;


12. Navigation Bar 默认是半透明,底部有1像素的hairline;tintColor去定义barbutton,用barTintColor去定义bar 背景。如果要用自定义的返回按钮,需要做一个MASK图像作为切换过渡用。 NaviBar的下部阴影要用自定义图像和shadowImage来定义,不要用过长的带阴影部分的图像来做阴影,因为在IOS7上,多出的像素会首先放到statusbar;


13. Toolbar ,tintColor定义item,barTintColor定义背景,在top边有一条1像素hairline,UIToolbarPosition已经弃用了,用UIBarPosition代替;


14. barbuttons,使用图像有2种方式UIImageRenderingModeAlwaysTemplate(默认使用),UIImageRenderingModeAlwaysOriginal(使用它来设定不是用tinting)(这表明导航栏里面的按钮时可以用图片的,只是比较纠结);


15. activity view controller里的图标要用黑白和透明度表示,抗锯齿处理,不要用dropshadow。图标大小是70x70px,居中;


16. Ios7 的ImageView包含tintColor特性,在UIImageRenderingModeAlwaysTemplate模式下,tintColor会应用到该图片上;


17.slider在ios7里面可以用minimumTrackTintColor,maximumTrackTintColor, andthumbTintColor分别设定最小值颜色,最大值颜色,和触摸时颜色。如果设定成nil,就使用默认;


18. 切换按钮在ios7里面动感十足,可以用onTintColor, tintColor, andthumbTintColor设置开关和触摸样式;


19. Alert弹出框在ios7里面强制使用默认样式,如果你需要第三个按钮,将在默认2个按钮的上方显示


原文地址:http://blog.csdn.net/wangxiaohui6687/article/details/12704987

 
 
评论
 
 
热度(15)
  1. 田淇TOUMA的用户体验设计 转载了此文字
  2. 支小支TOUMA的用户体验设计 转载了此文字