一个app的设计思路(app的设计思路怎么写)

　　大连创课教育：UWP APP设计指南UWP即Window10中的UniversalWindowsPlatform的简称。即Windows通用应用平台。UWP不同于传统PC上的exe应用，也跟只适用于手机端的APP有本质区别，它并不是为了某一个终端而设计，而是可以在所有win10设备上运行。Surface,Xbox,PC,WindowsPhone,TV,etc

　　响应式界面

　　为了适应如此之多的设备，不同的显示配置，为用户提供一致性的良好体验，减少学习成本，微软的UWP引进了不少新技术，这些技术的标准也就是UWP设计的基础。为了让Win10app在所有设备上都能良好运行，首先就要提供响应式的UI控件和新的布局模式来适应不同尺寸下的变化。“有效像素”“断点”“自适应设计”在UWP中均有所应用。

　　1.有效像素设计(EffectivePixelsDesign)

　　每个屏幕都有固定尺寸和固定密度的像素点组成，当设计UWPAPP的时候，需要考虑的是:不是为物理像素而设计，而应该考虑用有效像素来设计。例如当你设计一个1*1px的元素时，并不是所有设备上都展示出来是1px的点，可能在高密度显示屏上它是200*200个点。拿手机屏幕和正常电脑屏幕来比较的话，如下图所示，肉眼看到的大小虽然一样，但实际大小不同。

　　在设计时，你可以忽略像素密度和实际屏幕分辨率，而是针对同一大小级别有效分辨率进行设计。通常在72DPI下设计即可。

　　当系统缩放UI时，会按照4的倍数进行缩放。若要确保保持清晰的外观，请将UI元素的边距、大小、和位置以及文本的位置为4个有效像素的倍数。

　　实际应用例子:

　　2.设计断点

　　当你考虑要设计一个win10app的时候，考虑到使用win10OS的设备如此之多，那么你只需要为几个主要的尺寸来设计，其他交给程序自己完成就可以了。这些主要尺寸就叫做断点（breakpoint）.

　　通常这些断点屏幕尺寸的设备的有效像素窗口大小为:

　　大型，如电脑电视-1366*768

　　中型，如平板-640*1024、1024*640

　　小型，如手机-320*569

　　3.自适应设计技术

　　最后一个重要技术就是自适应的技术了，微软为研发者提供了六种不同的技术来将UI界面自适应。

　　?重新放置

　　当UI界面尺寸变化时，UI元素可以自动调节其位置来适应面板大小的变化。

　　?调整大小

　　自动调整UI元素的margin和尺寸，以满足宽屏和手机屏幕等的切换。

　　?重新排列

　　可以自动改变UI元素的布局流，例如但屏幕变成宽屏时，过长的一行文字容易让人厌倦不易读，因此可以改变文字的流向，分为两列排列。

　　?显示

　　在断点处，显示额外的UI元素。这种技术可以展示更多的功能。

　　?替换

　　当在大屏幕上某些UI控件不合理时，可以自动替换为另外一种表现形式的控件来优化用户体验。如下图中在宽屏时横向的导航比较明显，但是屏幕变小后，会自动变成纵向的导航样式。

　　?重新架构

　　例如在大屏幕上一个页面中，左侧展示主导航，右侧展示细节是可以的，但是在小屏幕设备上时，就会自动将UI界面划分成两个页面了。

　　信息架构

　　微软对信息架构的要求还是比较严格的，通常有三个级别的页面：

　　?HubPages:作为枢纽页面，提供了对整体内容和功能的概览。它们链接到不同的部分页面。

　　?SectionPages:作为局部页面，例如图示中展示了关于这个部分的内容和功能，可以使用磁铁或列表来展示这些内容。

　　?DetailPages:作为细节展示页面，这是最底层的页面，通常用来展示内容的详细信息，可以包含文本，图像，音频视频等等。

　　而这每个层级的页面，可以假设它们都由三种类型的UI元素组成，即：导航、命令和内容元素。

　　?导航元素：帮助用户选择他们想要显示的内容，包括列表，超链接和导航。

　　?命令元素：例如处理、保存和共享内容的操作，命令的元素包括按钮和命令栏。还可以包括看不见的键盘快捷键或隐藏手势等。

　　?内容元素：显示内容，可能是一篇新闻报告或是购房咨询等，包括图片、图标、链接、文字等。

　　1.导航

　　关于对等导航，建议使用选项卡或导航窗格。

　　选项卡导航：当你预期用户会在页面之间频繁切换，而且存在2-5个页面的时候，可以使用选项卡导航：

　　导航窗口:当预期用户不会在页面间频繁切换，希望节省空间，页面大于5或大于7（横向无法展开），那么可以考虑使用一个抽屉菜单的导航窗口。

　　关于分层的导航，有中心导航和大纲-细节导航两种。

　　中心导航:以整个内容页面作为中心，提供其子页面的预览和概要，这种以内容页面直接作为导航入口的集中导航方式有助于探索和发现。适合媒体、新闻阅读和购物应用。

　　大纲-细节导航:左侧显示摘要列表，右侧显示对应的项目细节页面。如果你预期用户在子项目之间切换会比较频繁，你希望用户能够对单个项目组执行高级别操作例如删除和排序，并希望查看详情的时候，就可以使用这种方法，大纲-细节导航方式非常适合于电子邮件收件箱、联系人列表和数据输入。

　　2.命令

　　如果一个命令非常重要，希望用户不断使用，可以将其放在内容区域某个其影响的对象附近，或者放在这些对象上，使他们显而易见易于使用。

　　如果命令不常用，只是辅助功能的命令，那么亲考虑将其放在屏幕顶部或底部，例如照片编辑工具，所有的命令都显示在底部。命令栏也可以叫做“应用栏”

　　大连创课教育：UWP APP设计指南 命令栏结构：通常显示状态和操作。可以提供“查看更多”的按钮[…]，点击会查看更多命令，这种浮出的菜单称为“溢出菜单。