Day 02 - 行前说明 — 网页微切版架构 和 UI 元件

https://ithelp.ithome.com.tw/upload/images/20210917/20120754G2xOhNEcxe.png
作为正式开始的第一篇要来讲的是很基础的网页切版和怎麽去看网页中有哪些元件,会分两部分:

  1. 网页微切版架构:让还不太熟网页的人理解一般网页 UI 的架构大概会怎麽切、可以怎麽切
  2. UI 元件找找看:来测试看看看你能不能找齐网页中所有的 UI 元件

网页微切版架构

UI 架构的部分主要就分 上(Header)、中(Content / Main)、下(Footer)三个部分,而中间会在左右有 Sider,或是 Sider 会横跨上中下区块等等,让我们直接看看 Ant Design 画的一些 Layout:

https://ithelp.ithome.com.tw/upload/images/20210917/20120754LjYMcJYK3S.pnghttps://ithelp.ithome.com.tw/upload/images/20210917/20120754kFR7K54IJl.png
https://ithelp.ithome.com.tw/upload/images/20210917/20120754PySsE4A2FF.pnghttps://ithelp.ithome.com.tw/upload/images/20210917/201207547YGqMCXVT9.png

以上就是网页常见的切版架构,另外也会有左右都有 Sider 的情况,像 Facebook

而在一个网页应用 ( Web Application ) 中,虽然会有很多的子页面,但基本上 Header 和 Footer 都不会变动太多,因为那主要是提供一些网页需要一直存在的资讯和操作,像是 Header 会有页面的导航、会员中心,而 Footer 会有「联络资讯」、「相关连结」等等,因此 Header 和 Footer 是会在开发很前面的阶段就会做好的,而主要会下功夫的 UI 都是中间的 Content。

讲得很抽象,既然是 IThome 的 铁人赛,我们就以 IT 邦帮忙 为例让大家看看 Header & Footer:

Header

https://ithelp.ithome.com.tw/upload/images/20210917/20120754gZaB0vQmsq.png

Footer

https://ithelp.ithome.com.tw/upload/images/20210917/20120754CLxMKiWXFZ.png


Sider 是中间左右的区块或是最左边的区块,通常是当选单来使用,习惯以左边为主,像 Ant Design 这样:

https://ithelp.ithome.com.tw/upload/images/20210917/20120754SyaSA2QwSR.png

大概把网页的三大部分介绍完微切版後,马上来进入系列的主轴,跟 UI 元件有关的「UI 元件找找看」啦!


UI 元件找找看

讲完了 UI 的大架构後,我们接着从小地方出发,来看看一个网页中包含了哪些 UI 元件!

范例一: Udemy 的课程列表页面

首先拿一个简单的小画面来小试身手,大家可以先暂停个 1 分钟,测试一下自己在看到这页面时能不能想像它包含了哪些 UI 元件?

https://ithelp.ithome.com.tw/upload/images/20210917/20120754iWZExY0qJU.png
.

.

.

(想好了吗?)

.

.

.

我要来公布答案罗!
红线是切出 Header、Content 和 Footer 的架构,而橘线是切出这页所包含的 UI 元件,至於原生 HTML 的部分我就不再多去标记了。

这边只是让大家对页面中的 UI 元件有些概念而已,如果对这些元件还不熟的话,继续看下去都会介绍到的,不用急!

https://ithelp.ithome.com.tw/upload/images/20210917/20120754wKPdLNjeV8.png

Udemy 的 UI 其实是相对单纯的,接着我们来看稍微复杂一点的仪表版(Dashboard)会包含哪些 UI 元件吧!

范例二:Tocas-UI Dashboard

仪表版通常是在 ERP 系统中会有的功能,因为有很多视觉化跟互动的需求,自然会涵盖到更多 UI 元件,那事不宜迟先来看个 UI,在往下看之前先试着想一下这个仪表板上会有哪些 UI 元件。

(设计先不去管它,这里只是求个范例)

https://ithelp.ithome.com.tw/upload/images/20210917/20120754vjsBPU12Dk.png
.

.

.

(要公布答案罗!可以再确认一下自己有没有漏找的!)

.

.

.

这边一样用橘线画出这个页面会有的 UI 元件,这个页面中有的 UI 元件你都找到了吗?

有些我切得比较细的(像是 Avatar 和 Image)是按照 Ant Design 这个 UI 元件全家桶来定义的,其实也不一定要这麽细啦。

https://ithelp.ithome.com.tw/upload/images/20210917/20120754znM74peWKS.png

把元件都找出来後是不是也觉得这个仪表板变得单纯许多了呢?毕竟也就是一个个 UI 元件放上来後再排版、接上真实资料处理商业逻辑就完成啦!

许多复杂的互动其实都会在元件层级处理完,但元件本身有没有被设计得好用又会是另一个故事了。

最後再分享一下,我从 UI 设计师那边拿到 UI Prototype 後的 SOP

  1. 先跟 UI 设计师讨论一下页面中的商业逻辑和可能遇到的问题
  2. 看他们的大架构是怎麽定的?( Header、Content、Footer )
  3. 整理画面中所需要的各种 UI 元件,有造好的轮子不要再自己造,要造轮子的话多考虑一下跟其他页面的通用性
  4. 上述步骤都结束後才真的会下去刻!

小结

今天是系列的第二篇,主要还是在打地基,让大家理解网页 UI 的架构和一个页面大概是怎麽组成,确认大家对网页有一个认知的架构,後续会渐渐地深入才不会一次走太深就迷路了。

而从网页中的个别 UI 元件到整个页面的堆叠的细节会在 Day 06 讲到 Atomic Design 时再跟大家介绍!

明天要讲的是软件架构模式 ( 如 MVC 和 MVVM ) ,把这些 UI 架构 转换成 软件的架构,去理解前端在资料逻辑和画面之间是如何去设计,而一个 UI 元件在其中又扮演怎麽样的角色。


<<:  D03 - Hello Firmata

>>:  树选手1号:decision tree [python实例]

从登入画面开始做起(上)Day3

今天要制作一个客制化的UI 客制化UI有几种方式 Code StoryBoard Nib 那麽这三个...

30-11 之Domain Layer - Transaction Script

接下来这一篇文章开始,我们要进入所谓 3-Tier 的『 Domain 』的部份,这个层级基本上就是...

Day 02 - 选择适合的DBMS

复习一下,上一篇提到的DBMS是一套提供多位使用者管理资料库的软件系统,负责资料存取和控制。一个DB...

Day25:NavigationView

前言 前面两天刻了两个 view, 现在要用 Navigation 来把它们连接起来。 实作 在 R...

资安学习路上-picoCTF 解题(Web)2

4. Some Assembly Required 1 按右键,检视网页原始码 点击js档看到下面,...