NTU Course 課程評價交流平台 — UI專案

陳昱安
5 min readJul 7, 2017

--

前陣子去上了uxabc的UI設計課程,也在課程中完成了一個非常完整的UI作品,藉此機會紀錄一下專案進行的過程與成品。

目標:台大課程資訊整合平台,使課程資訊與評價透明化。

這個題目是源於台大的學生在選課之前,都會先上網找課程評價,但事實上課程評價散落各處,同時因應行動裝置的普及,所以希望有這樣的一個App讓同學們能夠輕鬆找到想要的資料。

User Story

  • 作為一個一般學生用戶,我想要擁有一個帳戶,這樣換手機也能保有我原來的資訊。
  • 作為一個一般學生用戶,我想要用Fb一鍵登入,這樣可以省下很多時間。
  • 作為一個一般學生用戶,我想要建立我的課表,這樣就能知道課程的時間安排與教室在哪裡。
  • 作為一個一般學生用戶,我想要收藏課程,這樣我就能知道該選哪些課。
  • 作為一個一般學生用戶,我想要分享課程,這樣我就能讓大家知道這個課程。
  • 作為一個上過課的學生,我想要發表課程評價,這樣就能讓大家知道這堂課的各種資訊。
  • 作為一個上過課的學生,我想要為課程評分,這樣就能讓大家一眼看出一堂課的總體分數。
  • 作為一個上過課的學生,我想要在別人的評價下留下感想,這樣才能以簡單方式表達觀點。
  • 作為一個上過課的學生,我想要匿名評論,這樣才不會被老師同學盯上。
  • 作為一個沒有上過課的學生,我想要查閱課程基本資訊,這樣就能知道這堂課的客觀資料
  • 作為一個沒有上過課的學生,我想要查閱學生給的課程評價,這樣就能知道自己適不適合這堂課。
  • 作為一個沒有上過課的學生,我想要知道課程的總體分數,這樣就能知道大部分的人對於這堂課的平均分數是多少。
  • 作為一個沒有上過課的學生,我想要知道老師的實際給分,這樣就比較能預期自己拿到的分數。

IA資訊架構

經過了user story探討使用者會想要有什麼功能,確立了整個App的架構:

在這個架構之下,我列舉出幾個使用流程做成logic flow,並依據logic flow用sketch做出wireframe,最後才進入彩色稿的階段。(Logic flow與wireframe因為版面的關係先不貼上來)

在這部分我會列出app三個主要的功能畫面,並解說這些功能的。

登入頁

中間是登入主頁,其中有Fb帳號登入的功能與基本的註冊與登入。

主功能 — 搜尋

搜尋功能是這個app最主要的功能,所以放在登入後第一個頁面,按下右上角的filter後能夠叫出篩選的功能,篩選的詞彙會成為一個小標籤出現在主頁,讓使用者知道剛剛用了什麼篩選。

課程資訊與評價

左邊的是課程的基本資訊,你能在這夜知道客觀的課程資訊,像是授課老師是誰、上課的時間等等,右上角也有加入課表的快捷鍵。按下「看評價」的按鈕以後能夠到中間的評價列表,這頁能夠看到修過的同學留下的評價,也可以按下加號增加自己的評價文,同時每一則評價都能夠按進去看到詳細的資訊(右頁)。

課表

再來是課表的功能,你能夠自行編輯自己的課表,按下編輯後能夠刪除課程,也能按下增加搜尋想要加入的課程。

課程心得

在短短一個月的課程中,老師帶我們從UX到UI一步一步解說,不只是教我們有關設計方面的知識,同時幫我們打好基礎,包括螢幕大小與解析度,也會帶我們看好作品並說明這樣的設計背後的道理是什麼。在uxabc學到的東西讓我在實習生活中相當受用,也讓我對自己的作品更有信心!

--

--