科技
当前位置:首页 > 科技>正文

UI设计基础:屏幕(原创)

字号+作者:LDesign1 来源:今日看点www.hatdot.com 2020-08-25 09:09

许多事情了三四年的UI设计师,界面设计的很漂亮,可是真正开始一个项目时,许多人对于基础的设备屏幕知识都不是很熟悉,今天,就来聊一聊,如何规范设计,读懂UI设计'...

许多事情了三四年的UI设计师,界面设计的很漂亮,可是真正开始一个项目时,许多人对于基础的设备屏幕知识都不是很熟悉,今天,就来聊一聊,如何规范设计,读懂UI设计基础知识——屏幕。

  99%的UI =屏幕上的像素*  

1%是用于语音接口,可能在不久的未来另有神经链接毗连。

UI设计是关于显示的。基于UI就是我们所看到的一切这一事实,明白我们在看什么是很有须要的。

在web的早期,它很是简朴——你设计的像素在640 x 480到800 x 600之间。固然,我们可以回溯到更久远的年月,好比第一个Macintosh或者施乐的第一个桌面ui,可是我们假设老的彩色显像仪是我们的基础。那也是我开始做网页设计的时候(1998年)

我有一个:)

但那是在90年月后期,事情在那之后开始迅速变化。谁人时代的大多数显示器都有相似的分辨率规模,都很是重,不能显示太多的颜色。此外,它们的刷新率较低,导致转动体验欠佳。谁人时代的展示往往限制了网站的视觉效果。

由于我们现在生活在一个有数百万像素和数百万颜色的科技世界,我们需要明白我们今天设计的屏幕。这项技术自早期互联网时代起就突飞猛进。如今,你手里拿着的手机的分辨率在20年前是不存在的。

一个快速的比力。一个典型的90年月后期CRT显示屏的分辨率只有当前iPhone的1/6,而iPhone的尺寸要小得多。

 PPI或像素每英寸  

在某种水平上,每英寸72像素成为了CRT显示器的显示尺度,这种情况连续了很长很长一段时间。现在,我们的条记本电脑和移动设备都有更高的分辨率和像素密度。

可是有什么区别呢?

分辨率是显示器拥有的单个像素的数量。例如,第一代iPhone的基天职辨率是320 x 480。苹果决议,这个分辨率应该足以提供一个舒适的界面,所以它为平台设置了一个1倍密度的基线。

泉源:Engadget

随着带有视网膜显示屏的iPhone 4的推出,这一切都改变了。前提是像素很是麋集,你不能轻易看到单独的一个。基天职辨率(或1x)与上一代iPhone相同,但像素密度是该分辨率的倍数,从而发生更清晰的文本和图像。iPhone 4将像素增加了一倍,到达640×960,但元素的实际设计保持在320×480,并在设备上举行了升级。

好吧,但为什么它仍然是320×480呢?为什么他们不简朴地使用640 x 960作为“可视分辨率”?

为旧设备设计的项目在新设备上要小两倍。这将使它不行能舒适地使用。

在iPhone 4的2倍像素数之后,我们开始在手机、平板电脑和条记本电脑上看到3倍、4倍和更大的像素密度。

例如,现在的iPhone X使用的基天职辨率是375×812,但它实际的像素数是3倍,为1125×2436。

举个例子,如果你设计一个按钮,你需要使它至少44p高。这意味着在1x的时候它将是44像素(1x一个像素就是一个点),而在2x的时候它将是88像素,但在你的设计中仍然是44点。

由于我们设计的UI都在基于矢量的工具中,所以我们不再需要担忧实际的分辨率。1x的基天职辨率在低密度屏幕上用作模板,在高密度屏幕上更清晰、更准确。

苹果iphone现在有5种可能的分辨率。

但你不需要记着这个

大多数设计工具为所有盛行的屏幕巨细提供1x模板。只要按1x举行设计,编码的界面就会自动放大。我松了一口吻!

1.【今日看点】遵循行业规范,任何转载的稿件都会明确标注作者和来源;2,今日看点的原创文章,请转载时务必注明文章作者和"来源:今日看点",不尊重原创的行为【今日看点】或将追究责任;3.作者投稿可能会经今日看点编辑修改或补充。

排行榜