分类目录归档:design

设计师那点儿不可告人的事

10个无版权限制的免费大图片资源网站

对于网页设计师和平面设计师来说,图片素材是十分重要的,特别是无版权限制的素材。虽然国内有很多素材下载站,但是大部分都没有版权描述,这样会让用户不知道是否可以免费使用这些素材。

没关系,今天小编为大家整理目前优秀的提供免费图片素材资源网站,这些网站的图片质量相当高,大部分为高分辨率(高解析),并且,最重要的是,它是免费的,无版权限制哦!同时具备免费、高清(无码)、无限制这三大因素的图片资源站绝壁是干货中的干货!

NO.1 Gratisography

http://www.gratisography.com/

gratisography里面的图片每周都会更新,很多时尚流行的照片在里面,并且适合用在设计项目上。

免费个人、商业使用。

 

NO.2 PicJumbo

http://picjumbo.com/page/5/

PicJumbo提供免费个人和商业使用的图像,照片质量很不错,非常适合用在界面设计或其它项目上。

 

NO.3 Life Of Pix by LEEROY

http://www.lifeofpix.com/

http://www.leeroy.ca/en/

提供免费高清图像素材,并且无版权限制,图片多为欧洲景观。

 

NO.4 IM Free

http://www.imcreator.com/free

该站提供搜索和分类目录,有人物、自然、艺术、生活、图标等分类。确实不错,可惜有的分类很少图。

 

NO.5 Death To Stock Photos

http://deathtothestockphoto.com/

用户需要邮箱订阅后才能获取该网站上的图片,然后该站每月会向你发送免费的图片素材。

 

NO.6 Pixabay

http://pixabay.com/

寻找免费且高质量的图片是件单调乏味的任务——主要是源于版权问题,署名要求或者仅仅是图片质量不够。因此我们深受启发而创立了Pixabay——一间超高质量无版权限制的图片的贮藏室。 不论数字或者印刷格式,个人或者商业用途,您都可以免费使用本网站任何图像,并且无原作者署名要求。

 

NO.7 Publicdomainarchive

http://publicdomainarchive.com/

目前已经有5万张免费高清图像下载,设计师可以免费使用在你的创意项目上。

 

NO.8 Snapographic

http://snapographic.com/

Snapographic分享的图像也被分类了,有动物、建筑、景观、纹理等图像素材,当然也是免费使用的。

 

NO.9 Photo Pin

http://photopin.com/

Photo Pin 图片搜索引擎,图片资源来自Flickr,你可以使用英文和中文搜索,但结果会有所不同,所以可以通过切换语言来搜索,获得最适合的图像。

 

NO.10 New Old Stock

http://nos.twnsnd.co/

New Old Stock专注分享世界各地的经典、旧风格的图像,如果要做复古风的项目,从这里选择图片素材最适合不过了。

 

什么是线框图、原型和视觉稿及它们的区别

两三年以前,我发现很多搞信息技术的朋友们(非设计师)交付设计时,用着上面列出的词汇。他们以为线框图 (Wireframe)、原型 (Prototype)和视觉稿(Mockup)是一个东西:表达自己创意的线框手绘设计稿。 混淆概念便带来麻烦:他们分不清用户体验设计师的作品,常常感到困惑。「这按钮他妈的怎么点不了?」「我不知道这个地方可以按啊!」类似这样的问题在用户体验的项目中屡见不鲜。误把线框图当成原型,有点像建筑里分不清蓝图(指导如何建筑施工的方案)和演示厅。你完全可以试着在演示厅里小住一会(它的妙处就在于能直观传达房间之美),但你没法舒服地躺在蓝图上;蓝图不过是一张纸罢了。 在建筑学上,演示厅和蓝图服务于不同的交流对象:

  • 蓝图,即施工方案,详细描述该如何建造建筑
  • 演示厅,给未来的居民提供测试和体验的机会

演示厅和蓝图的共同之处是,它们都代表着最终的产品,即建筑(房屋)。线框图、原型和视觉稿亦是如此,这些文档都是最终产品的不同展现方式。 不管你信不信,我向用户体验设计团队授课的第一件事,就是告诉他们分清这三个概念。因为,这实在太重要了。 接下来,让我们详细讨论三者的区别,以后你就懂得在什么样的场合下用什么词汇了。

线框图

1

1、什么是线框图?

线框图 (Wireframe)是低保真的设计图,当明确表达:

  • 内容大纲(什么东西)
  • 信息结构(在哪)
  • 用户的交互行为描述(怎么操作)

线框图不仅仅是无意义的线和框的集合;好吧,虽然看上去是的,囧。你可以把线框图理解为设计图的骨干与核心,它承载着最终产品所有重要的部分。 线框图可以帮你平衡保真度与速度。绘图时不用在意细枝末节,但必须表达出设计思想,不能漏掉任何重要的部分。就像给项目以及一起协作的团队成员(开发工程师、视觉设计师、文案作者和项目经理),开辟了一条辅助理解设计的通道。说得再明白点,你是在设计城市地图,地图上能展现出每一条街道,只不过绘制上做了简化。看地图能看出城市的框架,但无法一览城市的美感。 绘制线框图,重点是「快」。大多数时间请和团队成员沟通,多做思考。审美上的视觉效果则应当尽可能简化。黑白灰是经典用色,你也可以用蓝色代表超链接。如果你在准备线框图时花了大把时间(比如,选择图标、上传图片),请换个简单的方式(比如,使用占位符:一个画×的图片,再加上合适的描述文字)。我们习惯把线框图称为低保真设计图。 切记,好的线框图能像水晶一样,清晰明了地表达设计创意,在成员中无缝传达其思想。

2、何时使用线框图

线框图常常用来作项目说明。鉴于其静态设计,一次只能通过一张界面演示交互,因此,务必附上说明。(只要有必要,简短描述或附在复杂的技术文档里,都成。) 也因为绘制起来快速、简单,它也经常用于非正式场合,比如团队内部交流。要是开发问起一个东西怎么做,回复时不妨附上一张迅速绘制的线框图。线框图难以充当用户测试的材料;倒也能收集些反馈,如果你更关心用户意见,而非测试方法。 虽然近些年遭人闲话,但线框图在整个设计过程中发挥着惊人的效果,在复杂项目的初始阶段必不可少。

原型

2

1、什么是原型

原型(Prototype),常常和线框图混淆,是中等保真的设计图,代表最终产品,模拟交互设计。原型当允许用户:

  • 从界面上,体验内容与交互
  • 像最终产品一样,测试主要交互

原型应该尽可能模拟最终产品,就算长得不是一模一样(绝对不能是灰色线框设计)。交互则应该精心模块化,尽量在体验上和最终产品保持一致。 原型背后的逻辑不要依赖交互形式。减少制作原型的成本,加快开发速度。

2、何时使用原型

原型常用于做潜在用户测试。在正式介入开发阶段前,以最接近最终产品的形式考量产品可用性。 如你所想,原型一般难以成为上好的文档;因为它得让「读者」费一些力气来理解界面。但从另一个角度来看,作为界面,原型的直观和易懂倒使它成为最高效的设计文档。 请注意,相对其它交流媒介,原型成本高、费时。我建议绘制原型后,能在接下来的开发阶段复用起来。(唔,你可能得亲自编写 HTML 和样式表代码)对于简单的项目来说,相当好用。(一旦考虑「复用」,必将增加绘制成本,偏离原型的初衷。并不建议复用。——译者注) 若设计得当,与用户测试相结合,原型是物超所值的。

视觉稿

3

1、什么是视觉稿

视觉稿(Mockup)是高保真的静态设计图。通常来说,视觉稿就是视觉设计的草稿或终稿。优秀的视觉稿当:

  • 表达信息框架,静态演示内容和功能
  • 帮助团队成员以视觉的角度审阅项目

人们常年分不清什么是视觉稿,什么是线框图,和某些软件公司的名字不无关系。噗~

2、何时使用视觉稿

如果你想从股东手里获得认可,视觉稿尤其管用;收集用户反馈也相当好使。 把它添到设计文档里去吧,绝对是画龙点睛之笔。

总结

qq%e6%8b%bc%e9%9f%b3%e6%88%aa%e5%9b%be%e6%9c%aa%e5%91%bd%e5%90%8d

2015非官方的iOS APP全方位设计指南

有时候为iOS设计app并不是一件简单的事,但是如果你能找到正确的最新的苹果设备信息,并按照正确的方向,那么为iOS设计app或许会变得简单容易些。

关于这些指南

这些指南描述了如何遵守苹果的iOS 人机交互指南来设计app,而不是讲用自定义控件可以做成什么样的设计,有时候打破规则也很重要。该文档的目的并不是为一些复杂的设计问题提供解决方案。该文档是非官方的,将会定期更新和扩充内容,最近一次更新是2014年11月11日。

分辨率和显示屏规格(Resolutions和Display Specifications)

Points 和Pixels的区别

Pixels(像素)是数字显示屏上我们可控制的最小物理元素,在一个特定屏幕尺寸中可以有多个像素,PPI(pixels-per-inch)越高,则渲染的内容会越清晰。

Points用以衡量分辨率。根据屏幕的像素密度,一个point可以包含多个像素(比如在常规的retina屏上,1pt包含2 x 2的像素)。

当你针对多个显示屏类型进行设计时,你应该以points进行思考,但以pixels进行设计。这意味着你仍需要以3种不同的分辨率来输出设计资产,不管你针对哪个分辨率设计应用程序。

iPhone 6+缩减像素取样

在iOS上渲染像素和物理像素(physical pixels)是等同的,只有一个例外:iPhone 6 Plus的Retina HD显示屏。由于它屏幕的像素分辨率要低于一个常规的@3x分辨率,所以被渲染内容会自动调整为原始尺寸的87%(从2208*1242像素来适应为1920*1082像素的显示屏分辨率)

iPhone 5S, 6 以及6+显示屏区别的详细信息可参看:The Ultimate Guide To iPhone Resolutions

App Icons

自动应用效果

多尺寸的应用程序icon通常被添加到应用程序包中,当在设备上渲染时,iOS会将效果应用在应用程序icon上。

(1)圆角

圆角半径值已经不存在了。从iOS 7开始,app icon已经使用了超椭圆的形状。由于苹果没有发布该形状的官方模板,所以你得精确地使用非官方的模板。

圆角的图形不应该包含在最终的输出资产中,但如果你想要添加和应用程序icon拐角对齐的描边和阴影效果,那你可能还会用到圆角图形。

提醒:因为你想将应用效果和icon拐角对齐,所以如果你正使用超椭圆的形状对icon资产进行蒙版(遮罩),那要确保在遮罩外的区域不能使用任何透明的图形。应用程序icon不支持透明度,相反作为纯黑色进行渲染。如果你的遮罩不是百分百精确,那用户将会在圆角边缘看 到黑色的锯齿。推荐将canvas的背景设置成和app icon一样的背景。

(2)边框描边(某些情况下)

如果你使用的app icon有白色的背景,那么将会应用1pixel的灰色边框,以便更容易地识别icon的边缘。这只能在设置app和App Store中进行。

(3)后续问题(iOS 6 和之前的版本)

在旧的iOS版本中,这些效果会自动应用:可以被禁用的圆角(和iOS 7+中使用的icon不同)、主屏幕上的阴影效果以及关泽效果等。

栅格系统

苹果开发了具有黄金分割比例的栅格系统,可用以正确地调整和对齐icon上的元素。不过,甚至是苹果设计师的原生app icon也没有完全严格地遵守栅格系统。所以如果你的icon上的元素在没有严格遵守栅格系统的情况下能更好地展示,那你可以考虑下打破一些固有的规则。

字体排版

所有的iOS版本中默认字体都是Helvetica Neue。从iOS 7开始,苹果使用了稍作修改的字体,但是在你的设计过程中使用原始的Helvetica Neue是极好的。除了默认字体外,你还可以使用很多可选的字体,你可以在此查看完整的预置字体列表。

自定义字体

从技术角度讲,True Type Font (.ttf)可以被用在iOS app中,但要注意许可问题。一般来说,使用完全免费或者商业化的字体是安全的。MyFonts最大数量地包含了可用在app中的许可字体。

调色板

iOS 7以后,苹果在操作系统和预装app中使用了更有生机和活力的调色板。虽然你可以使用上边默认的iOS调色板,但你也可以使用自己的颜色(如果你想与众不同,当然要使用了)。

图标

在iOS app中,icon一个很好的用法是使用视觉化的关系来支持文本标签,从而执行一些操作或者完全取代文本(最常用的比如”New”、”Delete”等)。通常,我们使用icon来区分导航栏、工具栏以及标签栏。

各种”栏”的按钮icon

各种”栏”中的按钮icon应该有两种状态:默认状态下的1或者1.5pt笔画宽度的轮廓样式,以及纯色填充的活跃状态。

不要在按钮icon上添加任何额外的效果,比如下拉阴影或者内阴影,因为这些是iOS 7之前版本中的用法。按钮icon应该在一个透明背景上以一种纯色进行绘制–icon的形状作为遮罩,颜色将会以编程形式应用。

活动视图图标

活动视图(通常指分享弹出视图)中的icon以轮廓样式设计,但苹果在iOS 8以后回归到白色背景上的实体填充icon风格。

常用设计元素

iOS提供了很多不错的现成的视图和控件,可帮开发者快速构建页面。开发者可以将一些元素自定义到某个级别,但是也有一些元素不能或者不应该进行自定义。当为iOS设计应用程序时,你应该知道一些工具集的使用,只要是可能,就应该坚持下去。但在一些情况下,可能需要设计一些自定义控件,因为你需要一个更加定制化的界面或者想要改变现有控件的功能(有点危险)。几乎任何一件事情都是有可能的,而有时候你需要打破既有的规则,不过需要三思。

状态栏

状态栏包含了基本的系统信息,比如运营商、时间、电池状态以及其他等,它在视觉上通常与导航栏联系在一起,并且使用相同的背景填充。为了匹配你的app的风格,并且易于阅读,状态栏的的内容一般有两种不同的风格:深色(黑色)和浅色(白色)。

你可以隐藏导航栏,但要思考清楚。比如在app下载web内容时,用户可能对设备是否连接上WiFi网络比较感兴趣,在app要求蓝牙连接第三方硬件时,用户可能会想知道应用是否启用了蓝牙。一个令人信服的隐藏状态栏的理由是你想移除对的那个元素的所有干扰信息,比如全屏展示内容,比如图片。

导航栏

导航栏包含在app多个视图间进行导航的控件,以及在当前视图中管理内容的选项。导航栏通常展示在屏幕的顶部,状态栏的底部。默认情况下,背景是半透明的,在导航栏下方还有模糊的内容。导航栏的背景可以是纯色的,渐变的或者是自定义的位图模式。

竖屏模式下的iPhone 6导航栏。

横屏模式下的iPhone 4S导航栏。导航栏的高度减了12pt,除了iPad。这也是常见的横屏模式下隐藏状态栏的方法。

元素应当遵循特定的对齐模式:

1.返回按钮通常居左对齐。

2.当前视图的标题应当居中展示在bar中。

3.Action按钮通常居右对齐。如果可能的话action按钮应当限制在一个主要操作行文,以避免错误点击,并维持其简洁性。

工具栏

工具栏包含用于管理或者操作当前视图中内容的一些操作。在iPhone上,它通常出现在屏幕的底部,但在iPad上也能出现在屏幕的顶部。

和导航栏类似,工具栏的背景填充也能调整,默认情况下工具栏本身是半透明的,在其下方还有模糊的视图内容。

当一个特定视图要求三个以上主要活动,但放在导航栏上又显得凌乱时,你可以使用工具栏。

搜索栏

搜索栏默认有两种风格:突出的和最小化的。两种类型的搜索栏在功能上是一样的。

1.只要用户没有输入文本,搜索栏中会展示占位符文本,而书签icon则可用来访问最近或者保存的搜索。

2.键入搜索项目后,占位符消失,一个清晰的删除按钮会出现在搜索栏的右侧。

搜索栏可以利用一个提示–一个短句来介绍搜索的上下文环境。比如”键入某个城市、邮政编码或者机场”

不使用提示和使用提示两种风格

最小化搜索栏类型

想要提供对检索词条的更多控制,可用scope bar(范围栏)限制搜索栏,scope bar会使用和搜索栏一样的风格,当搜索结果有清晰的定义类别时,这种方法比较有用。比如,在一款音乐类app中,搜索结果可以按照专辑和歌曲再次过滤。

标签栏

用户可使用标签栏在app的单个视图间快速导航,并且标签栏也只能用于这个目的。标签栏通常出现在屏幕的底部。默认情况下,标签栏是略透明的,并且向导航栏一样使用系统的模糊效果。

标签栏包含固定的最大数量的tabs,一旦标签数量超过其可容纳的最大数量,后边的标签将会展示在隐藏的”More-tab”列表中,并且有一个选项可重排标签顺序。

虽然iPhone上最多可展示5个标签,但是在iPad上最多可展示7个标签。

为了提醒用户视图上的新信息,有时候需要在标签栏按钮上使用标记数量。如果一个视图被临时禁用,那么相关的标签按钮不应当完全被隐藏,相反应当淡出视觉范围以表示其禁用状态。

表视图(Table View)

表视图以单列或者多列形式展示少数或者多个列表风格的信息,并有能将内容分组的选项。根据你展示的数据类型,通常可使用两种基本的表视图风格:

无格式的

无格式表视图包含的几行内容的顶部可以有页眉,最后一行后边可以有页脚。可以在屏幕右边缘展示垂直导航,以便在表中进行导航,这种情况适合展示以某种方式储存的大数据集的时候,比如按照字母降序排列。

分组样式

分组表视图允许用户对内容进行分组。每个分组可以有页眉(最佳用法是描述类组的上下文环境)和页脚(适用于帮助文本等)。一个分组的表视图至少需要包含一个类组,并且每个类组至少要包含一行内容。

对于以上两种表视图类型,可用几种风格来展示数据,以方便用户快速扫描、阅读和适当调整内容。

默认

默认的表视图有一个居左对齐的可选图片和标题。

带有副标题

在每行标题下展示小字号的副标题,适用于进一步的解释说明或者简短描述。

带有数值

带数值表类型可展示与行标题相关的特定数值。类似默认的类型,每行都有一个居左对齐的图片和标题。在该类型中,数值居右对齐,通常使用比标题淡一点的文本颜色。

模态视图、弹出视图以及提醒(警示)视图

iOS提供了多种风格的临时视图,可以某种方式在既定的情况下展示、编辑或者操作数据。虽然每种临时视图因某个非常特定的目的而存在,但外观上却大有不同,不过所有临时视图都有一个相同的地方:在展示时,它就是当前视图上最上方的图层,下方的内容被一个黑色的背景所覆盖。

活动视图(ACTIVITY VIEW)

活动视图用以展示特定的任务。这些任务可以是系统默认的任务,比如通过可用选项分享内容,或者是完全自定义的活动。当为自定义任务按钮设计icon时,你应当遵从活跃状态和栏按钮icon的一些设计指南–纯色填充、无任何效果、以及在一个透明背景上。

活动(ACTIONS)

活动页面用来执行可用操作列表中的单项操作,并且强迫用户确认或者取消某个活动。

在竖屏模式下(以及尺寸比较小的横屏模式下),actions以按钮列表形式滑入,并呆在屏幕的底部。这种情况下,活动列表应该有一个取消按钮来关闭视图和执行任何列表中的action。

当有足够可用的空间时(比如iPad上),活动列表可在视觉上转为弹出视图。不过此时不一定非得有一个关闭按钮,用户点击弹出视图外的任何地方都能关闭弹出视图。

提醒视图

提醒视图的目的是用来通知用户一些关键性的信息,并有选择地迫使用户做出选择。

提醒视图通常包含一个标题文本(最好不要超过一行)、一个(纯信息提醒,比如”OK”)或者两个按钮(要求用户做出决定,比如”Send”或”Cancel”)。

你可以在提醒视图中添加消息文本,如果需要的话则可添加两个文本域,其中之一可以是蒙版的输入区,适合密码或者PINs之类的敏感信息。

编辑菜单(EDIT MENU)

用户可使用编辑菜单执行复制、粘贴以及剪切等操作。虽然你能控制用户可以选择哪个操作,但是编辑菜单的视觉外观是设定好的,不能重新配置,除非你设计一个完全自定义的编辑菜单。

弹出视图(Popovers)

当某项特定操作要求多个用户输入才能继续进行时弹出视图就非常有用了。在水平方向上,弹出视图可通过箭头指向展示下方相关的控件(比如按钮)。弹出控件的背景透明度稍有降低,可展示其下方的模糊内容,像iOS 7以后其他很多UI元素一样。

弹出视图是一种非常强大的临时视图,可包含类似导航栏、表视图、地图或者web视图等对象。随着弹出视图所包含内容和元素的增加,其窗口也能滚动展示。

模态视图

模态视图适用于需要多个命令和用户输入的情况,位于屏幕上所有内容的最上方。典型的模态视图通常提供:

1.描述任务的标题。

2.关闭模特视图的按钮,没有保存或执行任何其他操作。

3.保存或者提交任何已输入内容的按钮。

4.模态窗口主体中提供大量用户可输入的元素。

有三种可用的模态视图类型:

1.全屏模式:覆盖整个屏幕

2.页表模式:竖屏模式下,模态视图覆盖屏幕上的部分内容,仅在半透明的暗色背景上展示部分父视图的内容。横屏模式下,模态视图会像全屏模态视图那样展示。

3.表格页面模式:竖屏模式下,模态视图出现在屏幕的中间。模态视图范围之外,父视图内容展示在半透明背景之下。当需要展示键盘时,模态视图的位置会自动调整。横屏模式下类似全屏模态视图。

控件(Controls)

iOS为基本上任何类型的输入需求提供了各种各样的控件。以下列出的是最常用的控件,但想要看详细的完整的可用控件列表,请在iOS Developer Library中查看。

按钮

最常用的控件可能是按钮。iOS 7以来,默认的按钮设计看起来更像一个纯文本链接。按钮控件支持高度自定义。按钮可以有几种不同的状态,可以使用视觉语言传达:默认、突出、选择以及禁用等。

选择器(PICKERS)

选择器用来在一个可用值列表中选择某个值,和Web上的下拉选框功能类似。选择器的扩展版本是日期选择器,允许用户滚动日期和时间列表来选择一个月、日以及具体时间。

左:表视图中的日期选择器,右:选择器作为键盘

除了背景色外,不可能更改其视觉风格或者尺寸。很多时候,选择器位于屏幕的底部,像键盘一样展示,但不能用在其他地方。

分段控件(SEGMENT CONTROLS)

分段控件包含一组至少两个以上的分段,可用来过滤内容或者为清晰分类的内容创建标签。

不带icon与带icon的分段控件

每个分段可包含一个文本标签或者一个图片(icon),但不能同时包含两者。另外,不建议在一个分段控件中混合使用不同的分段风格,比如文本和图片。每个分段的宽度会基于分段的数量自动调整(两个分段各占50%,5个分段各占20%)。

滑杆(SLIDERS)

滑杆控件允许用户从允许值范围中选择一个特定的值。由于使用滑杆选择一个值的操作非常流畅,并且无需额外的步骤,所以建议在选择预估值的时候使用滑杆,而不是选择精确的值。比如滑杆可以很好地用来设置音量,用户可以听到和看到音量大小的不同,而通过输入文本来设置精确的dB值是不切实际的。

不带icon与带icon的滑杆控件

可以为最小值和最大值设置icon,icon会展示在滑杆控件的开始和末尾两端,从而在视觉上加强滑杆的目的。

进步器(STEPPER)

当用户从一个有限的值范围中(比如1-10)键入准确的值的时候,可使用进步器。进步器通常包含两个分段按钮,一个是降低当前值,一个是增加当前值。

进步器的视觉外观支持高度自定义:

1.可使用自己的icon作为进步器按钮;

2.当想维持iOS原生的外观时,你可以自定义进步器边框、背景以及icon的颜色。

3.如果你更进一步使用自定义,那你可以为进步器的按钮和分割符使用完全自定义的图片。

开关(SWITCH)

用户可使用开关在”ON”和”OFF”两种状态间切换。设计师可自定义两种状态的颜色,但是开关按钮的外观和尺寸是设定好的不能更改。

键盘(KEYBOARDS)

有多重键盘类型可为特定的文本输入提供最好的键盘。虽然你可以使用自己完全自定义的剑兰,但默认的键盘无需调整风格和尺寸,很多时候更加方便一些。

2015年移动设备界面设计趋势及用户交互操作数据统计

前提:2014年,Google推出影响全球设计趋势的materialDesign,接着苹果推出ios8和两台影响ios屏幕适配的大屏手机
1.大屏手机的普及化
首先让我们看一眼友盟的数据
Android

ios


3.5英寸~4英寸——平衡单手操作的合理尺寸范围。

51%的用户适应双手操作

盲区(深色区域)更多响应时间

为什么我们需要大屏手机?

展现、承载更多的内容:游戏、阅读、播放视频…

(以上,参考 大屏手机时代,如何重塑界面交互)

面对大屏手机,苹果做了什么?
轻触两次home键……

搜狗做了什么?
单手键盘

google做了什么?
在纷乱的智能设备和杂乱的屏幕种类中,
发布Material Design,构建跨平台和超越设备尺寸的统一体验

我们该怎么做?

充分利用全屏构造更大的展示空间,创建沉浸式体验:

以内容为核心,用UI支撑内容。

  • 简化排版结构
  • 去除视觉修饰
  • 聚焦(突出重点)
  • 增大字间距、行高度
  • 只使用一种字体

(我感觉是借鉴了印刷上的一些规范准则和版式设计)

大量留白。

让重要内容、功能醒目聚焦。

可用性问题:

  1. 纵向单手操作机身
  2. 边角、顶部、左右侧边难以触达
  3. 放置在以上盲区的点击入口,将导致体验路径中断

设计安全区域,避开操作盲区,比如在左上角操作盲区展示logo

使用场景路径触发的连贯性,操作区域集中在安全区域

materialDesign的悬浮按钮(贴近手指);

全局切换(左右滑动在页面可控区域进行页面间转换)

miniplayer左右滑动切歌(更轻更扁平)

  • 更多手势(以手势驱动界面);


时效性产品的下拉刷新(获取最新信息,新内容上浮,旧内容下沉)

滑动代替了点击(屏幕太他妈大了,我一个弹钢琴的都点不到盲区有木有!!)


语音代替键盘输入

内容跟随设备(屏幕)旋转
聚焦用户关心的主要内容

横屏Pad化的操作设计,以及更多的内容展现,如同网页的Responsive Layout概念。
2.动效的广泛应用(app的肢体语言)
Authentic motion
Easing Functions Cheat Sheet
Animated Checkboxes and Radio Buttons with SVG

用动效表现四维时空——展示Z轴空间、时间变化
随着显卡的提升,像素的增多,我们不禁要问,为什么像素少得可怜的时候我们要拟物化GUI,而像素多得吓人的时候我们反而极简而扁平呢?
ios7发布引发了全民扁平化,而动效为设计带来更多的可能和惊喜。设计师们又多了一片可发挥的领域。

仅用在希望吸引用户注意的部分
展示面积相同时,用户注意力会按这个顺序依次被吸引

相对面积和时长划分为四种动效

1.面积大、时间长
产品介绍

2.面积大、时间短

难看清

用于页面切换,展现界面之间的空间关系

见“转场动画”

3.面积小、时间短

轻引导、轻反馈、轻提示→不打断用户流程,却轻轻吸引注意力(情感化设计)

quora的搜索

从横屏切换会的google被弄歪了=_=

4.面积小,时间长

一直持续轻微吸引用户,不干扰其他功能和信息

滑动指向性动效(理清物体排列状况)
chrome

Safari

对象切换-指向性动效
当前物体后移(变暗淡透明),新物体出现
YouTube

flickr

添加-指向性动效
新物体滑入,挤出旧物体

any do

clear

固定标签
头部标签始终固定在顶部直到被顶走
p1

下滑消失,上滑出现(增大可读区域)
storehouse

点击-提示性动效

滑动-提示性动效

切换对象-指向性动效
storehouse

分合-指向性动效
any do 的任务的详细信息的修改(上层和下层合在一起)
胡痴儿按:几乎所有动效的进场和出场都是正方向和反方向的关系,也就是假如录成一段动画就是可循环重复的
分合就像约会。当你点击,一个妹子从雪山上来,当你点返回,她又回雪山去了

动效控件
案例:posegram

flickr的收藏

加载动画:
京东app的刷新

loading设计 _加载界面_loading图片素材欣赏_UI/UX图片大全

展开-空间扩展动效
if

转场动画(用产品连续性表达了设计的前后关系)
(坚硬的,刚性强,却不灵活)
案例:Flipboard
相似案例:deal in

对比案例:ibook(柔软的曲面,刚性差,但灵活)
相似案例:play books
play books for Ios
play books for Android

paper的卡片式翻页(这种神级的存在(@﹏@)~ )

Steller的翻图(每张图都美到心醉)

暗示运动轨迹、动态焦点移动
胡痴儿按:

  • 物体运动受推力、风阻、重力影响
  • 物体按轨迹运动却不可见,除了黑夜里的火花、雪地里的足迹
  • ios的运动轨迹非常自然,它是有一定弧度的,像鱼儿水里游,像少女的乳头一浪接一浪
  • Android5.0之前的运动轨迹就是直线的、刚性的,机械得像个跳机械舞的

ios应用启动

案例:QQ音乐的MiniPlayer切换至播放页

分成动画:底层、信息层、唱片封面层 用不同的轨迹

慢入慢出(惯性)如:

  • 车的启动
  • 压缩的弹簧展开
  • 坐下&站起
  • 球落地不断弹起
  • 动画:在运动开始和结束时更多的帧,而过程中用较少的帧

开始时慢慢加速,停止时慢慢减速,如图:


apple的messages

翻动app们

案例:same的尖叫博物馆(你给我滚看看→ →)

案例:知乎Android客户端的“三”和“←”之间的切换(完美地参考Gmail,很好地遵循了materialDesign)

以操作焦点为中心的空间扩展(翻动、放大,拓展空间内容,简化引导流程)
集合视图转换
UI Collection View Transition Layout
运动路径以用户操作焦点为中心或轴的运动,以衔接界面切换中的过渡动态,引导视觉焦点

案例:Google
以触摸点为中心延展

告诉用户他在哪,从哪里来到哪里去
从缩略图到全屏,同时中心点转移

案例:pages

空间速率Parallax
界面视差空间结构(越靠近屏幕边缘启动速度越快、越靠近屏幕中心启动速度越慢)
胡痴儿按:我记得我学画画时总听老师说怎么拉空间,苹果用动态拉空间真是吊爆了,让我感觉中心点离我更近,屏幕边缘离我更远{>~<}

ibook

ios的日历

预期动效(预感即将发生)
IOS6

capture
1.在运动发生前的准备阶段
2.运动过程本身

3.运动产生的结果

sunnycomb

百度魔拍

nice

招牌动效(加深用户印象的差异化展现)

path的“+”
堆叠物体被展开

facebook 推出的paper关闭消息的拉伸曲线动画。
这种动效设计是有具前瞻性的尝试和探索,像path的那个展开的“+”引发了跟风潮流。

强奸处女座的拉动
Google+的下拉刷新(像素越拉越细→ w→)

掐死same

拆散一对same(我当时看到这俩分离再相聚的时候心都醉了)

flickr的下拉刷新

3.更生动的情感化设计
404页面设计 _404 not found_404出错页面_404错误页面图片素材欣赏

4.遵循iOS和Android的各个平台规范

  • 没有用户学习成本,且用户可使用自定义;
  • 统一跨平台的视觉交互体验;
  • 降低设计开发成本,会自动更新;

(胡痴儿按:一个产品,要和iOS交配产生一个个体,具有iOS交互属性的后代,又要和Android交配,携带Android交互基因的后代,也就是说这个产品的视觉上要像他父亲(公司产品线),界面和交互上要像她母亲(iOS或Android),还要和她母亲的孩子们在移动端和谐相处{>~<})
(沉浸式体验的除外)

案例:豆瓣使用了iOS的系统主题UIkit

  • 用半透明底板:关联使用场景、区分内容;
  • 使用系统字体:确保易读性、可调节性;
  • 无边框按钮(被激活时高亮)

5.hamburger导航变tab导航(当时我设计恋爱笔记时参考的豆瓣小组,后来豆瓣小组改为底部导航,我们也改了)
扁平结构层级,从深到广,从多到简。减少入口和用户思考时间,更快找到自己所需的功能,功能更专精。
案例:豆瓣小组

6.数据可视化(数据表现越来越丰富,如饼状、柱状、曲线、图案)

视差滚动
胡痴儿按:我想到了坐火车时看窗外,物体分了很多层,远处的山缓慢而悠闲,近处的电线杆飞窜着,拍出来的照:近处产生了运动模糊,远处清晰,由近向远越来越清晰。。太美了{>~<}

从一定距离的两点,观察同一目标的方向差异。

黄油相机的欢迎页
(注意每个元素的运动速度!)

一些新的交互探索

用陀螺仪的重力感应看全景图!
paper

red dot

人与摄像头交互
(捕捉用户运动轨迹)
flutterapp.com/
FLUTTER
将手掌往摄像头一按,音乐停止,再按继续播放

格灵深瞳

camme
通过前置摄像头捕捉手掌动作或眨眼实现快门

Goccia
扣在手机的前置摄像头上,获取光信号,发出携带数据的彩光,向手机传输数据。
由手机摄像头捕捉后转化为电信号数据储存到手机或者云端

旋转交互
Nest
转动调整、按下确定

招手取消报警

后台自动完成的交互
追踪睡眠和呼吸等信息

Owlet
采集婴儿信息

FitBark
采集宠物信息

Google glass的敲击发送

Voice in:发出指令
google glass的“Ok glass”

Voice out:反馈延伸
moov
运动设备
siri给出语音反馈

nike+的Fuelband
硬件更便携延展至app上

模块化处理
为解决用户对不同功能产品的选择困惑
分离部件(相同接口、不同功能),封装在不同模块中(芯片、电池、马达、各种传感器…),厂商和用户可根据需求自由组合,如

  • 电池续航模块
  • 记录卡路里消耗的模块
  • 监测心率模块

Google积木手机
中控中界面
tesla中控

智能外设
解决了屏幕软件上的操控缺陷,强化扩展功能

  • 钱包
  • 游戏机
  • 诊疗设备
  • 耳机孔外设
  • 与手机摄像头交互的外设
  • 与屏幕交互的智能笔

Square
移动支付设备

oppo的O-Click的遥控拍照

关怀设计

Smart PJ’s
代替自己给孩子讲故事

Sensefloor

摔倒报120

huggies tweetpee
尿不湿更换通知器
当尿不湿的承载量已经达到极限时会通过tweet通知家长换尿不湿

Quick Trainer
当人体需要尿尿时发出警报

Nex Band
最多5个模块组合,追踪解析数据

智能家居公司belkin

给用户一点小惊喜(我当时一不小心屏幕横过来就被感动了)

补充:

个性的字体
随着各移动系统的设计规范逐渐统一和技术的愈发成熟,移动应用将会有更美观的字体。

Roboto,安卓标准字体
Roboto & Noto fonts
2014年Adobe与Google宣布推出思源黑体(更适合在移动设备及高分辨率屏幕上呈现)

颜色

Ios的Key color

Android

Color – Style

icon的几层境界:

  • 适合不同背景
  • 简洁有力(在小尺寸时清晰突出)
  • 高辨识度,吸引眼球
  • 塑造品牌
  • 隐喻(设计背后的故事)
  • 情感连接

品牌

  • 自然地融入品牌
  • 巧妙地订制淡淡的水印

day one翻到底部时

Path翻到底部时

Android上的PPI处理

本文摘取至:DPI、PPI、Retina、分辨率、4K、DP、PT、SP详解

Android平台的设备种类比iOS多,因为任何OEM都可以生产设备并且几乎没有比例的限制,然后加上自己版本号。结果就是生产出几乎无限制的屏幕大小和DPI种类,电话和平板电脑一样大,或者电话和平板电脑一样小的情况比比皆是。为此,你的设计总是需要做适配。

在这个部分,我们将采用不同于iOS的方法,我们先来讨论下像素比和DPI分类。

Android设备可以分为两类:手机和平板电脑。这两种设备又可以按照不同DPI分为:ldpi、mdpi、 tvdpi、 hdpi、 xhdpi、 xxhdpi和xxxhdpi。

幸好,有些比其他使用得更加频繁,有些甚至已经弃用了。

首先我们要找到等价于iOS上1x的基础单位。在Android上,这个基础单位就是MDPI。

让我们看看下面列表的像素比。

dpi、ppi

是的,很多,而且还没有完,还有一个落下了。

dpi、ppi

实际上,目前正在使用的DPI有4个:MDPI, HDPI, XHDPI和XXHDPI。 LDPI是过时的DPI,现在已经不再使用,TVDPI是TV UI的特殊例子,在2012年版的Nexus 7中短暂使用过,在手机和平板电脑的使用中没有考虑的必要。尽管如此,TVDPI的像素比(1.33x)还是被用在一些安卓系统的设备上,像是LG G手表,我们后面来讨论这个。

让我们结合带着各自DPI的Android手机和平板电脑全面客观地看待事物。

LDPIMDPITVDPIHDPIXHDPIXXHDPIXXXHDPI

 

也许在现在这个时候有一个设备使用XXXHDPI的实际app资源,但也不是很常见。如果你能用额外时间生产XXXHDPI资源,你的app便不会过时。

引入资源,chrome为例

每次请求资源都需要传递一组4张图片,从MDPI到XXHDPI,无需考虑LDPI。注意,在下面的chrome版本中,TVDPI的输入在这个例子里的5张图片里也很清楚。

和iOS一样,我建议把100%或者1x的像素比作为你设计的基础,这会让设计在适配其他像素比的时候容易一点,特别是在像素比为1.33和1.5的安卓系统上。

看看下面安卓上chrome的返回按钮的例子。

dpi、ppi

 

DPI后面跟着的建议名称不是安卓官方指南强制要求的,这是我们为资源取名的方式,因为现在有限的设计工具很难给每个资源定义一个路径。 考虑到一个资源有时有上百个资源文件,站在设计师的角度来说这是使输出过程不那么痛苦以及避免重命名错误的一个途径。资源在资源仓库里面的存储方式是有结构的,参考后面:

  • drawable-mdpi/asset.png
  • drawable-hdpi/asset.png
  • etc…

如你所见,资源被截成了3232dp的正方形,Android像素比也会是小数。当用1.33或者1.5乘以一个数的时候,最后的结果很有可能就是小数。在这种情况下你需要通过四舍五入来让数字变得有效。在这个例子中,321.33=42.56所以四舍五入之后是43px。

你需要注意以像素为单位的元素,比如笔画。你需要确保你的笔画既不是1px宽也不是2px同时也不像屏幕分辨率部分描述的那样模糊。

附加, Android规则集:

  • Android有7种不同的DPI,你需要关注其中的4个:mdpi,hdpi,xhdpi,xxhdpi,如果希望你的app面向未来,可以关注XXXHDPI。
  • MDPI是基础的DPI或者1x像素比
  • Android使用dp代替pt当作参数规格,但是他们是一样的。
  • 用你最好的判断来处理小数像素比。
  • 传递.png格式图片。
  • 确保检验命名约定,与执行负责人共同完成输出进程。

本文摘取至:DPI、PPI、Retina、分辨率、4K、DP、PT、SP详解

iOS上的PPI处理

本文摘取至:DPI、PPI、Retina、分辨率、4K、DP、PT、SP详解

是时候钻研下特定平台的设计了。

让我们花点时间看看2014年年初时的iOS设备。 从屏幕大小和DPI的角度来看,iOS有两种类型的手机设备和两种类型的笔记本/台式电脑屏幕。

对于手机,有iPhone和iPad。 在手机分类中,有过去的3GS(iOS6依旧支持)和更高版本,其中只有iPhone 3GS是非Retina。iPhone 5以及后来的都用了和iPhone 4/4s有相同DPI的更好的屏幕。让我们来看看下面的列表:

dpi、ppi

 

2014年9月Apple宣布,现在又有2个新类别的iPhone:iPhone 6和iPhone 6 Plus。

iPhone 6比5要大一点(0.7英寸左右),但是PPI相同。iPhone 6 Plus由于它的尺寸,5.5英寸,产生了iOS上新的像素比,@3x。

dpi、ppi

 

相较于其他iPhone,iPhone 6 Plus控制展示比较特殊的是:视觉效果降频。

以为iPhone 6设计为例,设计的画布为1334750px,手机上就呈现1334750的物理像素。当为iPhone 6 Plus时,手机的分辨率小于渲染的图像,因此你设计的分辨率为22081242px,展示时降频为19201080px。如下图:

dpi、ppi

 

物理分辨率比渲染分辨率小15%,会造成一些细节问题,比如半像素使得精细的地方变模糊。分辨率如此高也是很微妙的,除非你近距离观察。因此,在2208*1242px的画布上设计,需要注意设计中真正精细的地方,像是分隔符。模拟如下:

dpi、ppi

 

 

在iPod touch分类中,iPod第四代出来的时候使用的是iOS6和非Retina。iPod第五代以及后面的都使用Retina屏幕并且兼容iOS7,它的屏幕大小与iPhone 5相同。

最后说说iPad。除了iPad 第一代,其余的都用的是iOS7,同时只有iPad2和iPad mini是非Retina屏幕。从设计的角度来看,iPad mini只是普通的iPad(一样的PPI屏幕),但是物理体积更小,也就是说它们拥有相同的分辨率,只是大小从9.7英寸减小到了7.9英寸。保持同样的比例,便会相应地增大像素点的密度,你的虚拟资源就会显得更小了。

dpi、ppi

 

dpi、ppi

至于台式机和笔记本,我们不会全面讨论Apple提供的各种尺寸的屏幕。在今天,Apple提供的几乎都是1x像素比的Retina屏幕(Macbook,Macbook Air,旧版Macbook Pros,台式机显示器),Retina只应用于13和15寸的Macbook Pro。iPad和iPhone像素比是2x。为台式机设计与手机设计不同的是,你需要以相同方式设计来覆盖这两种不同类别的屏幕。

当只使用一种像素比时,基于iOS和OSX的设计是非常简单的。我建议开始设计时先用基础的PPI(例如,100%/1x)然后增加到2x并在2x的屏幕上校验你的设计并且生成2x的资源。当你熟悉在1x和2x之间切换设计后,就能够直接在2x上进行设计了,低分辨率时资源更小。如果你正在为Retina屏幕设计的话(Macbook Pro),这就特别有用。

引入资源,chrome为例

dpi、ppi

如图所示,每次请求资源需要传送两张图片。非Retina下图片名为name.png,Retina的图片增加到@2x命名为@2x.png,这是iOS开发约定的命名规范。

如果你创建了一个图片只用在iPad上,我们在.@2x后面加上~iPad,这仅仅只是chrome的约定。对需要的资源都这样处理,不要只用一个版本的资源来覆盖所有DPI。

附加, iOS规则集:

  • @2x的资源必须始终是1x资源的两倍。
  • Retina资源加上@2x.
  • 始终创建100%和200%比例的图片。
  • 1x和2x的资源始终要保持名字相同。
  • 在100%比例下开始设计,然后做乘法。
  • 传递.png格式的图片。
  • 使用pt创建规范而不是px。

本文摘取至:DPI、PPI、Retina、分辨率、4K、DP、PT、SP详解

什么是DP、PT、SP?DP、PT、SP概念详解

本文摘取至:DPI、PPI、Retina、分辨率、4K、DP、PT、SP详解

DP或PT是测量单位,你可以用来规范你的各种设备和多DPI的app模型。 DP(Dip)表示独立于设备的像素点,PT表示点。DP用在Android上,PT用在Apple上,但是他们本质上是相同的。

简而言之,它能定义独立于设备的像素比的大小,这会包含在不同角色(如设计师和工程师)之间的讨论规则中。

继续说前面“Jim”按钮的例子。 Jim在标准的非Retina屏幕上宽度为44px,在Retina屏幕上是88px。从技术上给Jim添加20px的padding,在Retina上padding是40px。但是,当你基于非Retina屏幕设计时计算Retina的像素值并没什么意义。

因此我们需要做的就是以标准的100%非Retina比例作为一切设计的基础。

ppi、dpi

 

在这种情况下,Jim的大小就是4444DP(PT),padding为20DP(PT)。你可以在任何PPI上执行你的规范,Jim仍然是4444dp/pt.

Android和iOS会调整自身大小适应屏幕并且使用正确的像素比来进行换算,这就是为什么我发现使用屏幕的原始的PPI设计会更简单。

SP和DP、PT从用途上来讲是不同的,但是工作方式相同。SP表示与比例无关的像素,通常用来定义字体大小,SP受用户Android设备字体设置的影响。作为一个设计师,为任何事物定义SP就像定义DP,最好基于清晰的1x的比例(以16sp为例,它是非常便于阅读的字体大小)。

附加: 始终使用分辨率或者非比例的值作为规范。屏幕尺寸、分辨率种类越多,它就越重要。

本文摘取至:DPI、PPI、Retina、分辨率、4K、DP、PT、SP详解

什么是像素比?像素比概念详解

本文摘取至:DPI、PPI、Retina、分辨率、4K、DP、PT、SP详解

当你的设计需要在不同PPI下转换时,像素比就是你的救星。当你知道像素比后,就不需要再考虑设备的详细规格了。

以iPhone 3G和4为例,相同物理大小上iPhone4的像素点是3G两倍,因此像素比就是2,这表示只需要用你的资源乘以2,就可以兼容4G的分辨率了。

让我们先创建一个44*44px的iOS上被推荐的touch按钮(我后面会介绍),定义为典型按钮“Jim”。 为了让Jim在iPhone 4上看起来更好,需要创建一个它两倍大小的版本。下面就是我们做的。

dpi、ppi

很简单。现在的Jim,一个是标准PPI(iPhone 3)的Jim.png版本,一个是200%PPI(iPhone 4)的Jim@2x.png版本。

现在你也许会问,“等等啊!我很确定还有其他的像素比,不止这两个。”有,这是一个噩梦。好吧,也许不是噩梦,但是我很肯定你宁愿花一天时间熨袜子也不想处理无数的像素比。幸好这也没有你想象的那么严重,我们后面再说。

让我们先说说单位,因为现在比起像素,你更需要单位来规范多DPI设计。这就是DP和PT起作用的地方。

附加: 对于每一个你正在做的设计,像素比都是需要知道的。像素比把屏幕大小和PPI结合起来,让人们更理解它们。

本文摘取至:DPI、PPI、Retina、分辨率、4K、DP、PT、SP详解

什么是视网膜显示屏?视网膜屏详解!

本文摘取至:DPI、PPI、Retina、分辨率、4K、DP、PT、SP详解

“Retina(视网膜)显示屏”是Apple公司在发布iPhone 4时引入的。之所以叫做Retina是因为设备的PPI非常高以至于人的视网膜也不能在屏幕上分辨出像素点来。

这个说法在现在的设备的屏幕范围内是正确的,但是随着屏幕越来越好,我们的眼睛也会被训练得足够感知像素点,特别是圆形的UI元素。

从技术的角度来讲,他们做的就是在完全相同的物理大小上展示比原来高和宽多一倍的像素点。

iPhone 3G/S是3.5英寸的斜角,分辨率为480320px,PPI为163。 iPhone 4/S是3.5英寸的斜角,分辨率为960640px,PPI为326。

dpi、ppi

事实证明正好是两倍的关系,同样的物理大小,屏幕上的元素却有两倍的清晰度,因为他们有两倍的像素点。1个标准的像素=4个Retina像素,像素的四倍。

思考下面的例子,在复杂设计中如何直接应用:

dpi、ppi

图注:在第三方设备上很难模拟出来自不同设备的不同图片质量,如上图所示,Retina的音乐播放器虽然与iPhone 4的音乐播放器有相同的物理空间,但图片质量看上去比iPhone 4好了两倍并且更清晰。

因为“Retina”显示屏的命名归Apple公司所有,所以其他公司使用“HI-DPI”或者“超大像素sp33d显示器”(我将注册这个)或者其他的来表示。

附加: 使用Apple的产品是熟悉DPI换算,理解分辨率、PPI、物理尺寸比例之间差异的极佳方式,因为你只需要考虑一个像素比。

本文摘取至:DPI、PPI、Retina、分辨率、4K、DP、PT、SP详解

什么是4K? 4K概念详解

本文摘取至:DPI、PPI、Retina、分辨率、4K、DP、PT、SP详解

你也许听到过很多次4K,它在最近非常流行。在了解它是什么之前,我们需要先弄明白“HD”的含义。

需要事先声明的是,本文是简化版本,所以这里只考虑最常见的分辨率。HD有不同的类别。

它适用于从1280*720px或720p开始的720水平的任何分辨率。一些地方也将这个分辨率SD叫做标清。

全高清适用于1920*1080px的屏幕。大多数的TV以及越来越多的高端手机(Galaxy SIV, HTC one, Sony Xperia Z, Nexus5)都是这个分辨率。

4K始于3840*2160像素,它也叫做Quad HD,被称为UHD超高清。简而言之,你可以放4个1080p的像素点在4K的屏幕上。

另外一个4K的分辨率是4096*2160,这个稍微大一点,一般用在投影仪和大画幅相机上。

dpi、ppi

computer如果我外接一个4k的显示器到电脑会发生什么呢?

最新的OS不再参照4K的比例,这意味着给Chromebook或者macbook外接一个4K显示器,将会使用最高的DPI。假如这样,200%或者@2x,按照正常比例展示就会看起来很好但是有点小。

假设的例子:如果你外接一个12寸4k屏幕到12寸高清屏幕(2x)的电脑,所有东西都会显得小了两倍。

附加:

  • 4k就是四倍全高清。
  • 如果现在的OS掌握了4k但是又不按照比例来,这说明现在还没有特定的4k资源。.

本文摘取至:DPI、PPI、Retina、分辨率、4K、DP、PT、SP详解