0%

UI lab

下面是本人平时做的一些UI练习(点击标题即可预览):

粒子

点击此处即可预览。

BGM是 光遇·霞谷之行,侵删。

家庭医生

我做了什么

设计了“家庭医生”应用的两个页面:

特色

响应式

通过响应式设计,这两个页面顺应了移动化的趋势,UI能根据屏幕尺寸、屏幕方向、页面缩放等因素自适应。用户在手机、平板、PC等各种类型的设备上都能获得优秀的用户体验。

简约统一

坚决避免炫技式设计,保持页面干净整洁,并在元素间距、颜色、圆角值等方面保持统一。这样一来,用户的视觉负担和学习成本得以降低,产品的审美品质得以提升。

无障碍

一般来说,我们可以使用颜色形状等工具来从视觉层面赋予元素更形象生动的语义(例如使用红色来表示危险操作),但依靠屏幕阅读器等辅助技术的用户是难以感知到这类语义的,从而导致使用我们的服务时遇到困难。

为了解决这一问题,这两个页面使用隐藏的附加文本、**aria-label属性等工具向上述用户传达那些他们难以感知的语义,尽可能确保该产品能为每位用户提供平等优质**的服务。

语义化

HTML代码高度语义化,让搜索引擎能够轻松理解页面的结构与内容,进而在使我们的站点在搜索结果页面中能获得更靠前的位置,便于用户发现我们的服务。

代码复用

配合PWA方案,本产品既能获得可比拟原生应用的使用体验,还能轻松实现跨平台,从而尽可能覆盖更多的用户,并向其提供高质量的服务。

在PWA方案下,一套代码可跨越多端,从而实现了代码复用,大大减少了开发成本。

Q & A

访问页面时略觉卡顿?

这两个页面和整个博客网站部署在免费主机上,而免费主机的访问速度普遍较慢,页面设计和代码本身是没问题的。