最近复盘各终端设备web端/桌面端/大屏端的设计重点，自己在设计中的经验与大家交流

说到WUI大家会认为是网页设计，今天解析下WUI还能实现些什么：

操作系统大家都知道微软和苹果，操作系统设计就属于WUI范畴；

电脑上安装qq，微信，他们都是桌面端；

2*2或3*3个，4个或9个电视组成大屏端。

web端访问IP地址以网页形式展示，屏幕显示宽度分为980px，1200px，全屏这三种。

展示型站后台采用.net开发语言，大型后台系统采用java开发语言。

桌面端采用.net开发语言，系统桌面上点击应用图标可以全屏显示应用，除键盘鼠标操作外还可以实现显示器触摸屏功能。

大屏显示分辨率为1920px*1080px，要考虑显示屏属性，设计要高对比度，灰色要又颜色倾向，否则看不清。

下面说说UI设计风格，设计师提高技能必备网址整理，UI设计师协同工作工具。

=========================================================

UI设计风格

Windows Phone的 Metro风格

Metro(美俏)是微软在Windows Phone 7中正式引入的一种界面设计语言，也是Windows 8的主要界面显示风格。

今后的微软产品中将更多的能看到Metro的影子。

据悉，为避免与德国公司Metro AG可能存在的商标侵权纠纷，微软营销部门已经决定在描述Windows 8及其以上版本或Windows Phone界面时，放弃使用“Metro”一词，而启用“Modern UI”（现代用户界面）作为替代词汇。

而事实上，在微软分发给消费者的宣传资料中，就已经开始使用“Windows 8”这一词汇来代替“Metro”的说法，“Modern UI”设计则主要用于描述微软通用应用。

强调信息本身的Metro UI是一种界面展示技术。

Metro的设计意念来源于交通局巴士站站牌机场和地铁的指示牌给了微软设计团队灵感，设计团队说Metro是来源于美国华盛顿州金县都会交通局（King County Metro）的标识设计，其风格大量采用大字体，能吸引受众之注意力。微软认为Metro设计 [2]  主题应该是：“光滑、快、现代”。Metro的图标设计也会不同于Android和iOS。

“Windows8”推出的一个专为触摸而设计的最新Metro风格界面，能向用户显示重要信息，这个界面同时支持鼠标和键盘，并应用于平板设备。Metro风格界面设计风格优雅，可以令用户获取一个美观、快捷流畅的 Metro 风格的界面和大量可供使用的新应用程序。这些应用程序拥有远远超出图形设计范畴的新特性（一个平台）。正如微软所展示的那样，通过出色的触控体验，同时又可以使用鼠标、触控板和键盘工作。如果用户希望永远沉浸在Metro界面中，那么将永远不会看到桌面，除非刻意选择，否则系统甚至不会加载它，这样的Windows 将焕然一新。

2012年10月26日，Windows 8发布会上，微软正式确认，Windows 8新的用户界面将不使用“Metro UI”的名称，而改名为“New Windows UI”或“Windows UI”。在Windows 8 正式发布之前Windows UI在试用版本中称之为Metro UI。虽然已有不少人体验过了Win 8系统，但其最新UI和应用的叫法就困扰了不少人。很多人对其名称还是不太清楚。

微软表示，当提到UI时，应该叫做“New Windows UI”或“Windows [4]  UI”（也可叫做“Modern UI“）。而当谈及应用时，应该是“Windows apps”或“Windows 8 apps”。

扁平化设计

扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。

例如：Windows、Mac OS、iOS、Android等操作系统的设计已经往“扁平化设计”发展。其设计语言主要有Material Design、Modern UI等。

扁平化的设计，尤其是手机的系统直接体现在：更少的按钮和选项，这样使得UI界面变得更加干净整齐，使用起来格外简洁，从而带给用户更加良好的操作体验。因为可以更加简单直接地将信息和事物的工作方式展示出来，所以可以有效减少认知障碍的产生。

扁平化的设计，在移动系统上不仅界面美观、简洁，而且还能达到降低功耗、延长待机时间和提高运算速度的效果。例如，Android 5.0就采用了扁平化的效果，因此被称为“最绚丽的安卓系统”。

“Flat Design”为“扁平化设计”的英文名，这个概念在2008年由Google提出。但围绕“Flat Design”这个名字则存在着诸多争议，现在你所看到的这个名称“Flat Design”也并未被大家所完全认可。

不同的公司团体都尝试用过其他名称，例如Minimal Design, Honest Design，而微软公司甚至称它作 “Authentically Digital”。

设计案例

生活中处处可见扁平化设计作品，比如苹果手机，采用棱角分明的线条，加上苹果的部分应用设计界面，单色鲜明的对比，非常漂亮。

扁平化设计与拟物化设计形成鲜明对比，Android系统界面曾经均采用拟物化，苹果iOS系统曾经也采用拟物化，但作为手机领域的风向标的苹果手机最新推出的iOS使用了扁平化设计，是拟物化基础上进行的扁平化改造，都有可取之处与诟病，总之都是非常棒的设计美学。而Android的扁平化设计能使得总体视觉与交互变得”温暖“。

在扁平化设计目前最有力的典范是微软的Windows以及Windows Phone和Windows RT的Metro界面，不得不说Microsoft不愧为扁平化用户体验开拓者，如此大胆的尝试与实现，不得不让人佩服。与扁平化设计相比，在目前也可以说之前最为流行的是skeuomorphic设计，最为典型的就是苹果iOS系统中拟物化的设计，让我们感觉到虚拟物与实物的接近程度，iOS、安卓也已在向扁平化改变。

设计界线

我们发现在Win8 Metro界面中，使用了完全的扁平化设计；在苹果产品及iOS系统中，看到了部分扁平化设计影子，在Google中，我们也同样看到了准扁平化设计模式，并且在Google中我们体验良好，而在Win8 metro中受到的评论并非这么乐观，所以不管是属于什么设计，设计的美在于是否适合，我不敢说扁平化设计就比谁好，这种非黑即白的理论并不适合。

设计技巧

对于设计师来说，如果你观察微软的Windows Phone的平台，你可能会发现一个特别的现象：那就是难看的应用不多，但令人印象深刻的应用也不多。应用很有统一感，但是很难张扬个性，以至于有的开发者感叹，它们看起来都是一个样子。设计师Johnny Holland将Metro语言比作是包豪斯风格，并且指出，“因为去除了装饰，使得个性化的空间很小”，这可能给人以“缺乏生命力”的感觉，所以要想设计做出好的扁平化设计，也是非常需要技巧的。

简单的设计元素

扁平化完全属于二次元世界，一个简单的形状加没有景深的平面，不叫扁平化都浪费这个词了。这个概念最核心的地方就是放弃一切装饰效果，诸如阴影、透视、纹理、渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净俐落，没有任何羽化、渐变或者阴影。尤其在手机上，因为屏幕的限制，使得这一风格在用户体验上更有优势，更少的按钮和选项使得界面干净整齐，使用起来格外简单。

强调字体的使用

字体是排版中很重要的一部分，它需要和其他元素相辅相成，想想看，一款花体字在扁平化的界面里得有多突兀。上图是一些扁平化网站使用无衬线字体的例子，无衬线字体家族庞大分支众多，其中有些字体会在特殊得情景下会有意想不到得效果。但注意，过犹不及，不要使用那些极为生僻的字体，因为保不齐它就把你带进坑里了。

关注色彩

扁平化设计中，配色貌似是最重要的一环，扁平化设计通常采用比其他风格更明亮更炫丽的颜色。同时，扁平化设计中的配色还意味着更多的色调。比如，其他设计最多只包含两三种主要颜色，但是扁平化设计中会平均使用六到八种颜色。另外还有一些颜色也挺受欢迎，如复古色浅橙、紫色、绿色、蓝色等。

简化的交互设计

设计师要尽量简化自己的设计方案，避免不必要的元素出现在设计中。简单的颜色和字体就足够了，如果你还想添加点什么，尽量选择简单的图案。扁平化设计尤其对一些做零售的网站帮助巨大，它能很有效的把商品组织起来，以简单但合理方式排列。

伪扁平化设计

不要以为扁平化只是把立体的设计效果压扁，事实上，扁平化设计更是功能上的简化与重组。比如，有些天气方面的应用会使用温度计的形式来展示气温，或者计算应用仍用计算器的二维形态表现。在应用软件当中，温度计的形象则纯粹是装饰性的，而计算器的计算方式也并不是最简单直接的。相比于拟物化而言，扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来。

Passbook的极致拟物风格

Passbook是苹果公司于北京时间2012年6月12日上午，在全球开发者大会(WWDC)上发布的iOS 6系统上的一个全新应用，是一款可以存放登机牌、会员卡和电影票的工具。

该功能将整合来自各类服务的票据，包括电影票、登机牌、积分卡和礼品卡等。

=========================================================

设计师提高技能必备网址整理

这里说说为何钟爱qq浏览器，登录qq账号后可以记录收藏网址，可以导入其他浏览器收藏的网址，在其他电脑也可以看到自己幸苦收藏整理的网址。腾讯产品就是这么好用，手机里的号码也是用的腾讯产品进行备份的，为腾讯打call，为中国有腾讯这种科技互联网企业自豪。

mac版qq浏览器无法换肤。

浏览及收藏图片：

百度搜索“觅元素”，站内搜索2.5D，可以下载立体png图片，千图网（品牌图片浏览），花瓣（收藏图片）；

百度搜索“花瓣插件”，点击花瓣采集工具页，选qq浏览器，查看安装教程。

安装插件成功后，浏览器右上角会出现花瓣图标，鼠标放在图片上会有采集图标。

这个网站是国外的，google或twitter要翻墙才能注册，就只能用花瓣采集了，图比原图小，但相对而言还算大图。花瓣在mac版上只能浏览，不能采集，采集插件也无法安装。

作品，经验整理：

站酷（作品，经验教程文章），UI中国，今日头条（发表文章，收到回复及专业观点比较快）；

学习及工作：

虎课网（软件视频教程学习），Element(UI界面组件及规范查询)，Iconfont-阿里巴巴矢量图标库。

============================================================================

软件介绍

1. PS是图像处理软件，顾名思义是处理位图（像素点组成的图像，最小单位是像素点）的。AI是处理矢量图（曲线或直线相连接的点计算组成的）的。

2. web界面设计WUI，智能手机GUI，苹果系统一般用苹方字体

UI设计师协同工作工具

一. 蓝湖，支持 Photoshop CC 2015 及以上版本

Mac | Windows 双系统支持注册后上传画板进行协同工作，2020年5月听说蓝湖协作项目收费了，本地项目不收费。

二. PS切图插件Cutterman安装后打开psd文件后使用。

1.安卓.9图片制作，点九图只需一张，不需要适配各种屏幕分辨率，因为图片自带伸展性。安卓.9图片转换软件.zip。安卓.9图片转换软件\9png\lib下的“draw9patch.jar”运行后点箭头，里面横竖向扩展部分画竖线。

2.ps cc 2018安装切图插件cutterman，ps cc版本太低是安装不了cutterman的。“输出mipmap”是保存小图标，不选“输出mipmap”会生成drawable放大图片的文件夹。 

三. 像素大厨PxCook

注册后进行协同工作。

pxcook标注工具规范化标注：每个项目或产品一个项目标注文件“项目文件***.pxcp”，标注字号时前面加“字号：”再写单位px。文字，间距，圆角，颜色，统一标准。psd设计源文件修改，将同名psd文件添加到标注项目中替换psd文件即可。标注时候，psd文件修改保存后，pxcook中会同步更新，将效果图中尺寸修改到标准值。

pxcook要登录账号，进行云协作，这样重装系统或换台电脑时候不用找到.pxcp文件就能打开之前的文件。

创建项目时候创建云项目，这样文件在云上保存，本地psd文件不在了，项目中的文件还在，pxcook会经常提示更新，前期设置好云协作，之后就少为文件丢失操心。

pxcook标注：

1.每个项目或产品一个项目标注文件“项目文件***.pxcp”，这样共用的标注方便复制，黏贴，查看。

2.若将标注文字选成“dp/sp”，标注的文字会变成dp。

3.标注字号选20比较容易看清。

4.手动标注文字字号时前面加“字号：”再写单位px，一般用文字自动标注，PS中用工具属性栏中的Bold，Regular这样在pxcook中可以自动识别，字符面板中的加粗在pxcook中无法识别。

5.功能模块文件夹中“1.设计”，“2.标注”，“3.切图”有些功能模块没有切图但大多数情况会有标注。

6.文字，间距，圆角，颜色，尽量统一标准。

7.psd设计源文件修改，将同名psd文件添加到标注项目中替换psd文件即可。

8.标注时候，psd文件修改保存后，pxcook中会同步更新，将效果图中尺寸修改到标准值。

手机分辨率宽为720px，时候，pxcook中查看，36px=18dp，px：dp=1：2，

dp与sp的换算用代码实现，代码能取到屏幕密度。

因为屏幕密度不同，标注得用px为单位。

四.ps play实时预览设计，最好用的设计稿预览工具

百度搜索ps play，手机扫二维码安装不了，手机端已下架，可以在web端下载apk安装包，用文件传输助手传到手机端，平板端安装，ps CC绿色免安装版在hp品牌机上要以管理员身份才能用，wifi得稳定，不然连接不上，不可以用数据线连接。psmirror只有15天免费试用，可以数据线连接，60元终身可以使用。 http://www.psmirror.cn

最近复盘各终端设备web端/桌面端/大屏端的设计重点，

自己在设计中的经验与大家交流，

解析WUI，懂原理，做更好的设计！

Powered by Froala Editor