一.什么是工具類(lèi)產(chǎn)品

01：未解決某一具體需求，能夠讓用戶(hù)提高效率節(jié)約時(shí)間的產(chǎn)品? ? ?可用性：信息識(shí)別度：背景干擾文字比吭、按鈕不明顯誤操作? ? 控件體驗(yàn)：? ? 圖標(biāo)妓肢、 缺乏美感者疤、比例失衡? ?配色、不考究阔籽、不和諧? 字體流妻、字號(hào)亂用、層次不分 美感?

02：類(lèi)型分類(lèi)：狹義笆制，解決需求單一绅这、實(shí)現(xiàn)路徑單一 廣義，互聯(lián)網(wǎng)產(chǎn)品基本都算工具類(lèi)產(chǎn)品：社交類(lèi)在辆、購(gòu)物類(lèi)......

二.工具類(lèi)產(chǎn)品4大關(guān)鍵詞：

簡(jiǎn)潔：導(dǎo)航架構(gòu)上的簡(jiǎn)潔证薇、1：模塊化設(shè)計(jì)? ? ?2：隱藏相似功能 視覺(jué)層次上的簡(jiǎn)潔、1：使用卡片來(lái)區(qū)分內(nèi)容? ? 2：用線(xiàn)條來(lái)隔分信息 3：通過(guò)字號(hào)顏色來(lái)區(qū)分信息? 頁(yè)面信息上的簡(jiǎn)潔匆篓、 1：把用戶(hù)最想看到的內(nèi)容放在首屏? ?2：學(xué)會(huì)隱藏浑度，把大段內(nèi)容精簡(jiǎn)? 3：簡(jiǎn)潔的同時(shí)保證內(nèi)容可識(shí)別

易懂：圖標(biāo)+文字，先能用鸦概，后能看箩张，1：優(yōu)先考慮功能的理解和識(shí)別性，? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2：其次考慮視覺(jué)美感，最后兩者平衡

快速：工具類(lèi)產(chǎn)品的目的伏钠，就是想通過(guò)功能產(chǎn)品化横漏，來(lái)提升用戶(hù)的工作效率? ? ? 預(yù)見(jiàn)：預(yù)見(jiàn)下一步操作，比如推薦最近聯(lián)系人等? ? 填充：默認(rèn)項(xiàng)的填充熟掂，簡(jiǎn)化用戶(hù)輸入和操作? ? 減緩等待缎浇，動(dòng)效設(shè)計(jì)? ? ? ?新功能引導(dǎo)：1，第一次打開(kāi)app赴肚，2素跺，專(zhuān)門(mén)的幫助引導(dǎo)中心，3誉券，智能引導(dǎo) 引導(dǎo)減少用戶(hù)的距離感指厌，有助于用戶(hù)快速使用功能，聰明的引導(dǎo)幫助用戶(hù)快? ? 速完成任務(wù)?

三.工具類(lèi)產(chǎn)品特征

字體：

1：字體性格? ?

兒童類(lèi)產(chǎn)品? ? ? ? ? ? ? ?安全親和踊跟，方正卡通體踩验、漢儀樂(lè)喵體、漢儀歪歪體

文藝類(lèi)產(chǎn)品? ? ? ? ? ? ? ?復(fù)古韻味商玫，康熙字典體箕憾，麋宋，方正清刻本悅宋簡(jiǎn)體

工具類(lèi)產(chǎn)品? ? ? ? ? ? ? ?系統(tǒng)自帶

女性時(shí)尚類(lèi)產(chǎn)品? ? ? ? 纖瘦輕盈拳昌，方正蘭亭黑袭异，漢儀清雅體

2：iOS中文字體? ? ? ?iOS9及以上? 蘋(píng)方-簡(jiǎn)

iOS8及以下? ? 華文細(xì)黑? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?iOS英文字體? ? ? ?san francisco? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 特別字體? ? ? ? 當(dāng)產(chǎn)品有強(qiáng)烈的自已性格時(shí)，要選擇符合產(chǎn)品定位和調(diào)性的字體

3：網(wǎng)頁(yè)常見(jiàn)字體? ? 英文? 非襯線(xiàn)：helvetica? ? ? 非襯線(xiàn)：Arial? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 中文? ?襯線(xiàn)字：宋體? ? ? ? ? ? ?非襯線(xiàn)字體：微軟雅黑

? ? 注意：避免加載字體顯示緩慢炬藤，字體缺失下御铃，行距，排版沈矿，會(huì)替換默認(rèn)字體上真，會(huì)影響排版效果不佳，默認(rèn)字體經(jīng)過(guò)長(zhǎng)時(shí)間考驗(yàn)细睡，識(shí)別性和約定體驗(yàn)比較好

字體總結(jié)：pc端：微軟雅黑/Arial? ? ? ? ? ? ? ? ? ios/MAC端：蘋(píng)方-簡(jiǎn)/San Francisco? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Android端：思源黑體/Robot? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?突出產(chǎn)品調(diào)性：特別字體

特別產(chǎn)品要用特別字體谷羞，工具類(lèi)產(chǎn)品要用系統(tǒng)默認(rèn)字體

配色

如何選擇色彩 ？

色彩心理學(xué)：

郵件類(lèi)溜徙，藍(lán)色：色彩心理學(xué)：和平湃缎、寧?kù)o、理性蠢壹。行業(yè)色：IT藍(lán)

綠色：自然地顏色嗓违，提升幸福感。健康產(chǎn)品图贸。新生蹂季、新理念

黃色：樂(lè)觀向上冕广，使人厭煩，集中注意力（例偿洁，指示牌）

紅色：激情撒汉、時(shí)尚化妝品牌、食物涕滋、提示操作睬辐、強(qiáng)調(diào)警示

白色：純粹、純潔宾肺、冷靜現(xiàn)代溯饵、中性百搭

品牌色的延展、現(xiàn)實(shí)中實(shí)物的顏色

總結(jié)：1：產(chǎn)品定位和使用場(chǎng)景可以決定產(chǎn)品的選擇锨用。2：品牌的延續(xù)性對(duì)顏色的選擇也會(huì)有影響丰刊。3：避免選擇影響用戶(hù)的顏色（例：大紅大紫顏色雜亂的）4：選擇顏色的目的從功能性出發(fā)，減少視覺(jué)干擾增拥，提高產(chǎn)品效率

確定色彩比例

60%背景色：30%主色：10%點(diǎn)綴色

效率優(yōu)先原則

減少色相啄巧，減少視覺(jué)干擾，突出內(nèi)容跪者。

總結(jié)：1：工具類(lèi)產(chǎn)品配色更加克制棵帽，2：首先符合自已的產(chǎn)品定位。3：效率原則優(yōu)先

配圖

工具類(lèi)產(chǎn)品：直接選擇產(chǎn)品里有重要功能界面來(lái)當(dāng)配圖

總結(jié)：選取產(chǎn)品界面當(dāng)配圖渣玲，是展示產(chǎn)品特點(diǎn)最直接的方式，讓瀏覽的用戶(hù)對(duì)你的產(chǎn)品一目了然

圖標(biāo)

根據(jù)產(chǎn)品定位來(lái)決定產(chǎn)品的風(fēng)格走向：工具類(lèi)產(chǎn)品不會(huì)使用可愛(ài)的風(fēng)格弟晚，少色忘衍。

線(xiàn)性：標(biāo)簽欄，線(xiàn)條大小卿城，2px枚钓，3px

細(xì)節(jié)越多直觀表現(xiàn)力越弱

細(xì)節(jié)少，表現(xiàn)力提升

線(xiàn)性圖標(biāo)屬性瑟押，抽象輪廓搀捷，強(qiáng)化特點(diǎn)

面性：設(shè)計(jì)中與線(xiàn)性一致