設(shè)計(jì)分享
如何把握設(shè)計(jì)細(xì)節(jié)
我們拿一些非常小的細(xì)節(jié)元素來(lái)說(shuō)，大家平時(shí)怎么去繪制一個(gè)按鈕，是否通過(guò)形狀工具直接畫(huà)一個(gè)差不多大小的按鈕就可以了呢？這里有很多細(xì)節(jié)大家要注意。
1. 按鈕的長(zhǎng)寬是需要有一定比例的，且必須為偶數(shù)
當(dāng)你在2倍圖設(shè)計(jì)時(shí)，盡量數(shù)值能夠被4整除例如36、32、28、24、20等，為什么要被4整除呢，因?yàn)?太小，如果整個(gè)頁(yè)面的基數(shù)是2的話(huà)會(huì)非常碎，2的倍數(shù)太多，頁(yè)面布局會(huì)顯得沒(méi)有規(guī)律。3的話(huà)是奇數(shù)，對(duì)于顯示和運(yùn)算都不友好所以我們選擇4為基數(shù)進(jìn)行設(shè)計(jì)計(jì)算。
2. 按鈕的直角/半圓角/全圓角設(shè)置
直角和全圓角就不講了，主要是半圓角。對(duì)于不同尺寸大小的按鈕，設(shè)置成一樣的圓角數(shù)值是不行的。那應(yīng)該如何設(shè)定呢，我先來(lái)看看一些產(chǎn)品中的規(guī)律。
大家發(fā)現(xiàn)了啥沒(méi)有，有明顯大小的按鈕，半圓角率就會(huì)有明顯區(qū)別甚至剛好是兩倍，但如果按鈕放大兩倍后圓角曲率不變就會(huì)讓大的那個(gè)按鈕圓角看起來(lái)更大。如果沒(méi)有明顯面積區(qū)別的按鈕通常圓角曲率也會(huì)有2/4/6/8這樣的間隔來(lái)設(shè)置，由于按鈕尺寸大小因素影響很多，所以一般不做很?chē)?yán)謹(jǐn)?shù)囊?guī)律，只要不非常突兀就可以.
3. 按鈕的內(nèi)容設(shè)定
一般按鈕內(nèi)部通常會(huì)有一些元素比如圖標(biāo)、文字、動(dòng)效，以及其結(jié)合形態(tài)。例如圖標(biāo)和文字結(jié)合，圖標(biāo)需要有切圖屬性，所以尺寸會(huì)比實(shí)際圖標(biāo)尺寸更大，四周的留白也就越多。并且我們?cè)谠O(shè)定圖標(biāo)、文字和按鈕三者之間的關(guān)系時(shí)，需要進(jìn)行一些計(jì)算，盡量讓其三者的上下左右間距為4的倍數(shù)，但由于實(shí)際情況的限制我們也可以使用2的倍數(shù)。
有一點(diǎn)要注意的是，切圖屬性的存在會(huì)讓實(shí)際視覺(jué)產(chǎn)生平衡偏差，所以我們要以實(shí)際視覺(jué)為主，讓整體內(nèi)容往左偏移一些。另外文字在默認(rèn)狀態(tài)下是有上下的空白間距的，這里如果為和開(kāi)發(fā)說(shuō)明，就會(huì)造成實(shí)際效果的偏差，所以如果大家在sketch里做的話(huà)一定要在輸入完文字之后，再將行高的數(shù)值調(diào)整到和文字大小一致。
那么根據(jù)這些不同場(chǎng)景的按鈕樣式，我們就可以在組件庫(kù)中作出更多復(fù)用性高的組件了，不僅僅是圖標(biāo)、文字、動(dòng)效的結(jié)合，按鈕狀態(tài)、文字字?jǐn)?shù)都可以做進(jìn)組件庫(kù)。
4. 布局
首先有以下功能：頭像、昵稱(chēng)、簡(jiǎn)介、級(jí)別、關(guān)注、分析、瀏覽數(shù)、會(huì)員按鈕。
這些通常是在個(gè)人中心，所以一般也就3種布局，左對(duì)齊、居中對(duì)齊、右對(duì)齊。三種布局有他的優(yōu)點(diǎn)和缺點(diǎn)，左對(duì)齊也是一種比較常規(guī)的對(duì)齊方式，信息靠左，行動(dòng)靠右。居中對(duì)齊讓信息更聚焦更有歸屬感但占用篇幅過(guò)高，功能擴(kuò)展性較弱。右對(duì)齊弱化頭像但比較新穎，缺點(diǎn)依舊是功能擴(kuò)展性不高。那我們先選擇左對(duì)齊來(lái)講一講信息布局中的細(xì)節(jié)。
5. 軟柵格
在使用方面比硬柵格更加靈活，可擴(kuò)展性更強(qiáng)，很多產(chǎn)品會(huì)提到柵格這個(gè)概念，但是移動(dòng)端畢竟不是web，頁(yè)面篇幅大，使用硬柵格確實(shí)會(huì)讓頁(yè)面更加美觀(guān)有規(guī)律。但是移動(dòng)端使用硬柵格，個(gè)人覺(jué)得性?xún)r(jià)比不高，應(yīng)為單個(gè)頁(yè)面承載的內(nèi)容量少了很多，并且硬柵格在這里并沒(méi)有什么優(yōu)勢(shì)，反而會(huì)造成千篇一律的東西出來(lái)。
所以我建議大家使用軟柵格就可以，但是軟柵格也沒(méi)那么簡(jiǎn)單，我們先來(lái)看一下airbnb和得到兩個(gè)產(chǎn)品，他們使用軟柵格的規(guī)律，airbnb使用了6位基礎(chǔ)倍數(shù)進(jìn)行布局，得到使用了5。這里我是以1倍圖的尺寸進(jìn)行了測(cè)量。
什么是軟柵格呢，就是以一個(gè)固定的基礎(chǔ)倍數(shù)進(jìn)行信息間隔排版的策略。通常我們都會(huì)使用這個(gè)基礎(chǔ)數(shù)的倍數(shù)進(jìn)行設(shè)計(jì)，如果是1倍圖，我們通常會(huì)使用2、3、4、5、6等，有同學(xué)會(huì)問(wèn)，為什么這里可以用奇數(shù)？在1倍圖中用奇數(shù)沒(méi)什么大問(wèn)題，并且我們的目的是讓頁(yè)面呈現(xiàn)規(guī)律、能夠讓頁(yè)面的信息完美的呈現(xiàn)，所以是否是奇數(shù)并沒(méi)有什么影響。
軟柵格也需要講究倍數(shù)的規(guī)律使用，如果你選擇了2、3這樣的偏小的數(shù)值，那么要注意的是盡量不要讓倍數(shù)的種類(lèi)過(guò)多，比如2、4、6、8…18、20、22這樣就太多了，頁(yè)面也就會(huì)沒(méi)有什么規(guī)律，比較碎。所以你看到像上面兩個(gè)產(chǎn)品他們的間距數(shù)量并不是很多。如果有需要我們可以加入一些特殊的間距，但這些都需要在庫(kù)中進(jìn)行記錄。
四、如何設(shè)計(jì)信息架構(gòu)
這是本篇文章最想和大家聊的內(nèi)容，因?yàn)樘剿鬟@些問(wèn)題實(shí)在太有趣了，設(shè)計(jì)師最大的成就感就是你設(shè)計(jì)的產(chǎn)品被用戶(hù)使用，并且收到了非常多的正面反饋以及對(duì)業(yè)務(wù)的提升，特別是一個(gè)好的功能、好的流程、好的信息架構(gòu)能夠給用戶(hù)帶來(lái)絲滑般的自然感受。接下來(lái)我們就來(lái)聊一聊
1. 信息架構(gòu)是什么
簡(jiǎn)單講就是信息、功能的分類(lèi)和導(dǎo)航。如果你想去圖書(shū)館找一本《三國(guó)演義》你會(huì)怎么去找？
當(dāng)你已進(jìn)入圖書(shū)館后首先會(huì)在書(shū)架上找各種圖書(shū)的分類(lèi)，設(shè)計(jì)類(lèi)、語(yǔ)言類(lèi)、文學(xué)類(lèi)、科學(xué)類(lèi)、國(guó)內(nèi)名著、國(guó)外小說(shuō)……當(dāng)你找到國(guó)內(nèi)小說(shuō)，然后你再來(lái)看你要找的書(shū)是屬于古代、近代、現(xiàn)代還是當(dāng)代？當(dāng)然你還有另外一種找法，那就是直接問(wèn)店內(nèi)工作人員，相當(dāng)于搜索。
好的信息架構(gòu)能夠讓用戶(hù)快速找到自己想要找的內(nèi)容和功能，進(jìn)入首頁(yè)后就明白這個(gè)產(chǎn)品的用途和關(guān)鍵信息，所以一個(gè)好的信息架構(gòu)重要性就不言而喻了。
2. 用戶(hù)心智
在做信息架構(gòu)之前我們必須了解用戶(hù)心智。比如購(gòu)物車(chē)這個(gè)概念，它是一個(gè)用來(lái)裝商品的容器，所以在做交互設(shè)計(jì)的時(shí)候要記住，商品是“放進(jìn)去”和“拿出來(lái)”的，再比如消息盒子，消息是用來(lái)接收的，是一種通知類(lèi)似于收到一封信、一句話(huà)。一首歌曲的播放可以是磁帶的轉(zhuǎn)動(dòng)或者停止、可以是唱針的放下和抬起，所以系統(tǒng)要根據(jù)不同的功能特性和人的預(yù)期進(jìn)行實(shí)現(xiàn)設(shè)計(jì)。
接下來(lái)我們先看看一個(gè)信息架構(gòu)做的不太好的案例，第一個(gè)：轉(zhuǎn)轉(zhuǎn)（之前版本的，現(xiàn)在好了），從下方的圖中大家覺(jué)得左邊的漢堡按鈕點(diǎn)擊之后會(huì)發(fā)生什么，在我們的認(rèn)知中這是一個(gè)漢堡導(dǎo)航的按鈕，那么點(diǎn)擊時(shí)候左側(cè)應(yīng)該會(huì)滑出一個(gè)抽屜的模塊，承載著一些功能。
但其實(shí)當(dāng)我們點(diǎn)擊后卻是一個(gè)頁(yè)面的跳轉(zhuǎn)，然后到了商品分類(lèi)的界面，但是你又會(huì)發(fā)現(xiàn)這個(gè)功能底部tab已經(jīng)有了，優(yōu)先級(jí)非常高，那么這里的功能入口其實(shí)真的沒(méi)什么必要，而且還用錯(cuò)了，現(xiàn)在版本是改了。
這雖然是一個(gè)小問(wèn)題，但是我們也發(fā)現(xiàn)了當(dāng)你的設(shè)計(jì)與用戶(hù)的預(yù)期、習(xí)慣不一致后用戶(hù)會(huì)產(chǎn)生疑惑，一旦程度嚴(yán)重、次數(shù)多了就會(huì)讓用戶(hù)的滿(mǎn)意度大幅下降。
再來(lái)看另一個(gè)產(chǎn)品-想去，其實(shí)這個(gè)產(chǎn)品的定位非常好，是一個(gè)賣(mài)設(shè)計(jì)師自己設(shè)計(jì)的品牌物件的平臺(tái)，包包、服裝之類(lèi)。如果做的好，這個(gè)產(chǎn)品的格調(diào)是很不錯(cuò)的，只可惜了他的信息架構(gòu)猶如….我們來(lái)具體看看吧。
首先映入眼簾的是他的首頁(yè)，首頁(yè)是一個(gè)大大的專(zhuān)題圖片。我們剛才說(shuō)了，好的信息架構(gòu)能夠讓你一進(jìn)去就知道這個(gè)產(chǎn)品是干什么的，但是目前來(lái)看好像有點(diǎn)失敗。首頁(yè)放一個(gè)大專(zhuān)題圖真的暴殄天物了。
再來(lái)看底部的標(biāo)簽分類(lèi)，設(shè)計(jì)師和逛兩個(gè)維度我們都可以理解，在沒(méi)有看之前我猜測(cè)設(shè)計(jì)師板塊的內(nèi)容應(yīng)該是不同風(fēng)格設(shè)計(jì)師的分類(lèi)或者一些大流量大ip品牌的推薦，逛的板塊類(lèi)似于發(fā)現(xiàn)，有很多用戶(hù)曬買(mǎi)到的物品或者是設(shè)計(jì)師設(shè)計(jì)該物件的一些ugc、pgc的內(nèi)容，這樣一個(gè)社區(qū)、一個(gè)平臺(tái)也算可以盤(pán)活起來(lái)了，但是讓我驚訝的發(fā)現(xiàn)他們好像并沒(méi)有這么做在設(shè)計(jì)師板塊是各種設(shè)計(jì)品的分類(lèi)，點(diǎn)進(jìn)去之后才是各個(gè)設(shè)計(jì)品牌的創(chuàng)始人介紹，問(wèn)題又來(lái)了。
站在用戶(hù)的角度，決定我是否去下單購(gòu)買(mǎi)因素有商品的美觀(guān)度、質(zhì)量的好壞、創(chuàng)作的過(guò)程、設(shè)計(jì)師水平等，但是在這個(gè)分類(lèi)下我只看到了設(shè)計(jì)師的頭像和簡(jiǎn)單的風(fēng)格描述，這讓用戶(hù)如何去選擇他想要購(gòu)買(mǎi)的商品呢？
我再忍一忍，繼續(xù)點(diǎn)進(jìn)去，發(fā)現(xiàn)依舊還是沒(méi)有讓我看到具體的商品，這對(duì)于用戶(hù)來(lái)說(shuō)打擊實(shí)在太大了，依舊是設(shè)計(jì)師的描述，往下拉之后再看，還是沒(méi)有相關(guān)的商品，只有一些圖片，那些圖片我不知道是否可點(diǎn)，點(diǎn)擊之后才發(fā)現(xiàn)原來(lái)商品藏的那么深，好吧，原來(lái)這些設(shè)計(jì)師的設(shè)計(jì)作品賣(mài)不出去是有原因的。
切換到逛的界面，是一個(gè)類(lèi)似首頁(yè)的內(nèi)容，這才有點(diǎn)像首頁(yè)不是嗎？
所以為什么老年人對(duì)觸屏智能手機(jī)接受率低，就是因?yàn)樗麄兞?xí)慣了按鍵式的，并且老年人的習(xí)慣與認(rèn)知沒(méi)有年輕人轉(zhuǎn)變的那么快。我們需要了解用戶(hù)，洞悉用戶(hù)心智，我們才能設(shè)計(jì)出符合用戶(hù)預(yù)期的產(chǎn)品來(lái)。
3. 常用的卡片分類(lèi)法
分為封閉式卡片分類(lèi)與開(kāi)放式卡片分類(lèi)。
封閉式卡片分類(lèi)這樣的分類(lèi)都是基于業(yè)務(wù)和戰(zhàn)略層面的從上至下的做法，有預(yù)先定義好的分類(lèi)標(biāo)簽，用戶(hù)只需要把卡片上的信息歸類(lèi)到這些分類(lèi)下即可，這樣我們就可以知道用戶(hù)是如何進(jìn)行信息分類(lèi)的，這樣對(duì)照我們目前的信息分類(lèi)可以進(jìn)行對(duì)比。缺點(diǎn)是分類(lèi)已固定，無(wú)法探索更加自由的用戶(hù)心智。
開(kāi)放式卡片分類(lèi)屬于從下至上的方法，只提供信息和功能讓用戶(hù)自己進(jìn)行分類(lèi)并且對(duì)類(lèi)目進(jìn)行命名。這樣就可以更好的探索用戶(hù)是如何進(jìn)行自由分類(lèi)了，但是這樣做的缺點(diǎn)也比較大，耗費(fèi)的時(shí)間和精力會(huì)很多，用戶(hù)對(duì)這些功能以及目的不同，分類(lèi)的方法也不同。
無(wú)論是開(kāi)放還是封閉，都需要注意的是在用戶(hù)進(jìn)行分類(lèi)過(guò)程中觀(guān)察用戶(hù)對(duì)哪些信息的不確定和疑惑要及時(shí)記錄下來(lái)，可以先放置在邊上稍后再分。最好可以一邊分類(lèi)一邊問(wèn)用戶(hù)這樣分類(lèi)的原因，因?yàn)闀r(shí)間久了用戶(hù)很容易忘記當(dāng)初為什么這樣分類(lèi)。特別是在開(kāi)放分類(lèi)的時(shí)候我們一定不能直接使用用戶(hù)的分類(lèi)去直接使用在產(chǎn)品中。
大家發(fā)現(xiàn)無(wú)論是開(kāi)放還是封閉都有一定的局限性，所以我們?cè)趯?shí)際的使用過(guò)程中會(huì)講兩者結(jié)合去做，分兩組用戶(hù)去進(jìn)行分類(lèi)，這樣得到的結(jié)果也可以互相驗(yàn)證，結(jié)合我們自己的假設(shè)，讓設(shè)計(jì)模型更加接近用戶(hù)的心智模型。
4. 信息架構(gòu)的類(lèi)型
大家在做信息架構(gòu)的時(shí)候也有很多問(wèn)題，比如各個(gè)分類(lèi)是否都是獨(dú)立的系統(tǒng)，怎樣進(jìn)行層級(jí)的劃分，劃分層級(jí)的節(jié)點(diǎn)是什么是一個(gè)字段還是一個(gè)頁(yè)面？新增的功能是否可以整合在原有的信息架構(gòu)中還是要單獨(dú)拿出來(lái)？
首先我們來(lái)講她的幾種類(lèi)型：
（1）樹(shù)狀結(jié)構(gòu)
這是一種很常見(jiàn)的結(jié)構(gòu)，每個(gè)節(jié)點(diǎn)都是存在父子級(jí)的關(guān)系，比如云集，底部分成了5個(gè)分類(lèi)每個(gè)大分類(lèi)，分別是特賣(mài)、超市、發(fā)現(xiàn)、商城和我的，每一個(gè)分類(lèi)下是該分類(lèi)承載的諸多相關(guān)的功能和信息，我們先記錄為a、a-1、a-1-1這樣進(jìn)行說(shuō)明，比如首頁(yè)a有很多的功能，比如a-分類(lèi)、a-特買(mǎi)、a-品牌團(tuán)，a-分類(lèi)下又有a-分類(lèi)-推薦、a-分類(lèi)-服飾內(nèi)衣等等。
那么父級(jí)下的子級(jí)內(nèi)容一定是與父級(jí)強(qiáng)相關(guān)的，這樣用戶(hù)也更容易理解，淘寶首頁(yè)都是各種產(chǎn)品線(xiàn)的入口、商品的品類(lèi)、活動(dòng)的入口還有智能化推薦，微淘也是根據(jù)智能化推薦的用戶(hù)曬單內(nèi)容等等，所以信息架構(gòu)大到整一個(gè)產(chǎn)品的大分類(lèi)，小到一個(gè)頁(yè)面的信息關(guān)聯(lián)。
再舉個(gè)例子，添加收貨地址，這就是一個(gè)很典型的樹(shù)狀結(jié)構(gòu)，每一個(gè)節(jié)點(diǎn)都是獨(dú)立的，互不影響，用戶(hù)非常清楚這個(gè)結(jié)構(gòu)所要表達(dá)的意思。只是相比產(chǎn)品首頁(yè)的大分類(lèi)，這個(gè)更加微觀(guān)一些。
（2）矩陣結(jié)構(gòu)
這種結(jié)構(gòu)也稱(chēng)之為并行結(jié)構(gòu)，什么意思呢，就是雖然我有進(jìn)行了大的分類(lèi)，但是用戶(hù)依然可以在不同的分類(lèi)流程中進(jìn)行跳轉(zhuǎn)，一些節(jié)點(diǎn)甚至是公用的，比如搜索功能，再比如考拉的會(huì)員出現(xiàn)在首頁(yè)、我的以及下單等其他流程或者頁(yè)面中，一個(gè)原因是處于業(yè)務(wù)訴求而呈現(xiàn)的高頻率內(nèi)容，另一個(gè)是不同用戶(hù)需求。上面說(shuō)了添加收貨地址是樹(shù)狀結(jié)構(gòu)，每一個(gè)節(jié)點(diǎn)都是獨(dú)立的，所以他們之間并不能互相流轉(zhuǎn)。
（3）自由結(jié)構(gòu)
這種結(jié)構(gòu)屬于無(wú)規(guī)律的自然結(jié)構(gòu)，這樣的結(jié)構(gòu)鼓勵(lì)用戶(hù)去探索，更加沉浸式，用在娛樂(lè)化的產(chǎn)品中較多。比如抖音，b站等等，他們的內(nèi)容是智能化推薦，他的核心內(nèi)容從屬結(jié)構(gòu)并沒(méi)有那么明顯，比如一個(gè)視頻的節(jié)點(diǎn)非常多，而這些節(jié)點(diǎn)并非是父子關(guān)系，每個(gè)節(jié)點(diǎn)可以是一個(gè)新的板塊。但是這樣的結(jié)構(gòu)也需要有一定的控制，比如加入用戶(hù)體系，關(guān)注、收藏等功能，否則用戶(hù)就很難再次找到相同類(lèi)似的內(nèi)容了。
（4）線(xiàn)性結(jié)構(gòu)
這種結(jié)構(gòu)用的不多，一般用戶(hù)3個(gè)或3個(gè)以下的簡(jiǎn)單并且獨(dú)立的場(chǎng)景，比如keep的忘記密碼，每一個(gè)步驟都是一個(gè)獨(dú)立的點(diǎn)，并且有遞進(jìn)和條件關(guān)系，這樣當(dāng)然讓用戶(hù)更聚焦，而且在這里只能用線(xiàn)性結(jié)構(gòu)去完成。
所以如果需要用戶(hù)多個(gè)步驟填寫(xiě)表單或者完成任務(wù)的話(huà)，那么就一定需要結(jié)合其他的結(jié)構(gòu)一起來(lái)，比如二手電子產(chǎn)品的估價(jià)表單，頁(yè)面頂部是步驟條，下方是已經(jīng)選擇過(guò)的選項(xiàng)，再下方是正在選擇的選項(xiàng)。如果類(lèi)似這樣的功能做成線(xiàn)性的，那一定會(huì)出現(xiàn)很多問(wèn)題，比如之前的信息填寫(xiě)錯(cuò)了、想換一個(gè)信息填寫(xiě)，那么必須一步一步退回，所以在這里線(xiàn)性結(jié)構(gòu)就不適用了，而且他也并沒(méi)有遞進(jìn)和條件的關(guān)系在里面。
根據(jù)不同的產(chǎn)品調(diào)性和用戶(hù)需求我們會(huì)進(jìn)行不同的架構(gòu)和布局，比如我們來(lái)看消息盒子，為什么都是消息盒子卻長(zhǎng)的那么不一樣呢，因?yàn)榈鶍專(zhuān)I(yè)務(wù)與用戶(hù)）的原因，那基因肯定就不同了，所以大家發(fā)現(xiàn)這幾個(gè)產(chǎn)品有的是頂部進(jìn)行橫向不可滑動(dòng)的分類(lèi)，下方是實(shí)時(shí)消息列表，有的是一級(jí)頁(yè)面都是分類(lèi)，還有的是頂部橫向tab導(dǎo)航分類(lèi)。
原因就在于這些功能的面對(duì)用戶(hù)、自身功能以及業(yè)務(wù)訴求的不同，比如抖音它上面將消息分為了與用戶(hù)強(qiáng)相關(guān)的4個(gè)類(lèi)目，并且把私信和系統(tǒng)消息作為一級(jí)優(yōu)先級(jí)展示，所以這個(gè)社交屬性是很強(qiáng)，如果他把實(shí)時(shí)留言給收起來(lái)那么用戶(hù)之間的聯(lián)系就會(huì)弱化很多，那么產(chǎn)品定位也是一部分原因。
像電商產(chǎn)品，消息最多的無(wú)非是活動(dòng)、物流、店鋪推送等，這些東西用戶(hù)不是需要第一時(shí)間關(guān)注的，也就沒(méi)有必要在第一優(yōu)先級(jí)放出來(lái)。一般橫向的導(dǎo)航組件擴(kuò)展性比較弱、會(huì)有逐級(jí)遞減的效果明顯，但是感知優(yōu)先級(jí)比總想的高，縱向的擴(kuò)展性更強(qiáng)。
5. 導(dǎo)航
這邊就不再贅述導(dǎo)航了，簡(jiǎn)單的給大家看一張圖：
6. 用戶(hù)場(chǎng)景
一個(gè)好的信息架構(gòu)除了上述說(shuō)的內(nèi)容原則外，最重要的一點(diǎn)就是用戶(hù)場(chǎng)景，脫離用戶(hù)場(chǎng)景的信息架構(gòu)基本就是無(wú)藥可救。通常我們?cè)谧鲂枨笤O(shè)計(jì)時(shí)，需要將用戶(hù)場(chǎng)景窮舉出來(lái)，也就是把所有用戶(hù)場(chǎng)景的可能性都列舉，用戶(hù)場(chǎng)景怎么來(lái)？訪(fǎng)談、問(wèn)卷、體驗(yàn)地圖、個(gè)人經(jīng)驗(yàn)判斷等等都可以挖掘。比如我們來(lái)看一下電商產(chǎn)品的詳情，大家可以腦暴一下，用戶(hù)進(jìn)入詳情頁(yè)他想要干什么？也就是他的“作案”動(dòng)機(jī)是什么？
無(wú)數(shù)的用戶(hù)場(chǎng)景都會(huì)存在于用戶(hù)的使用過(guò)程中，所以有時(shí)候?yàn)槭裁串a(chǎn)品的需求有問(wèn)題可能就是因?yàn)橛脩?hù)場(chǎng)景考慮不全，比如我們做一個(gè)提現(xiàn)的功能，并不是僅僅幫助用戶(hù)把錢(qián)提出來(lái)就可以了，用戶(hù)想要知道余額、提現(xiàn)到哪里、是否有手續(xù)費(fèi)、提現(xiàn)周期是多久、提現(xiàn)金額的是否有限制，如果選擇提現(xiàn)銀行卡是否支持綁定新卡等等，所以用戶(hù)場(chǎng)景在架構(gòu)和流程設(shè)計(jì)中是非常重要的。這期先寫(xiě)一點(diǎn)點(diǎn)，下期詳細(xì)寫(xiě)。
五、設(shè)計(jì)師如何突破瓶頸期
總的來(lái)說(shuō)瓶頸就是目前的工作重復(fù)性、熟悉度都太高，沒(méi)有提升的方向感而產(chǎn)生的焦慮。這點(diǎn)我覺(jué)得大部分設(shè)計(jì)師可能都不是真的碰到了瓶頸，只是環(huán)境沒(méi)有對(duì)你高要求，所以你對(duì)自己也沒(méi)有高要求，但這往往都是坐井觀(guān)天而已。有同學(xué)也確實(shí)來(lái)問(wèn)我過(guò)這個(gè)問(wèn)題，他做了5年UI，過(guò)來(lái)咨詢(xún)目前UI設(shè)計(jì)師是否需要會(huì)交互、體驗(yàn)等技能，自己遇到了瓶頸，是不是該學(xué)習(xí)突破下。
我讓他發(fā)了一些UI界面的作品，但是發(fā)現(xiàn)他UI的設(shè)計(jì)水平依然停留在幾年前，這期間他換過(guò)一次工作，但是是國(guó)企性質(zhì)的企業(yè)（大家都懂）。所以在一個(gè)對(duì)設(shè)計(jì)只要能滿(mǎn)足領(lǐng)導(dǎo)的要求這樣一個(gè)環(huán)境下，如果對(duì)自己沒(méi)有自律的要求下，很容易掉進(jìn)去。所以不要說(shuō)你遇到瓶頸了，先評(píng)估一下自己最基本的能力是不是達(dá)到市面上高級(jí)設(shè)計(jì)師的標(biāo)準(zhǔn)要求了，如果連圖標(biāo)還沒(méi)有畫(huà)統(tǒng)一，就先不要思考要多學(xué)其他的技能了。
也有同學(xué)會(huì)問(wèn)，那我UI設(shè)計(jì)基礎(chǔ)弱我是不是可以直接轉(zhuǎn)交互。講道理，大家做這行其實(shí)更應(yīng)該先學(xué)交互，再學(xué)視覺(jué)，只是在前兩年UI的門(mén)檻低大家都來(lái)學(xué)，而且交互又有產(chǎn)品經(jīng)理包了，所以都接觸不到交互，但如果你現(xiàn)在0基礎(chǔ)要做這行，就一定要先以體驗(yàn)設(shè)計(jì)、交互思維為基礎(chǔ)來(lái)學(xué)。
那么接下去我也給大家分享一下我個(gè)人突破瓶頸的一些經(jīng)驗(yàn)，其實(shí)我覺(jué)得瓶頸一直在，而且越學(xué)發(fā)現(xiàn)越多，哎，人的一生其實(shí)都在不斷的突破。
1. 技術(shù)和習(xí)慣的突破
首先是質(zhì)量，如何提高你的設(shè)計(jì)輸出的質(zhì)量呢？我們先從兩個(gè)原因來(lái)講：一個(gè)是看，一個(gè)是做。
那現(xiàn)在很多人大致分為兩類(lèi)：
第一類(lèi)就是每天各種設(shè)計(jì)網(wǎng)站逛，一天好幾個(gè)小時(shí)在里面看，然后就誤以為自己吸收了很多的設(shè)計(jì)靈感和技巧，眼：我學(xué)會(huì)了，手：我沒(méi)有。
第二種是，每天都在練習(xí)，嘗試原創(chuàng)，但是1年過(guò)去了頁(yè)面依然不盡人意，原因是自己的審美還是停留在1年之前，不提升自己的審美，自己設(shè)計(jì)出來(lái)的東西肯定上限也不高?？春妥鍪遣荒芊珠_(kāi)的，那要怎么結(jié)合呢？
（1）做：拆解、局部攻破
如果你想設(shè)計(jì)界面，那么這幾點(diǎn)你可以一一攻破，比如如何讓圖標(biāo)繪制的美觀(guān)、統(tǒng)一、表意清晰，再?lài)L試融入品牌基因。比如界面布局，先嘗試圖片文字較少的信息布局進(jìn)行練習(xí)，上圖下文，左圖右文等等各種形式的布局，嘗試使用軟柵格，再到更復(fù)雜的信息布局，然后再?lài)L試不同的配色和一些細(xì)節(jié)。
在進(jìn)行界面設(shè)計(jì)的時(shí)候，多提出自己的質(zhì)疑，為什么要使用這個(gè)間距、配色、布局，信息除了這樣的擺放位置是否還有其他可能，元素設(shè)計(jì)的樣式還有沒(méi)有其他樣式等等。
需要練習(xí)到什么程度呢？
自己能夠在沒(méi)有參考的情況下，設(shè)計(jì)出3種完全不同風(fēng)格的界面我覺(jué)得就可以了，3套界面作品可以連續(xù)拿3個(gè)站酷編輯基本上你的UI能力第一階段目標(biāo)也就達(dá)到了。畢竟我們不是要花一年的時(shí)間去做這件事，這3套界面盡可能的在1個(gè)月左右完成。
（2）看：學(xué)會(huì)靈感收集與提煉
首先靈感和素材收集方式有很多種，譬如站酷收藏夾、某瓣、eagle等等。如果你們平時(shí)習(xí)慣好的話(huà)盡量在收集的時(shí)候?qū)⒅黝}、顏色、類(lèi)型、風(fēng)格都進(jìn)行標(biāo)簽化分類(lèi)，這樣找的時(shí)候會(huì)更加方便。最好進(jìn)行本地化保存這樣如果網(wǎng)站崩了不至于設(shè)計(jì)level下降2個(gè)級(jí)別。
當(dāng)然，光收集肯定是沒(méi)用的，給大家一個(gè)建議就是提煉共類(lèi)去記憶一些關(guān)鍵點(diǎn)，比如構(gòu)圖、一些排版的技巧，先少量記憶幾個(gè)，通過(guò)練習(xí)去強(qiáng)化，再去使用其他的設(shè)計(jì)手法。界面設(shè)計(jì)也是一個(gè)道理，先把為什么這么做搞清楚，做什么就很簡(jiǎn)單了。
其次是效率，也就是工具和流程的合理使用。為什么有些人提交一張界面或者畫(huà)一個(gè)小插畫(huà)需要一天的時(shí)間，有些人只要幾個(gè)小時(shí)，畫(huà)的快不一定畫(huà)的好，但是現(xiàn)在的需求那么多如果不提升效率，畫(huà)好也沒(méi)用。工具并沒(méi)有好壞但是有是否合適，比如你的同事都是用sketch做圖，而你卻用xd（單獨(dú)拿出來(lái)說(shuō)也是一個(gè)好工具）、用ps，先不說(shuō)這些是否能高效出圖，同事間的協(xié)作效率就會(huì)大大降低。
2. 思維和心態(tài)的突破
技術(shù)是0，思維是1，缺1不可。比如你開(kāi)一家水果店，你有很好的進(jìn)貨渠道、有很大的流量門(mén)面、你對(duì)成本利潤(rùn)、耗損都控制的很好，但是你不會(huì)運(yùn)營(yíng)，你不知道小區(qū)周?chē)闹饕脩?hù)是學(xué)生還是大伯大媽還是普通工人，你不知道四周其他水果店的運(yùn)作方法，你也不知道如何將水果店做大，所以你能夠賺錢(qián)但一定是有限的。
思維不僅僅局限于我們的設(shè)計(jì)工作，上次文章我們說(shuō)到了產(chǎn)品思維（產(chǎn)品價(jià)值、用戶(hù)價(jià)值）、用戶(hù)思維（用戶(hù)是誰(shuí)、用戶(hù)在哪里、用戶(hù)在干什么、怎么研究用戶(hù)），思維和眼界也會(huì)影響我們整個(gè)職業(yè)生涯。
不知道大家平時(shí)是如何看待自己成長(zhǎng)，比如我問(wèn)幾個(gè)問(wèn)題，當(dāng)你的項(xiàng)目需要推進(jìn)但是其他同事推諉推進(jìn)不下去了怎么辦？當(dāng)你很忙但是領(lǐng)導(dǎo)交給了你一個(gè)從未接觸過(guò)的任務(wù)怎么辦？如果本身不是你的工作卻落到了你的頭上怎么辦？如果幾年后設(shè)計(jì)崗位很少了怎么辦？這些靈魂的拷問(wèn)不知道大家是如何思考的。
先說(shuō)兩個(gè)要點(diǎn)：
●企業(yè)名稱(chēng)：甘肅有眾信息科技有限公司
●客戶(hù)經(jīng)理：師經(jīng)理
●聯(lián)系電話(huà)：18919819927
●公司座機(jī)：0931-4632419
●聯(lián)系郵件：kefu@gsyzkj.com
●聯(lián)系地址：甘肅省蘭州市城關(guān)區(qū)定西路八冶大廈C2205（商務(wù)廳對(duì)面，甘肅銀行樓上，院內(nèi)左手電梯）
●公司官網(wǎng)：http://www.gsyzkj.com
●小程序官網(wǎng)：http://www.gsyzkj.cn
▍業(yè)務(wù)范圍
甘肅有眾信息科技有限公司， 擁有11年互聯(lián)網(wǎng)行業(yè)的專(zhuān)研和沉淀，團(tuán)隊(duì)主要致力于企業(yè)網(wǎng)站、行業(yè)信息門(mén)戶(hù)及應(yīng)用軟件的建設(shè)與服務(wù)。經(jīng)過(guò)近年的運(yùn)作目前有眾科技已經(jīng)擁有了一支開(kāi)拓進(jìn)取，技術(shù)齊備的開(kāi)發(fā)和管理團(tuán)隊(duì)，包括項(xiàng)目策劃、UI設(shè)計(jì)、前端交互、系統(tǒng)編程等，建立了完善的開(kāi)發(fā)服務(wù)體系。我們始終以客戶(hù)需求為發(fā)展方向，以客戶(hù)滿(mǎn)意為最終目標(biāo)，一如既往地為客戶(hù)提供及時(shí)周到的技術(shù)支持服務(wù)。
