# 做出面試官也喜歡的網頁（Landing Page）
廖洧杰
20220923

目錄
===
[TOC]

## 講義
- ppt：https://hackmd.io/NePDNVGETnqLY7hvwQASEw
- video：https://youtu.be/H5XB-UZVgM4

## 網站規劃流程
### ⧑ 潛在客戶分析：發想題目
### ⧑ ++使用者故事(user story)++
* 目的
* **我是什麼角色，我可以操作平台哪些功能，獲得預期的利益**
:::spoiler 使用者故事範例
1. 我是前台使用者，我想使用註冊功能，獲得會員資格
2. 我是前台使用者，我想使用發文功能，發布一篇貼文
3. 我是前台使用者，我能進入會員中心修改個人資料，並成功修改個人密碼
4. 我是後台管理者，我能從首頁儀表板，觀看到今天有多少人註冊
5. 我是最高管理員，我能進入後台管理的貼文管理，去刪除指定貼文，同時前台也會顯示貼文被刪除
:::

### ⧑ 線稿圖繪製(++wireframe++)
* 目的 ★3

* example
1. The F2E([wireframe](https://cacoo.com/diagrams/fcL1BAphQvrlVBKo/AC1AC)、[網站](https://challenge.thef2e.com/))
2. 切切([wireframe](https://whimsical.com/ui-flow-9ikcQ3ThQBedxZbaGUh6gP)、[設計稿](https://www.figma.com/file/gM3CvZAEeGbMHNhtPQDLb3/%E5%AF%AB%E4%BD%9C%E5%B9%B3%E5%8F%B0?node-id=166%3A418)、[簡報](https://docs.google.com/presentation/d/1Qn2RvbRwQreSnpqyr1bc8HOt3NBO9UiC/edit))
3. 做伙來讀冊([wireframe](https://www.figma.com/file/v6GiTIoqpLOuc9waU4vYzx/%5Bedited%5DStudy-circle_wireframe?node-id=0%3A1)、[設計稿](https://xd.adobe.com/view/8828c659-a0a6-4b1d-b730-c07306e6dcdc-dd7b/)、[網站](https://thak-tsheh.rocket-coding.com/index.html#/study-circle))
4. 腦塞 side project([wireframe](https://www.figma.com/file/4JgkaPEnKdcYlZ7e0xTSyg/Prototype_SideProject?node-id=14%3A53)、[Mockup](https://www.figma.com/file/4JgkaPEnKdcYlZ7e0xTSyg/Prototype_SideProject?node-id=0%3A1)、[簡報](https://www.figma.com/file/4JgkaPEnKdcYlZ7e0xTSyg/Prototype_SideProject?node-id=1480%3A7622))

- 常見 注意事項 ex 饗農
- 沒有 call to Action 行動按鈕（適合跟 Banner 整合）
- banner + search table 下拉
- 假字太多，資料力求真實
- 假字，不適合
- 類真實網站，較好
- 比重設計，影響
- 卡關時，可 Google 尋找類似網站尋找靈感（Web、Mobile App）

- 推薦 wireframe 文章
- 獸群之心
- [淺談線框圖（Wireframe）](https://soking.medium.com/%E6%B7%BA%E8%AB%87%E7%B7%9A%E6%A1%86%E5%9C%96-wireframe-286def6788e2)
- [繪製線框圖（Wireframe）的視覺處理小技巧](https://soking.medium.com/%E7%B9%AA%E8%A3%BD%E7%B7%9A%E6%A1%86%E5%9C%96-wireframe-%E7%9A%84%E8%A6%96%E8%A6%BA%E8%99%95%E7%90%86%E5%B0%8F%E6%8A%80%E5%B7%A7-cdcdfc46997f)
- [線框圖（Wireframe）標註的識別規劃小技巧](https://soking.medium.com/%E7%B7%9A%E6%A1%86%E5%9C%96-wireframe-%E6%A8%99%E8%A8%BB%E7%9A%84%E8%AD%98%E5%88%A5%E8%A6%8F%E5%8A%83%E5%B0%8F%E6%8A%80%E5%B7%A7-f2a1cedb7eae)

## Landing page 首頁，動線規劃

### ⧑ landing page 規劃 （[範例文件](https://docs.google.com/document/d/1xvCkZ4K0Ws6B7a9pYpNnkS786xE54PjXOLuEPE9hVkM/edit)） ★5
1. ++服務命名++：以一句話介紹你所提供的服務
- text or banner+控制項
- 整體性
2. 提出++痛點++：提出潛在客戶的困擾
- 共鳴、相同問題
3. **產品推薦：提出++產品優勢++**
- 可取代痛點
- 功能 bind 產品優勢
- 排列方式:並排、左右
- 類別(分類) ex hahow
4. 第++三方背書++：好友、廠商好評，推薦提昇產品價值
- 可組合 產品推薦 ex 作品牆(3+4)
- 廠商、客戶 推薦
- 推薦數量
- 不必多，但要關鍵強力。
5. 引++導購++買（++call to action++）：推最後一把刺激顧客買單
- 多選→註冊 ex AmazingTalker
- 區隔 顏色 ex aws
- 錨點：由錨點導航到最後button
- 資料權重：越少越好，聚焦、不分心
6. 常見問題：讓客戶信任你的產品
- 不一定放首頁，可單獨新增一頁
- 減輕客服負擔
### ⧑ 範例網站
* [BotBonnie](https://www.botbonnie.com/zh)
* [六角學院](https://www.hexschool.com)
* [lihi 短網址](https://lihi.io/)
* [Apple](https://www.apple.com/tw/)
* [Vue 作品實戰班](https://www.hexschool.com/courses/vue-training.html)
* [uber eat](https://www.ubereats.com/tw)
* [AmazingTalker 家教平台](https://tw.amazingtalker.com/)
* [Uber](https://www.uber.com/tw/zh-tw/)
* [yourator 人力銀行平台](https://www.yourator.co/)
* [kktix](https://kktix.com/)
* [蝦皮購物](https://shopee.tw/)
* [Hahow](https://hahow.in/)
* [Atome](https://www.atome.tw/)

## QA
- 正常的前端工程師會需要去做到設計畫面的工作嗎
- PM：畫 wireframe
- UI：設計稿
- 前端：有概念
- 想知道如果非lading page的頁面 ，也有著重的點嗎？？
- 想讓人關注的點
- call to action 引導