下面是本人平时做的一些UI练习(点击标题即可预览):
粒子
点击此处即可预览。
BGM是 光遇·霞谷之行
,侵删。
家庭医生
我做了什么
设计了“家庭医生”应用的两个页面:
特色
响应式
通过响应式设计,这两个页面顺应了移动化的趋势,UI能根据屏幕尺寸、屏幕方向、页面缩放等因素自适应。用户在手机、平板、PC等各种类型的设备上都能获得优秀的用户体验。
简约统一
坚决避免炫技式设计,保持页面干净整洁,并在元素间距、颜色、圆角值等方面保持统一。这样一来,用户的视觉负担和学习成本得以降低,产品的审美品质得以提升。
无障碍
一般来说,我们可以使用颜色、形状等工具来从视觉层面赋予元素更形象生动的语义(例如使用红色来表示危险操作),但依靠屏幕阅读器等辅助技术的用户是难以感知到这类语义的,从而导致使用我们的服务时遇到困难。
为了解决这一问题,这两个页面使用隐藏的附加文本、**aria-label
属性等工具向上述用户传达那些他们难以感知的语义,尽可能确保该产品能为每位用户提供平等且优质**的服务。
语义化
HTML代码高度语义化,让搜索引擎能够轻松理解页面的结构与内容,进而在使我们的站点在搜索结果页面中能获得更靠前的位置,便于用户发现我们的服务。
代码复用
配合PWA方案,本产品既能获得可比拟原生应用的使用体验,还能轻松实现跨平台,从而尽可能覆盖更多的用户,并向其提供高质量的服务。
在PWA方案下,一套代码可跨越多端,从而实现了代码复用,大大减少了开发成本。
Q & A
访问页面时略觉卡顿?
这两个页面和整个博客网站部署在免费主机上,而免费主机的访问速度普遍较慢,页面设计和代码本身是没问题的。