首页 > 网页教程 > 设计分享 > Windows Phone 8 UI设计指南分享

Windows Phone 8 UI设计指南分享

时间:2014-08-30    来源:优设网

我很羡慕Windows 8的团队,他们有自己专属的设计指南,指引人们构建出完美的Windows商店应用。因此,我决定要成为先行者,为Windows Phone 8做点类似的事情。这有一个推荐清单,列出了那些你在搭建windows phone应用时应该考虑的事情。此清单并不详尽,仅做参考。这篇文章是参考了多处资源整理而来,大多来自WPDPS (windows phone depth partner support),它们基于大量的应用审核和案例研究,这是一个非常好的资源库。而正是因为我发现这里的东西并非公开共享的,才促成我整理这些资源外加写一些小贴士来分享给大家,它们并不是什么新的东西,只是不易被看到或是了解。再次感谢WPDPS,也期待有越来越多这种有用的资源可以体现到windows phone的开发中心。

1. 元素对齐与边距

所有的页面都应遵循左边距12px或24px。

内容,标题,标头以及标头的图标也应左对齐,距离左边界为12px或是24px。

如果有需要进行右对齐,右边距也应该是12px或是24px。

UI设计师干货!Windows Phone 8设计指南

小贴士: 在调试模式运行应用时,你可以查看由25*25红色方块组成的半透明网格。这些方块是以24px边距填充页面的,并且他们之间的距离是12px,这也恰恰体现了windows phone设计方块的魔力。这些网格可以帮助你迅速找出任何对齐的问题。

UI设计师干货!Windows Phone 8设计指南

当列表的字段与数值成对出现时,应以两组左对齐的队列出现,或是像系统联系人应用中详细信息页面的设计那样,标题在内容的上方。

UI设计师干货!Windows Phone 8设计指南

2. 元素间距

元素的间距应该在水平和垂直两个方向上保持一致。建议元素以12px的间距出现,以遵循设计网格。

UI设计师干货!Windows Phone 8设计指南UI设计师干货!Windows Phone 8设计指南

3. 控制点击响应

当使用诸如按钮、列表项等标准控件时,应该使用系统标准的倾斜效果

不要使用背景、前景或是外框颜色变化

其他控件,不采用动画或是颜色的变化是允许的

在点击时,任何信息的颜色变化都是不允许的。

4. 列表

列表项被点击时,都应以倾斜动画表明。

UI设计师干货!Windows Phone 8设计指南

除了在选取器中,列表项都不应该有选中状态。

请在应用中使用一致的字体,列表项的文字至少应有12像素的高度,并且是容易点击的,同时确保文字在所有角度和大小下的可阅读性。

背景

不建议使用背景,尽管他们可以传达品牌并且增加一些对比度。取而代之,你可以给文字前景加一些相关元素。

布局

用文字的大小和颜色建立列表项的层级

列表增强

例如在菜单中,不要使用列表增强的设计。除非他们之间需要有明显的差别。有条经验法则:在圆圈里的图标意味着操作而不在圆圈里的往往只有指示作用。

UI设计师干货!Windows Phone 8设计指南

可滚动内容

如果在页面中有可滚动的内容,你需要在内容的底端留出95px的距离,这样内容就不至于贴着页面的最底端。

例如,下图就是一个只比可视区域高出一点点的页面

UI设计师干货!Windows Phone 8设计指南

当用户滚动到页面的最底端时, 会出现橡皮筋的效果,内容会被稍稍拉离页面底部。当滚动动作结束时,内容会重新弹回页面的边界。

UI设计师干货!Windows Phone 8设计指南

虽然这样可行并且看起来还尚可,但是把内容一直伸展到页面底部并不是完美的。最快解决的办法就是在页面底部设置95px的距离,为内容模块与底部边界腾出一些空间——不管是针对手机屏幕还是底部的菜单栏。这样看起来会更顺眼。

UI设计师干货!Windows Phone 8设计指南

在系统的联系人应用中的介绍或是历史页面,你都能看到同样的底边距。还有在日历应用中的新建邀请页面,亦或是IE浏览器的设置页面,也是一样的处理。说到设置,你可以到系统的设置应用中试试滚动到底部。

5. 枢轴

枢轴页面

所有的枢轴使用至少需要两个页面

枢轴页面中的禁用控件

拨动开关

滑动条

地图控件——除非它们是静态的(例如缩放和平移手势应被禁用)

浏览器控件——除非它们是静态的(例如缩放和平移手势应被禁用)

手势冲突

提供水平滚动区域或是水平滑动手势的控件都是不允许在枢轴页面中应用,因为水平滑动的手势已被枢轴页面间的切换占用。

UI设计师干货!Windows Phone 8设计指南

空的枢轴页面

如果某个枢轴页面的内容显示取决于用户的操作,应该使用占位符文本/图片来提示用户。例如,当“未读邮件”的枢轴页面中没有内容时,页面不该被移走,保留的同时应该显示简单的信息来说明当前没有可用的内容。

UI设计师干货!Windows Phone 8设计指南

相关推荐
20个精致漂亮的视频播放器界面设计欣赏及点评
视觉设计:页面构建的审图与细节
15个超棒的无线移动终端UI设计案例赏析
响应式网页设计正成为移动互联网大势所趋
浅谈界面设计中的结构设计
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
国外精彩网页界面设计案例赏析
Photoshop教程:提高IOS设计效率的30个要诀分享
网站专题页面的视觉设计及结构布局要点分享
另眼观看用户界面扁平化设计的不足之外
产品视觉设计与用户心理的有趣现象
10个漂亮实用并附带源码的Web设计教程分享
优秀移动APP应用图标设计指南
在视觉设计中对像素的深度解析
什么是扁平设计?如何创建扁平化设计风格?
色彩情感对用户体验设计的影响
换汤不换药?看应用们如何“为iOS 7设计”
高效UI设计秘笈 Photoshop CC使用技巧图文教程
界面设计教程:如何做好扁平化设计之交互篇
移动应用图标配色诀窍 APP界面配色设计教程
产品设计教程:提升用户使用黏性的6个诱惑手段
扁平化:回归真实的设计
iOS7用户界面设计的10个准则分享
UI设计师自学记:抄袭别人,超越自己
APP设计经典:Pinterest的交互细节
从引导页设计说起 谈谈如何提高产品体验
游戏网站设计案例分享:聊聊那些让页面更加出彩的设计
8个评价UI设计作品好坏的标准
20个最火爆的Behance网页设计及UI案例解析
大开眼界!2014年最逆天的UI设计
界面设计必备:全方位科普常用的字体规范
手机屏幕尺寸扩展如何影响用户体验设计?
那些丑丑的应用图标 设计的人是怎么想的
产品设计:FEEDLY创始人再聊改版实战经验
写给初学者:移动站点app开发尺寸基础知识

分类导航

教程推荐

热门特效

热门教程