---
# System prepended metadata

title: 產品思維 與 設計
tags: [Design]

---

<style> 
    body{font-family:"微軟正黑體";}
    .red-color{color:#f00}
    .blue-color{color:#f00}
</style>
###### tags: `Design`
# 產品思維 與 設計
> [time=Fri, Nov 29, 2019 9:50 PM]
> [color=#000] [name=aikwdc00]

## 何謂產品
產品必須幫助使用者解決特定的問題，
> 搜尋
> 撰寫
> 儲存
> 發佈
> 分享
> 結構化管理
> [color=#131313]
---

## 產品設計的基本功能
> Create 新增
> Read 讀取
> Update 更新
> Delete 刪新
> [color=#b50721]
---

## 產品開發
### 使用者故事 / 需求
![](https://i.imgur.com/5Sk7vdV.png)

> 「設計思考」最常用於輔助產品的開發者，將天馬行空的點子發展成一個可測試、較具體的產品雛型。接下來我們會帶著你瀏覽一遍這五個步驟，試圖向你回答這幾個問題，幫助你更快掌握設計思考的核心概念及手段：

* 從產品開發者的角度來看，該步驟的目標是什麼？ (Why)
* 落實該步驟的具體作法是哪些？ (How)
* 完成該步驟會得到什麼樣的結果、產出？(What)
* 該步驟的成功關鍵是什麼？（Key success factor)

>1. 獨立的 （Independent）—— 每個使用者故事應該是獨立的、不互相重疊，如此實作時便能更改使用者故事的順序。
>2. 可協商的（Negotiable）——當開發進程隨著產品負責人、設計人員以及開發人員三方合作推進時，可進行調整和修改。
>3. 有價值的（Valuable）——這是產品必須具備的。為使用者提供價值，而非為設計或開發團隊提供價值。
>4. 可評估的（Estimable）——足夠全面，以便開發人員能夠評估工作量與排定優先順序。
>5. 小型的（Small）——就工作量而言；通常，開發一個使用者故事（工程師稱為「一張票」）等於 2 到 3 週的工作量。
>6. 人（Testable）——讓開發人員知道所開發的內容完整，且目標清晰、定義明確。
> [color=#cbed47]
>>例如：
>>使用者想要做什麼，有什麼需求
>>>使用者可以註冊、登入網站
>>>使用者可以搜尋私人房屋
>>>使用者可以用即時通訊和房東詢問和確認房屋和下單細節
>>>使用者可以下訂單
>>>[color=#131313]
>
>![](https://i.imgur.com/74YggZj.png)
>
### **專注於使用者**
創建使用者故事驅使討論以<span class=red-color>使用者為中心</span>進行，提醒設計團隊使用者究竟是誰、他們需要和想要的是什麼。如此一來，有關設計的決策才能基於使用者的需求，而非設計者的偏好。
### **改善協作**
使用者故事簡短、易於理解，因此團隊中的所有人皆能抱持相同共識，而不會造成溝通不良。這是培養協作環境和推動創新解決方案的好方法。
### **防止功能蔓延 (feature creep)**
功能蔓延是指，團隊不斷在功能之上新增功能，使其偏離產品的初衷。使用者故事有助於調整產品的重點，並將功能限制在使用者真正必要的需求上。此外，你可參考 infrographic ，內文例舉關於使用者故事的優點。

---



## 事前準備
「產品功能」與「程式邏輯」
### 運算思維
> ![](https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/5133/ExportedContentImage_01.png)
>> [運算思維](https://hackmd.io/My4nLqD7Q4qxmqZBCEAyCQ)
### UserFlow & WireFrame
**繪製流程圖**
>由使用者故事為出發點，繪製使用者可能行為或需求的流程圖
>![範例](https://i.imgur.com/G15PQKZ.png)以上僅為範例
>設計網站地圖（樹狀圖）

**繪製使用者介面與排版**
>繪製WireFrame(線稿框)
>>架構 (頁面的不同部分如何組合在一起)
>>內容 (頁面上顯示的內容類型)
>>功能 (介面如何操作)
>>行為 (它如何與使用者互動)
>>資訊階層 (資訊的顯示和組織方式)
>>[color=#131313]
---


## 參考資料
>Sunny
>> [Sunny-UserMap](https://miro.com/app/board/o9J_kwW_25M=/)
>>[Sunny-UserFlow](https://xd.adobe.com/view/41e08136-2667-4738-694a-3673587b514f-37d1/)
>> [color=#deed5e]
 
>Other

