Portfolio
UX Designer / Photographer
CONTENTS 04
About Me
06
UX Project
26
Photography
22 36
Poster Design
Video Work
About Me 梁皖茵
Liang, Wan-Yin 1996.02.25 wanyinworker@gamil.com
嗨！我是皖茵，我是浪漫的双鱼座，藏在浪漫底下 的，还有追求完美的性格。我喜欢思考每一幅画面带
给观者的意义，所以喜欢设计、喜欢摄影。对我来说， 设计是一种说故事的方式，美学也应运而生。
4
学 历 EDUCATION 国立新竹女子高级中学 普通科
国立中正大学 主修政治学系／辅修传播学系
国立交通大学 传播研究所／使用者经验设计组 经 历 EXPERIENCES
2012 新竹女中校刊社
社长
2017 国立中正大学台文所
计划助理
2015 国立中正大学亲善大使团
Teds 台湾选举与民主化调查
面访员
国立中正大学摄影社
制图营销
公共电视台 PeoPo
2018 语菓 Fortune Teller 语菓 Fortune Teller
文化银行 Bank of Culture
2019 交通大学传播研究所学会
亲善大使
交通大学传播研究所
交通大学教发中心创客制片所
公民记者 营销实习生
特约摄影师 摄影实习生 设计长
互动媒体实验室 影棚助理
技 能 SKLLS 软件：
Adobe Photoshop / Illustrator / InDesign / Adobe Premiere / Xd / Reallusion iClone / 技术：
UX Design / UI Design / Virtual Studio / Photography / Filming / TOIEC 780 /
5
UX Project 01 回家机器人
双薪家庭越来越普遍，伴随而来的是小孩放学
的接送问题。通常，小学的放学时间落在正中 午或下午四五点，但那仍是许多家长的上班时
间，无法亲自接送小孩回家；考虑到安全的问 题，多数家长会选择将小孩委托安亲班或补习 班照顾。
我 们 的 团 队 决 定 正 视 这 个 问 题。 透 过 UX 的
研 究 方 法， 打 造 出「 回 家 机 器 人 」 的 原 形 （Prototype），它能不仅能完成接送小孩回家
的目的，还能让家长在远程同步陪伴小孩，更 有自卫功能保障安全。
6
7
UX Project 01 回家机器人 Background
双薪家庭越来越普遍，伴随而来的是小孩放学的 接送问题。通常，小学的放学时间落在正中午或 下午四五点，但那仍是许多家长的上班时间，无 法亲自接送小孩回家；考虑到安全的问题，多数
家长会选择将小孩委托安亲班或补习班照顾。我 们的团队决定正视这个问题。透过 UX 的研究方
法，打造出「回家机器人」的原形（Prototype）， 它能不仅能完成接送小孩回家的目的，也能让家 长远程同步陪伴小孩，更有自卫功能保障安全。
Design Process
我与另外三位团队成员，历时三个月，透过右边 所列的设计流程，深入了解家长接送小孩的心路
历程、凝聚所有设计参与者的共识，并使用 WOZ 工具（Wizard of Oz prototype），逐步建立理想 中的回家机器人雏形。
团队成员 → 8
观察与发现 使用者研究
步骤分析
设计洞见
使用者测试 雏形设计
User Study
我们邀了两位符合使用者样貌的家长，与我们共同参与这次的回家机器人原型
设计。这两位家长同样都是双薪家庭的一员、小孩年纪很小并且正在就学当中， 皆正在或曾面临接送小孩的问题。
Persona 1 # 开明放任的守护者
「目前是找安亲班接送小孩，等小孩再大一点，我想让他们自己走回 家，但还有很多事情要考虑，主要还是安全问题。我其实不担心小孩 能不能自己走回家，我担心的是外面的坏人会直接拐走小孩。」
江可欣
40 岁 / 国中国文老师
－ 个性开明，做事很有原则
－ 双薪家庭，配偶职业是竹科工程师 － 育有两女，一个 7 岁、一个 8 岁
－ 面临上班时间与小孩放学时间的冲突
Needs & Goals :
˙ 在工作与家庭之间取得平衡 ˙ 小孩放学之后能够平安回家
Persona 2 # 重视学习的陪伴者
「我很重视小孩的教育，小孩有上才艺班，也因为这样，他常要带很 多额外的东西，例如直排轮，所以东西一多，只能开汽车接送。如果
我和老公都还没下班的话，会协调一人去接小孩，通常是我会去接。」
黃芷晴
39 岁 / 银行营销专员
－ 个性热心，做事细心
－ 双薪家庭，配偶职业是竹科工程师 － 育有一子，5 岁
－ 很重视小孩的教育与陪伴问题
Needs & Goals :
˙ 在工作与家庭之间取得平衡 ˙ 小孩平安回家并有人陪伴
Environment Requirements
受访者的小孩所就读的新竹市立东园小学，放学时的路口处人车众多，周围的学府路、光复 路及食品路上更是在尖峰时段会塞车的大马路，然而，人行道却不够宽敞，有些路段甚至没
有人行道，对行人不够友善。家长在接送小孩的时候，除了安全问题，也得考虑塞车的问题。
9
Task Analysis
UX Project
我们从受访者告诉我们的工作流程（workflow）中，列出两个比较重要的情况（case）， 进行任务与流程分析。以下的图表是在使用回家机器人时，使用者会经历的过程：
Use case 1 ：陪伴小孩回家
01 回家机器人 圖 例
User accesses form
Button click to new status
辨認小孩
設定路線
開啟人臉 辨識功能
設定路線選項
通知家長
小孩辨認結果
是否為 自己小 孩？
YES
Notification
AI control
走路
抵達家裡
按下「回家」 開啟360度 偵測功能
家長設定路線
確認小孩 NO
User decision
小孩安全到家 （顯示走路路 線、時間）
開啟安全 警示功能
規劃最佳路線
通知家長 遇到危險路況 家長遠端操控 避開障礙
Use case 2 ：保護小孩安全 圖 例
Button click to new status
辨識搭訕者 開啟人臉 辨識功能 通知家長 搭訕者訊息
User accesses form
User decision
接收家長回應 家長判斷 搭訕者意圖 搭訕者 意圖不 軌？
NO
Notification
噴防狼噴霧 開啟自衛功能
YES
AI control
瞄準意圖不軌 的搭訕者 對意圖不軌者 噴灑防狼噴霧 噴灑成功
通報案件 通報 警方？
NO
YES
通知家長 已通報警方
YES
通知 緊急 聯絡人
NO
設定欲傳送 資料的對象 任務結束
Insight
1. 「安全」与「陪伴」是让家长从工作之中抽空去「接送小孩」的最大动机。 2. 「安全」皆是两次的使用者访谈里，提到最多、最关注的议题。 3. 「安全」将是回家机器人的机会点，「陪伴」是其中一个痛点。
10
User Test
by WOZ
利用 WOZ（Wizard of Oz）仿真回家机器人的讯号传输模式：
首先，机器人透过头部的 Gopro 相机回传实景画面至操控者的平板接口，让操控者同步看见 Gopro
相机的实景画面。此时，操控者得以在平板接口上输入指示，透过一旁架设的手机视讯分享操作画 面至机器人胸前的另一支手机，让机器人也能同步看见 Gopro 相机的实景信息。在操控者与机器人 的人机互动下，即可同步执行操控与动作，模拟机器人执行接送小孩、陪伴小孩任务的实际情况。 透过回家机器人 (robot) 的视角，家长 (controller) 可 以同步监看孩童 (target) 的接送画面，并在平板上输 入相关指示，控制回家机器人执行任务。
Prototype Design
在完成使用者测试之后，我们请使用者分享他们的试用经验，并询问接口设计带给他们的的感受 为何。经过团队内部讨论，我们以「安全」为第一优先的设计考虑，增加警报系统的突出性。
11
UX Project 02 使用者研究 根据创市际市调公司 2018 年的报告，台 湾的月活跃使用者已达到 740 万人；因此，
了解 Instagram 的使用者样貌以及使用者之
间是如何透过的图片来进行人际互动，将有助 于厘清当今图像式社群媒体的人机互动模式。
论文研究题目：
人格特质于 Instagram 的 自我呈现策略及图像社交研究
研究目的：
从 Instagram 发文者角度，了解人格特质 ( 外 向性与神经质 )、自我呈现策略 ( 自我导向与他
人导向呈现策略 ) 与社交图片功能之间的关系， 并以此作为往后设计图像式社群媒体的参考。
研究流程： 观察与发想
实验法 / ANOVA 统计分析
问题提出
访谈法 / 同理心地图 & 顾客旅程地图
研究設計
12
研究發現：
使用者访谈
实验执行
发展 CJM
资料分析
讨论与反思
有发文经验的 Instagram 使用者
研究方法：
文献探讨
研究发现
研究对象：
在 Instagram 透过图片进行自我导向的呈 现策略时，低外向性者倾向于使用具有象 征功能的图片；而在进行他人导向的呈现 策略时，低神经质者比高神经质者更偏向 使用象征功能的图片，且低外向性与高神
经质者较偏好发布具有关系维系功能的图 片。
研究设计与执行： / 量化研究 / 实验执行 & 统计分析 实验一共分为三阶段。第一阶段是检测其外向性及神经质的人格特质。第二 阶段，是以文字说明提供受试者「情境指示」，要求他们在两种不同的指示下，
各从 32 张图片库里选出 10 张最符合自身经验的图片。第三阶段，受试者得将前 一阶段所选出的 20 张图片，以五种不同的图片功能进行分类（注：在受试者进行 分类的动作之前，先请受试者替该 20 张图片的内容主题命名，目的在于让受试者
有更多时间思考图片对他们自己的意义，让分类图片功能的流程更顺畅、也更符 合受试者真正的想法）。
统计分析如下表所示： 表 5：自我導向策略下的象徵圖片的單純主要效果
表 4：不同人格特質在自我導向策略下的圖片功能偏好 變異來源 吸引注意 外向性（A） 神經質（B） AxB 誤差 總數
SS
df
MS
F
.001
1
.001
.000
.052 6.276 908.758 915.105
1 1 300 303
.052 6.276 3.029
.017 2.072
.860 .000
1 1
.860 .000
.414 .000
5.597 622.949 629.497
1 300 303
5.597 2.076
2.695
SS
單純主要效果內容 外向性 低分組 高分組 神經質 低分組 高分組
df
27.284 1.002 10.276 9.183
MS
1 1 1 1
27.284 1.002 10.276 9.183
表 6：不同人格特質在他人導向策略下的圖片功能偏好
F
P
變異來源 吸引注意
6.103 .233 2.588 1.916
.015** .630 .110 .168
註：*p < .05、**p < .01 裝飾性 外向性（A） 神經質（B） AxB 誤差 總數 象徵 外向性（A） 神經質（B） AxB 誤差 總數 坦承 外向性（A） 神經質（B） AxB 誤差 總數 關係維繫 外向性（A） 神經質（B） AxB 誤差 總數
.021 8.990 19.448 1315.128 1344.602
1 1 1 300 303
.021 8.990 19.448 4.384
SS
單純主要效果內容
.005 2.051 4.436*
外向性 低分組 高分組 神經質 低分組 高分組
df
46.753 0.425 4.322 17.116
MS
1 1 1 1
46.753 0.425 4.322 17.116
1.129 2.928
1 1
1.129 2.928
.343 .890
1 300 303
.204 3.288
.062
.041 2.345 .001 1061.806 1064.313
1 1 1 300 303
.041 2.345 .001 3.539
.012 .663 .000
F
P
9.122 0.078 0.843 3.134
.003 .781 .360 .079
註：*p < .05、**p < .01
.204 986.530 993.039
註：*p < .05
表 7：他人導向策略下的關係維繫圖片的單純主要效果
表 8：兩種自我呈現策略的成對樣本 T 檢定
成對差異數 平均數 標準 差
標準 誤平 均值
95% 信賴區間 下限
吸引注意 自我‐他人
‐1.391
2.729 .157
‐1.699
裝飾性 自我‐他人
‐.0428
1.969 .113
‐0.265
象徵 自我‐他人
1.493
2.754 .158
1.183
坦承 自我‐他人
0.365
2.124 .122
0.125
關係維繫 自我‐他人
‐0.428
3.130 .180
‐0.781
SS
df
MS
外向性（A） 神經質（B）
0.313 0.359
1 1
0.313 0.359
0.043 0.049
A x B 誤差 總數
3.940 2202.787 2207.813
1 300 303
3.940 7.343
0.537
7.628 2.994 4.315
1 1 1
7.628 2.994 4.315
2.884 1.132 1.632
793.492 806.105
300 303
2.645
4.003 23.925 1.119 986.929
1 1 1 300
4.003 23.925 1.119 3.290
1.217 7.273** 0.340
1011.944 0.013
303 1
0.013
0.004
2.397 0.535 962.417 965.918
1 1 300 303
2.397 0.535 3.208
0.747 0.167
2.063 28.180 19.263 1588.895 1649.970
1 1 1 300 303
2.063 28.180 19.263 5.296
0.389 5.321* 3.637*
裝飾性 外向性（A） 神經質（B） A x B 誤差 總數 象徵 外向性（A） 神經質（B） A x B 誤差 總數 坦承 外向性（A） 神經質（B） A x B 誤差 總數 關係維繫 外向性（A） 神經質（B） A x B 誤差 總數
F
註：*p < .05、**p < .01
註：(1) 自我 = 自我導向呈現策略；他人 = 他人導向呈現策略。 (2) 平均數、標準差、標準誤平均值與信賴區間之數值均四捨五入至小 數點後第3位。
结果显示：第一，Instagram 用户在使用自我导向的呈现策略时，神经质及 外向性人格对于象征的图片功能的选择有交互效果；而在使用他人导向的呈现策
略时，神经质对于象征的图片功能的选择有主要效果，并且，神经质及外向性人 格对于关系维系的图片功能的选择有交互效果。第二，在使用自我导向的呈现策
略时，人们会倾向于使用象征和坦承功能的图片来进行发文；在使用他人导向的
呈现策略时，则会倾向于使用吸引注意、关系维系功能的图片来发文；装饰性功
能的图片，对于 Instagram 用户来说，并不会因为两种呈现策略的不同，而有显 著的选择偏好。
13
UX Project 研究设计与执行：
/ 质性访谈 / 同理心地图 & 顾客旅程地图
02 使用者研究
Customer Journey Ma
完成同理心地图的分析之后，接着，我与符合 目标客群的 Instagram 用户进行访谈，访谈时间约 45 分钟。最后，将访谈数据汇整成一份顾客旅程地 图。
Empathy Map Canvas
Design For:
神經質人格
1.神經質人格的IG使用者 2.發有關朋友聚餐的IG文 3.發文者
Date:
Version:
拍照就只是拍照， 「紀錄回憶」⽐拍照 本⾝還讓⼈開⼼。
1.發較親密的人的照、內文比較認真 2.想要IG發文的版面只有強連結 3.選擇發文的圖、修圖、文字、標記 4.親密朋友有按讚、留言，不在乎總讚數和 總留言數
1
1.朋友推薦修圖軟體 2.推薦的修圖濾鏡
1.在意親密朋友有沒 有看到、回應 2.害怕親密朋友看到 但不回應？ 3.親密好友在我的貼 文下面和別人聊開
1.親密好友的回應、 情感支持、認同 2.也想要對方發有關 這次聚餐的文
2
3
OPPORTUNITIES
客製化構圖輔 助線
INTERNAL OWNERSHIP
14
4.調修圖參數 5.選濾鏡 把原本還好的照⽚ 變好看了，開⼼！
4
5
記錄⾃⼰跟朋友吃飯 把發⽂當成⽇記的⽤途 不在意誰在看過⾃⼰發的貼 發⽂是⽤來記錄回憶的
撰寫內⽂
發佈貼⽂
6.寫下貼⽂主⽂ 7.標記 HASHTAG 8.標記⼈、打卡
9.檢查貼⽂有無缺失 10.發佈貼⽂
通常內⽂的字不會 超過三⾏。
6
可能會有點緊張， 因為覺得有點⾚裸
10
7 8
看他⼈反
11.定時重新 12.回覆留⾔
9
發完⽂之後就 會去看別⼈回 也不會管誰按
11
1.看到自己發的文 2.其他人也在使用手機發文 3.瀏覽照片、讀草稿、審排版
問親密朋友發的照片行不行？
跟朋友吃飯、拍照、選照片 用APP修圖、發文
GOALS AND EXPECTATI
「如果是和好朋友約吃飯，即使那家餐廳可能不是 我想吃的，我還是會欣然赴約，因為是跟好朋友 ⼀起吃嘛！通常聚餐結束，都會⾃拍或請店員幫 我們拍合照，我會在當天回家之後才在Instagram 上發⽂紀念。發⽂的內⽂通常都很少字，因為照⽚ 就說明⼀切啦！」
後製照⽚
拍攝照⽚ 1.打開相機 2.確認構圖 3.拍
SCENARIO
攝影師、掌鏡者 （持⼿機照相 的⼈）
OPPORTUNITIES
OPPORTUNITIES
OPPORTUNITIES
好看的濾鏡 推薦的修圖參數
智慧選字功能 ⾃動臉部偵測功 能
智慧⽂法檢查功 能（檢查錯別字、 標點符號）
建⽴「回覆 資料庫， 擇。
INTERNAL OWNERSHIP
INTERNAL OWNERSHIP
INTERNAL OWNERSHIP
INTERNAL O
開發Instagram 的軟體⼯程師
開發Instagram 的軟體⼯程師
撰寫修圖程式 的⼯程師
OPPORTU
開發Ins 的軟體⼯
讨论与反思：
ap
IONS
根据研究结果，我提出三个关于设计图像式社群媒体的建议： 首先，得厘清 Instagram 发文图片与坦承功能的关系，避免其成为使
貼⽂
反饋
新整理 ⾔
就不太 回應了， 按讚。
12
UNITIES
覆」類型 ，⼀鍵選
OWNERSHIP
stagram ⼯程師
用者无法被支持的社交需求。
第二，外向性及神经质两种人格特质对于两种自我呈现策略下的象征 功能有不同程度的影响，因此，若能尝试辨别使用者发布的具有象征 意涵的图片为何，就能从中了解更多使用者的心理与样貌。
最后，针对不同人格特质对图片功能的偏好，发布图片的图库接口，
可以优先显示建议的图片内容，例如：「象征功能」之于「一个物品」、 「关系维系功能」之于「两人以上的合照」，让使用者能直观地选择 到自己想要发布的图片。
15
UX Project 03 語菓官網設計 语菓是一间新创饮料店，它以签诗佐茶， 结合中国传统艺术与现代品茶文化，一
年内便窜升成为新竹区最具特色的饮料 店之一。然而，语菓在线的正式发声管 道，却只有脸书粉丝专页，并没有一个 符合语菓形象、传达完整信息的官方网 站。
有鉴于这样的需求，我向语菓的老板争 取架设网站的机会，希望能运用所学的 设计知识与自己对美感的自信，搭建一 个最适合语菓的网站。
Design Process 观察与发现
首先，我们定位语菓是一间以深
使用者研究
次是老板的温暖好客与其对茶品
功能地图
厚文化底蕴为特点的饮料店，其 的坚持。第二步，比较新竹区饮 架构设计 接口设计
16
User Study
料店官网之优劣，以及收集其他 县市别具特色的网站设计。第三 步是评估我的设计能力与选择网 站架设工具：Wix。
Functional Map
依据语菓的品牌价值与现有的可用数据，我架构出以下的功能地图（Functional
Map）。架构完成之后，发现语菓缺少许多饮品特写和意境照片，所以在正式设 计网站之前，又再进行了几日的拍摄作业，补足网站需要的元素。
首页
满版意境照片
形象视频
关于语菓
饮品故事
签诗文化 各系列饮品简介
各系列饮品照片
外送信息
联络信息 店长故事
特色饮品 店內照片
各系列饮品的用料
饮品菜单 相关新闻
品牌理念
完整菜单 美食部落客文章 网络媒体报导 电视新闻报导
外送說明 外送菜单
完整菜單連結 电话、地址、脸书粉专、Instagram
创业理念 心情点滴
17
UX Wireframe Project
for PC
03 語菓官網設計 LOGO
語 菓 上 新 聞
首页
scroll
美食 部落客 網路 媒體 電視 新聞
scroll
相关新闻
語菓外送專用菜單 地 圖
品牌理念品牌理念品牌理念品牌理念品牌理念 品牌理念品牌理念品牌理念品牌理念品牌理念
scroll
聯絡我們
VEDIO
联络信息
飲品的故事 飲品 系列名稱
饮品故事
臉書粉專
LOGO
关于语菓
scroll
18
scroll
外送信息
scroll
Wireframe
for Mobile
飲品的故事
LOGO
語菓外送專用菜單
飲品 系列名稱
swipe up
首页
品牌理念品牌理念品牌理念品牌理念品 牌理念品牌理念品牌理念品牌理念品牌 理念品牌理念
swipe up
聯絡我們
饮品故事
swipe up
外送信息 ＆联络信息
語 菓 上 新 聞
美食 部落客 網路 媒體
VEDIO
关于语菓
電視 新聞
相关新闻
19
UX UI Project for PC
03 語菓官網設計 scroll
首页
相关新闻
scroll
外送信息
联络信息 scroll
关于语菓 scroll
饮品故事 20
scroll
scroll
UI
for Mobile
LOGO
swipe up
首页
swipe up
饮品故事
swipe up
外送信息 ＆联络信息
相关新闻 关于语菓
语菓网站连结
21
Poster Design 01 摄影社讲座活动 在摄影社，我担任「制图」的职位，负责制作所有活动宣传图片。我在摄影社一年的时间， 几乎每周都需要产出宣传图片，在一次次的制作经验中，我理解到很多关于排版与设计 的美学概念。
22
23
Poster Design 02 语菓营销活动 我在语菓举办的父亲节活动， 成果并不如预期；在检讨活 动为何成效不佳时，老板导 入了设计思考的观念，让我 明白：活动失败的原因是没 有站在使用者的经验思考。
24
step� 秀出與爸爸的合照(不用上傳XD) step２ 粉專按讚並打卡「語菓 Fortune Teller」
即可獲得：
父親節詩籤卡片！ & 第二杯 飲料八折 活動期間: �/�-�/�� 「老婆視角」 篇 「小孩視角」 篇 「朋友視角」 篇
＃任選一篇父親節貼文 Tag好友
再抽八杯飲料兌換券！
25
PhotoGraphy 01 接案作品
26
27
PhotoGraphy 01 接案作品
28
接案的摄影作品须符合客户的需
求与喜好，因此，得先与客户沟
通大略的画面安排，并于毛片阶 段再与客户确认修图的方向。
29
PhotoGraphy 02 風格作品
30
31
PhotoGraphy 02 風格作品 摄影也是一种语言媒介，可以用来传递摄 影场域的信息，甚至是触发观者的某种特 定情绪。构图、色调、对比，都是摄影师 能够主观框架的元素。
摄影相簿连结
32
33
PhotoGraphy 02 風格作品
34
35
Video Work 视频叙事作品 01〈在〉
相比于静态图像，动态影片能表达更丰富的讯息给观众， 让观众更加沉浸于我们所营造的氛围中。
透过现代舞蹈，展现人与大自然和平共存的生命力量。
视频截图：
02〈机虑〉 视频截图：
36
将手机拟人化，描述手机带来的便利，与失去手机之后，社交生活的好转。
03〈Together〉
从一个乐团的分崩离析，进入深层的个人价值探索。
视频截图：
04〈语菓形象短片〉
将语菓的人情温暖与文化底蕴在短短一分半传达。
视频截图：
05〈生医课程招生〉 用剧情短片开场，中间穿插虚棚画面，呈现活泼气氛。 视频截图：
37
