UWP学习记录2-设计和UI之布局

1、导航基础知识

应用里,多个页面会有层次关系或者对等关系。这两种关系,通常在一个复杂应用里都会存在,而关系的选定依据:

对于对等导航,一般用选项卡(tabs)或者导航窗(nav)来作为导航元素实现导航跳转。而对于层次关系,则使用中心(hub)来提供子页面的预览或摘要,或者使用大纲(master-details)来实现导航。

除此之外,返回(后退)和链接也可以用来导航。启用系统后退导航支持的方法是注册 BackRequested 事件的侦听器。标题栏后退按钮的启用,后面看到标题栏的时候再做了解。而后退按钮的响应,需要参照“自定义后退导航行为指南”,后缀用起来可能会感觉跳转莫名其妙。更多Frame和Page类的细节,应用视图的细节,也留在以后再看。

2、命令基础知识

使用正确的命令元素进行交互,也就是说,做什么事就该用什么控件,不然就不符合常人的使用习惯。对于常用的元素,它们的交互关联是这样的:

将命令放置在合适的图面上,也就是说,命令元素该放在什么地方,也是需要复合使用习惯的。常见的位置有:画布(内容区域)、命令栏、菜单、对话框等。

除此之外,对于一些操作,例如删除文件、重命名、购买等,可能还需要提供确认或者撤销操作。

3、内容基础知识

内容方案有三种:使用、创建、交互式。

在侧重于使用的应用中,内容元素获得最高优先级,后跟所需的导航元素,从而帮助用户查找他们所需的内容。 侧重于使用的应用示例包括电影播放器、阅读应用、音乐应用和照片查看器。

在侧重于创建的应用中,内容和命令元素都是最重要的 UI 元素:命令元素使用户能够创建新的内容。 示例包括绘图应用、照片编辑应用、视频编辑应用和文字处理应用。

在具有交互式内容的应用中,用户将创建、查看和编辑内容;许多应用都属于此类别。 这些类型的应用的示例包括:业务线应用、库存管理应用,以及使用户能够创建或修改食谱的烹饪应用。

常用的内容元素如下:

4、更多布局、面板相关的知识

以后再做深入。

UWP学习记录2-设计和UI之布局的更多相关文章

  1. UWP学习记录11-设计和UI

    UWP学习记录11-设计和UI 1.输入和设备 通用 Windows 平台 (UWP) 中的用户交互组合了输入和输出源(例如鼠标.键盘.笔.触摸.触摸板.语音.Cortana.控制器.手势.注视等)以 ...

  2. UWP学习记录4-设计和UI之控件和模式1

    UWP学习记录4-设计和UI之控件和模式1 1.控件和事件简介 在 UWP 应用开发中,控件是一种显示内容或支持交互的 UI 元素. 控件是用户界面的构建基块. 我们提供了超过 45 种控件供你使用, ...

  3. UWP学习记录10-设计和UI之控件和模式7

    UWP学习记录10-设计和UI之控件和模式7 1.导航控件 Hub,中心控件,利用它你可以将应用内容整理到不同但又相关的区域或类别中. 中心的各个区域可按首选顺序遍历,并且可用作更具体体验的起始点. ...

  4. UWP学习记录9-设计和UI之控件和模式6

    UWP学习记录9-设计和UI之控件和模式6 1.图形和墨迹 InkCanvas是接收和显示墨迹笔划的控件,是新增的比较复杂的控件,这里先不深入. 而形状(Shape)则是可以显示的各种保留模式图形对象 ...

  5. UWP学习记录8-设计和UI之控件和模式5

    UWP学习记录8-设计和UI之控件和模式5 1.日历.日期和时间控件 日期和时间控件提供了标准的本地化方法,可供用户在应用中查看并设置日期和时间值. 有四个日期和时间控件可供选择,选择的依据如下: 日 ...

  6. UWP学习记录7-设计和UI之控件和模式4

    UWP学习记录7-设计和UI之控件和模式4 1.翻转视图 使用翻转视图浏览集合中的图像或其他项目(例如相册中的照片或产品详细信息页中的项目),一次显示一个项目. 对于触摸设备,轻扫某个项将在整个集合中 ...

  7. UWP学习记录6-设计和UI之控件和模式3

    UWP学习记录6-设计和UI之控件和模式3 1.按钮 按钮,响应用户输入和引发 Click 事件的控件. 使用<Button>就能创建一个按钮控件了.按钮是 ContentControl, ...

  8. UWP学习记录5-设计和UI之控件和模式2

    UWP学习记录5-设计和UI之控件和模式2 1.应用栏和命令栏 CommandBar 控件是一款通用.灵活.轻型的控件,可显示复杂内容(如图像或文本块)以及简单的命令(如 AppBarButton.A ...

  9. UWP学习记录3-设计和UI之样式

    UWP学习记录3-设计和UI之样式 1.颜色 在系统的“设置”>“个性化”>“颜色”里,提供了主题色选择.选定主题色后,会根据颜色亮度的 HSB 值创建浅色和深色的主题色. 应用可使用阴影 ...

随机推荐

  1. [Objective-c开源库]HHRouter

    ---恢复内容开始--- 目的 统一客户端内部和外部跳转处理,支持传参数 代码 添加vc,block映射 针对路径做映射,如/user/:userId -> UserViewController ...

  2. BLAST套件

    Blastn是将给定的核酸序列与核酸数据库中的序列进行比较: Blastp是使用蛋白质序列与蛋白质数据库中的序列进行比较,可以寻找较远的关系: Blastx将给定的核酸序列按照六种阅读框架将其翻译成蛋 ...

  3. vim 添加php自动补全 并格式化代码

    自动补全,修改/etc/vimrc的配置 vim /etc/vimrc 添加: filetype plugin on autocmd FileType php set omnifunc=phpcomp ...

  4. iOS10 权限崩溃问题

    iOS10 权限崩溃问题 原文: http://blog.csdn.net/runleelrg/article/details/51673025 今天 手机升级了 iOS10 Beta,然后用正在开发 ...

  5. Web APP 之rem的使用

    移动端web app的开发,之前开发直接使用px像素做单位,这样子做对于传统的PC端开发来说,个人比较习惯,但是对于移动端在来,有说逞强.最明显是切图效果与设计师想达到的效果有些差距,比如<he ...

  6. 把两个table放在一个Repeater中显示

    DataTable dt; DataTable dt1; HLoanApplyInfo applyInfo = HLoanApplyBll.GetModelById(FLoanID); FLoanID ...

  7. IE浏览器版本判断 HTML代码

    <!--[if IE 6.0]> <div id="noie6" style="z-index: 20002;border: 1px solid #F7 ...

  8. 收集免费可用稳定的vpn

    收集免费可用稳定的vpn,经常用到,所以记录一下,方便自己不备之需. 1,https://www.lvbeivpn.cc/share.shtml?id=a3bd9527225d4746bb3a5761 ...

  9. hibernate id 策略

    @Id@GeneratedValue(generator = "paymentableGenerator")@GenericGenerator(name = "payme ...

  10. [PHP][位转换积累]之异或运算的简单加密应用

    异或的符号是^.按位异或运算, 对等长二进制模式按位或二进制数的每一位执行逻辑按位异或操作. 操作的结果是如果某位不同则该位为1, 否则该位为0. xor运算的逆运算是它本身,也就是说两次异或同一个数 ...