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

陳昱安
陳昱安
Jul 7, 2017 · 5 min read

前陣子去上了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學到的東西讓我在實習生活中相當受用,也讓我對自己的作品更有信心!

    陳昱安

    Written by

    陳昱安

    Web Developer @ Dcard

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade