最近讀了兩本設(shè)計(jì)大拿的書(shū)籍（Design Methods 101 & Microinteraction）提岔，結(jié)合書(shū)中的思想仙蛉，突有感而發(fā)，遂書(shū)此文碱蒙。
本文討論的對(duì)象是對(duì)于數(shù)字產(chǎn)品的交互設(shè)計(jì)荠瘪，主要是界面元素和交互內(nèi)容。
對(duì)象##
對(duì)象我假象是設(shè)計(jì)的對(duì)象赛惩，可以是一整個(gè)產(chǎn)品哀墓，也可以產(chǎn)品的某一個(gè)功能，或者是承載功能的某一個(gè)頁(yè)面喷兼。
從大至小篮绰，from high level to low level, 都可以嘗試用這個(gè)思想去解構(gòu)。
屬性##
對(duì)象的靜態(tài)特征季惯。如果以一個(gè)產(chǎn)品來(lái)考慮吠各，即這個(gè)產(chǎn)品的功能是哪些。細(xì)化到界面勉抓，則是界面的元素是哪些贾漏。再細(xì)化界面的元素，元素的構(gòu)成有哪些藕筋，比如邊框纵散，文字，背景隐圾，陰影等伍掀。
方法##
對(duì)象的動(dòng)態(tài)行為。產(chǎn)品層面翎承，功能的觸發(fā)器是什么硕盹，功能以何種規(guī)則運(yùn)行，功能運(yùn)行時(shí)的反饋是什么（運(yùn)行前叨咖，運(yùn)行時(shí)瘩例，運(yùn)行結(jié)束），功能是否有多狀態(tài)和循環(huán)甸各。
聯(lián)系##
對(duì)于數(shù)字產(chǎn)品垛贤，功能的觸發(fā)器是具體到某一元素上的，所以便在屬性和方法間搭了一座橋趣倾。通過(guò)方法操作對(duì)象的屬性來(lái)反應(yīng)當(dāng)前對(duì)象的狀態(tài)聘惦，進(jìn)而給用戶反饋，達(dá)到良好的用戶體驗(yàn)儒恋。
實(shí)例分析##
結(jié)合 DailyUI::006 的主題 User Profile 我舉例說(shuō)明這個(gè)思考模式善绎。
就以微信此類的社交產(chǎn)品作為例子黔漂，限定設(shè)計(jì)產(chǎn)品的類別好針對(duì)具體問(wèn)題進(jìn)行思考。
窮舉你認(rèn)為需要的頁(yè)面屬性：昵稱禀酱，性別炬守，頭像，簡(jiǎn)介剂跟，地區(qū)减途。其他屬性可針對(duì)具體產(chǎn)品進(jìn)行添加，這里 keep it simple曹洽。
思考屬性的方法
- 昵稱：修改昵稱
- 性別：選擇性別
- 頭像：上傳頭像
- 簡(jiǎn)介：修改簡(jiǎn)介
- 地區(qū)：選擇地區(qū)
確定方法的基本規(guī)則
- 昵稱：通過(guò)輸入框輸入
- 性別：通過(guò)選擇框選擇
- 頭像：通過(guò)上傳獲得
- 簡(jiǎn)介：通過(guò)輸入框輸入
- 地區(qū)：通過(guò)選擇框選擇
細(xì)化方法的規(guī)則[包括觸發(fā)鳍置，限制，反饋送淆、模式税产、循環(huán)]，這是出現(xiàn)創(chuàng)新想法和保證邏輯嚴(yán)謹(jǐn)?shù)年P(guān)鍵環(huán)節(jié)
昵稱：
前置狀態(tài)
如何可以通過(guò)通訊錄或者關(guān)聯(lián)帳號(hào)讀取用戶姓名的化坊夫，把其設(shè)置成默認(rèn)昵稱砖第。無(wú)法讀取則通過(guò)后臺(tái)代碼生成一個(gè)隨機(jī)具有當(dāng)?shù)匾饬x的昵稱。
中置狀態(tài)
需要有光標(biāo)提示环凿，同時(shí)鍵盤根據(jù)默認(rèn)鍵盤顯示梧兼，外加顯示刪除全部圖標(biāo)。保存后修改有效智听。如果字?jǐn)?shù)超過(guò)一定長(zhǎng)度自動(dòng)不讓用戶輸入羽杰。如果含有特殊字符，保存時(shí)提醒用戶含有非法字符到推，請(qǐng)重新編輯再確認(rèn)考赛。
后置狀態(tài)
當(dāng)有修改發(fā)生時(shí)，保存標(biāo)簽變成激活狀態(tài)莉测。保存后退出到上級(jí)界面颜骤。如果用戶停留該界面達(dá)到10分鐘未點(diǎn)擊保存，自動(dòng)幫用戶保存一下捣卤。
性別：
前置狀態(tài)
默認(rèn)值為空忍抽，可以獲取準(zhǔn)確性別時(shí)顯示。
中置狀態(tài)
單選男或女董朝，某些國(guó)家可添加其他取向或保密鸠项。
后置狀態(tài)
選擇后回到上級(jí)界面。
頭像：
前置狀態(tài)
默認(rèn)值為系統(tǒng)默認(rèn)無(wú)性別頭像子姜，如果性別確定了后祟绊，改變成對(duì)應(yīng)性別默認(rèn)頭像。需要有圖標(biāo)提示用戶如何操作。
中置狀態(tài)
空狀態(tài)時(shí)：可以拍照牧抽，上傳頭像嘉熊。
非空狀態(tài)時(shí)：還可以下載頭像到本地。
后置狀態(tài)
上傳完成后阎姥，顯示新頭像預(yù)覽记舆，用戶手動(dòng)回到上一級(jí)。
簡(jiǎn)介：
前置狀態(tài)
默認(rèn)值可以提示呼巴，你是誰(shuí)類似信息。
中置狀態(tài)
同昵稱御蒲，區(qū)別是實(shí)時(shí)顯示剩余可輸入字?jǐn)?shù)衣赶。
后置狀態(tài)
保存后回到上級(jí)界面。
同 Logic 1
地區(qū)：
對(duì)前置狀態(tài)
在可以讀取地理位置情況下厚满，設(shè)置其為默認(rèn)值府瞄。讀取不了默認(rèn)值為空，趣味性高的APP可以提示你是來(lái)自外空之類碘箍。
中置狀態(tài)
單選國(guó)家遵馆，之后省，最小單位到市丰榴。
后置狀態(tài)
選擇后回到上級(jí)界面货邓。
同 Logic 2
對(duì)象可視化
打算使用工具 Sketch
假使平臺(tái)為 iPhone7, 對(duì) Profile 界面上的每個(gè)控件再采取面對(duì)對(duì)象思想進(jìn)行思考，正好 Sketch 提供了組件功能四濒，復(fù)用性大大提升换况。
- 昵稱：Title, Input, Default value, Delete button, Hover cursor, Keyboard
- 性別：Title, Default value, Single selection
- 頭像：Title, Image, Operation icon
- 簡(jiǎn)介：Title, Default value, Delete button, Remaining number note
- 地區(qū)：Title, Single selection
現(xiàn)在可以將單個(gè)控件提出進(jìn)行設(shè)計(jì)：
- Tilte
- Input
- Filed value
- Default value
- Delete button
- Hover cursor
- Keyboard
- Operation icon -> to be general -> Icon
- Remaining number note -> to be general -> Note
- Single selection
當(dāng)然也可以將單個(gè)控件組合形成組件，進(jìn)一步提升復(fù)用性盗蟆，在這里不做復(fù)雜分析戈二。
每一個(gè)控件又可以當(dāng)做一個(gè)對(duì)象，分析其屬性和方法喳资。屬性需要兼顧美觀和交互觉吭，方法需要關(guān)聯(lián)屬性的改變從而給用戶反饋。
屬性如下：重復(fù)屬性不再列舉
- Tilte：字體仆邓，字號(hào)鲜滩，顏色，內(nèi)外陰影宏赘，背景色绒北，字間距，透明度察署，其他裝飾
- Input：邊框顏色闷游，邊框粗細(xì)，邊框樣式，背景色脐往，內(nèi)外陰影
- Default value：字體休吠，字號(hào)
- Delete button：圖標(biāo)
- Hover cursor：顏色
- Keyboard：按鈕（再細(xì)分），背景色业簿，內(nèi)外陰影
- Icon：線條粗細(xì)瘤礁，線條顏色，有無(wú)填充色梅尤，是否圓角
- Field value: 字體柜思，字號(hào)
- Note：字體，字號(hào)巷燥，顏色
- Single selection：圖標(biāo)
UI設(shè)計(jì)環(huán)節(jié)是另外一個(gè)創(chuàng)意出現(xiàn)的地方赡盘，你可以做無(wú)數(shù)種嘗試，是個(gè)反復(fù)迭代的過(guò)程
現(xiàn)在需要考慮方法對(duì)屬性的改變缰揪，同時(shí)完善所有輔助元素
- 昵稱：提示信息
- 頭像：默認(rèn)頭像陨享，操作圖標(biāo)
- 簡(jiǎn)介：動(dòng)態(tài)改變剩余字?jǐn)?shù)
- 地區(qū)：右向二級(jí)箭頭
初步終稿：
動(dòng)效##
個(gè)人看法是能不用動(dòng)畫(huà)盡量別使用。這里如果為了刻意提升趣味性钝腺，觸發(fā)器為單擊事件抛姑，但是給所有觸發(fā)都添加個(gè)翻轉(zhuǎn)動(dòng)畫(huà)效果。
優(yōu)點(diǎn)##
用面向?qū)ο笏枷胱鲈O(shè)計(jì)的優(yōu)點(diǎn)我覺(jué)得有主要2點(diǎn)：
- 一是用這種類似編程思想思考設(shè)計(jì)問(wèn)題可以很好的培養(yǎng)自己的邏輯能力艳狐，易于發(fā)現(xiàn) edge cases 和創(chuàng)新想法定硝。
- 二是可復(fù)用性，當(dāng)一個(gè)元素的屬性和方法不斷被窮舉后僵驰，下次碰到相同的情況喷斋，便可以重新使用上次設(shè)計(jì)過(guò)的內(nèi)容，適當(dāng)改動(dòng)和創(chuàng)新即可蒜茴。
飯點(diǎn)到了星爪，日后還會(huì)補(bǔ)充對(duì)動(dòng)效交互的探索。
