首頁

成為UI / UX設(shè)計(jì)師所需的7個(gè)步驟

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

現(xiàn)在讓我們關(guān)注最常見的設(shè)計(jì)專業(yè):UI/UX設(shè)計(jì)師。

一、熟悉UI原則

在進(jìn)行設(shè)計(jì)練習(xí)之前,你需要做的第一件事就是學(xué)習(xí)一些設(shè)計(jì)原則。這樣你才能夠進(jìn)入設(shè)計(jì)世界,并開始進(jìn)行“創(chuàng)造性”的思考。你會(huì)學(xué)到心理學(xué)對(duì)設(shè)計(jì)方案的影響,例如:為什么它看起來不錯(cuò),為什么會(huì)失敗。

下面是你應(yīng)該了解的一些設(shè)計(jì)基本原則。

1、顏色

色彩詞匯,色彩基礎(chǔ)和色彩心理學(xué)。

設(shè)計(jì)原則:色彩

2、平衡

對(duì)稱性和不對(duì)稱性。

設(shè)計(jì)原則:平衡

3、對(duì)比

使用對(duì)比來組織信息,構(gòu)建層次結(jié)構(gòu)和創(chuàng)建焦點(diǎn)。

設(shè)計(jì)原則:對(duì)比

4、 排版

選擇字體和在網(wǎng)絡(luò)上創(chuàng)建可讀的文本。

易讀性的10個(gè)原則與網(wǎng)頁排版

5、一致性

最重要的原則,創(chuàng)造直觀和實(shí)用的設(shè)計(jì)。

設(shè)計(jì)原則:一致性

下面是設(shè)計(jì)好的界面一些好的方法和需要注意的事項(xiàng)。

二、了解創(chuàng)意用戶體驗(yàn)流程

接下來要了解創(chuàng)作過程,UI / UX設(shè)計(jì)是設(shè)計(jì)都要經(jīng)歷的特定階段。它分為四個(gè)不同的階段,發(fā)現(xiàn)、定義、開發(fā)和交付。


創(chuàng)作過程

發(fā)現(xiàn)

在項(xiàng)目的最開始,設(shè)計(jì)師會(huì)開始研究,獲取靈感并收集想法。

定義

在定義階段,設(shè)計(jì)人員定義從發(fā)現(xiàn)階段提取的想法。由此創(chuàng)建了一個(gè)清晰的創(chuàng)意設(shè)計(jì)方案。

開發(fā)

在這里創(chuàng)建原型,測(cè)試和迭代解決方案或概念的地方。這種反復(fù)試驗(yàn)過程有助于設(shè)計(jì)師改進(jìn)和完善他們的想法。

交付

最后交付階段,項(xiàng)目會(huì)最終確定并且投入使用。

三、培養(yǎng)你的設(shè)計(jì)視野

了解設(shè)計(jì)原則雖然有很大的幫助,但這是遠(yuǎn)遠(yuǎn)不夠的,還需要培養(yǎng)你的視野,知道什么是好的設(shè)計(jì)和壞的設(shè)計(jì),并且能找到設(shè)計(jì)方案的優(yōu)缺點(diǎn)。

在打開一張空白的畫布并盯著它看半個(gè)小時(shí)之前,你明白創(chuàng)新的唯一方法是通過研究。培養(yǎng)你的設(shè)計(jì)視野的最有效方式是通過看更多的設(shè)計(jì)方案來尋找靈感。尤其當(dāng)你是初學(xué)者的時(shí)候,有時(shí)候無法自己打開腦洞,這時(shí)候你必須先看看其他人的設(shè)計(jì)。

瀏覽靈感類網(wǎng)站

所以看看其他設(shè)計(jì)師在Dribbble上做了什么,每當(dāng)你遇到漂亮的設(shè)計(jì)或與你的項(xiàng)目相關(guān)的東西時(shí),將它保存在筆記中并能說出你為什么喜歡,你也可以截屏保存。通過這種方式,你將擁有一個(gè)豐富的設(shè)計(jì)素材庫,設(shè)計(jì)之路由此展開。

四、每天閱讀設(shè)計(jì)文章

為了讓自己盡快的熟悉設(shè)計(jì),最好的方法是每天閱讀一些文章。讓閱讀設(shè)計(jì)新聞和博客成為日常習(xí)慣。我們有數(shù)百萬篇在線文章可供我們了解新趨勢(shì),設(shè)計(jì)方法和教程。我們所要做的就是找到它們,沒有比從其他人總結(jié)的經(jīng)驗(yàn)中學(xué)習(xí)更好的了。

讓閱讀文章成為日常習(xí)慣

在早上學(xué)習(xí)新事物會(huì)擴(kuò)充你的腦洞,并為白天創(chuàng)造騰出更多的空間。因此你早上可以在Medium或Smashing Magazine看一些優(yōu)秀的設(shè)計(jì)文章,開始新的一天。

另外要注意勞逸結(jié)合,不時(shí)地休息一下,閱讀更多設(shè)計(jì)內(nèi)容。特別是當(dāng)你陷入困境并感到?jīng)]有想法的時(shí)候,更有停下來休息,休息對(duì)于創(chuàng)造力非常重要。你可以將您喜歡的網(wǎng)站收藏為書簽或訂閱設(shè)計(jì)博客。

五、設(shè)計(jì)概念項(xiàng)目

實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn),并且我們清楚的知道,沒有設(shè)計(jì)經(jīng)驗(yàn)我們就無法獲得客戶/工作。但如果沒有客戶/工作我們就沒有辦法加強(qiáng)設(shè)計(jì)技能。所以我們可以通過自己的實(shí)踐來打破這個(gè)循環(huán),進(jìn)行概念項(xiàng)目設(shè)計(jì)以獲得樂趣以及成長(zhǎng)!Dribbble上有很多的概念設(shè)計(jì),他們都做的很棒。

Facebook Material Design by Kevin McCarthy

你可以花點(diǎn)時(shí)間選擇你感興趣的網(wǎng)站或App并重新設(shè)計(jì)它。你可以完全賦予它新的創(chuàng)意和意義,并且由此你將形成你的設(shè)計(jì)風(fēng)格和作品,獲得快速的成長(zhǎng)。

六、了解的設(shè)計(jì)工具

我們有很多的設(shè)計(jì)工具,但你不需要都了解。你只需要選擇你喜歡的并且適合你的工具即可,并隨時(shí)了解的功能和趨勢(shì),以下是我在設(shè)計(jì)過程中使用的工具:

界面設(shè)計(jì):Sketch

用于協(xié)作界面設(shè)計(jì):Figma

用于低保真線框圖:Axure

用于界面設(shè)計(jì)和原型設(shè)計(jì): Adobe XD

可交互動(dòng)態(tài)原型:Principle、Flinto

用于原型設(shè)計(jì)和協(xié)作:Invision App

七、尋找導(dǎo)師并且得到幫助

學(xué)習(xí)設(shè)計(jì)的另一個(gè)好方法是找到愿意提供幫助的設(shè)計(jì)導(dǎo)師或設(shè)計(jì)師朋友。他們將幫助您加快學(xué)習(xí)進(jìn)程,導(dǎo)師或者設(shè)計(jì)師朋友會(huì)對(duì)你的設(shè)計(jì)方案會(huì)盡可能地發(fā)表意見。這就像一條捷徑,他們還會(huì)分享他們的經(jīng)驗(yàn)和方法論以及設(shè)計(jì)技巧。因此請(qǐng)向有經(jīng)驗(yàn)的設(shè)計(jì)師或者導(dǎo)師提出問題并討論您的疑問。

另外在我教授設(shè)計(jì)和前端的幾年時(shí)間里,我學(xué)到的東西比我教的要多很多。所以當(dāng)你準(zhǔn)備好如何與人們討論設(shè)計(jì)時(shí),你可以指導(dǎo)或教育某人有關(guān)設(shè)計(jì)的知識(shí)。你將學(xué)習(xí)從不同的角度看待它,你將獲得你可能從未想過的反饋和問題。

每當(dāng)你和其他人談?wù)撛O(shè)計(jì)時(shí),你的思維將一直處于“頭腦風(fēng)暴”模式,你會(huì)發(fā)現(xiàn)自己越來越對(duì)設(shè)計(jì)產(chǎn)生興趣。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

用第一性原理告訴你:什么是交互設(shè)計(jì)?

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

為什么是第一性原理

最早提出這個(gè)概念的是亞里士多德。他說:在任何一個(gè)系統(tǒng)中,存在第一性原理,是一個(gè)最基本的命題或假設(shè),不能被省略,也不能被違反。

后來「硅谷鋼鐵俠」埃隆·馬斯克在一次采訪中提到「第一性原理」:

我們運(yùn)用第一性原理,而不是比較思維去思考問題是非常重要的。我們?cè)谏钪锌偸莾A向于比較,對(duì)別人已經(jīng)做過或者正在做的事情我們也都去做,這樣發(fā)展的結(jié)果只能產(chǎn)生細(xì)小的迭代發(fā)展。第一性原理的思想方式是用物理學(xué)的角度看待世界,也就是說一層層撥開事物表象,看到里面的本質(zhì),再從本質(zhì)一層層往上走。

所以,我希望用第一性原理的思維方式,發(fā)現(xiàn)交互設(shè)計(jì)的本質(zhì),從而更好地理解和運(yùn)用它。

什么是交互設(shè)計(jì)

交互設(shè)計(jì),又稱互動(dòng)設(shè)計(jì)(英文Interaction Design,縮寫 IxD 或者 IaD)是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域。人造物,即人工制成物品,例如,軟件、移動(dòng)設(shè)備、人造環(huán)境、服務(wù)、可佩帶裝置以及系統(tǒng)的組織結(jié)構(gòu)。交互設(shè)計(jì)在于定義人造物的行為方式(the「interaction」即人工制品在特定場(chǎng)景下的反應(yīng)方式)相關(guān)的界面?!俣劝倏?

讀完上面關(guān)于交互設(shè)計(jì)的權(quán)威解釋,相信有讀者和我一樣,在短時(shí)間內(nèi)很難弄明白:到底什么是交互設(shè)計(jì)?

下面,我們一起用第一性原理,拆解和分析交互設(shè)計(jì)的本質(zhì)。

小學(xué)語文老師教會(huì)我們一種名次解釋的方法——拆詞法,那么,交互設(shè)計(jì)可以拆解成:交互層和設(shè)計(jì)層。

交互層是什么

交互,即交流與互動(dòng)。具體點(diǎn)說,在某個(gè)場(chǎng)景下,一個(gè)對(duì)象為了某個(gè)事件目標(biāo),與其他對(duì)象產(chǎn)生信息的交流與互動(dòng)。在筆者看來,交互的本質(zhì)是信息的交流與互動(dòng),包含用戶、目標(biāo)、場(chǎng)景,它們共同構(gòu)成交互設(shè)計(jì)的交互層,這是交互設(shè)計(jì)的前提。

而用戶、目標(biāo)、場(chǎng)景,也正是辛向陽教授定義的交互設(shè)計(jì)5要素其中的3個(gè)。

案例1:我們?yōu)椤覆蛷d點(diǎn)餐」這個(gè)事件進(jìn)行交互設(shè)計(jì),那首先要知道這個(gè)案例的交互層是什么,也就是信息的交流與互動(dòng)是怎樣的。

這個(gè)例子的交互層是:用戶(我們)需要在某個(gè)場(chǎng)景(餐廳),與其他對(duì)象(餐廳/服務(wù)員)產(chǎn)生信息的交流與互動(dòng),才能達(dá)到目標(biāo)(完成點(diǎn)餐)。

案例2:我們?yōu)椤傅罔F上聽音樂」這個(gè)事件進(jìn)行交互設(shè)計(jì),按照上面的思路,我們知道這個(gè)事件的交互層是:用戶(我們)需要在某個(gè)場(chǎng)景(地鐵上),與其他對(duì)象(音源)產(chǎn)生信息的交流與互動(dòng),才能達(dá)到目標(biāo)(聽音樂)。

我小結(jié)一下,幫你理解交互設(shè)計(jì)的交互層。

當(dāng)我們?yōu)槟硞€(gè)事件進(jìn)行交互設(shè)計(jì)時(shí),首先要知道自己在一個(gè)什么樣的事件前提下開展交互設(shè)計(jì),而這個(gè)前提就是我所說的交互層,即用戶在某個(gè)場(chǎng)景下,與其他對(duì)象產(chǎn)生信息的交流與互動(dòng),從而達(dá)到目標(biāo)。

所以,在交互設(shè)計(jì)里的交互層,本質(zhì)是信息的交流與互動(dòng),包含用戶、目標(biāo)、場(chǎng)景,主角是信息交流互動(dòng)的雙方或多方。

設(shè)計(jì)層是什么

在說交互設(shè)計(jì)的設(shè)計(jì)層之前,我們先來看「什么是設(shè)計(jì)」。

設(shè)計(jì)是把一種設(shè)想,通過合理的規(guī)劃、周密的計(jì)劃、通過各種感覺形式傳達(dá)出來的過程?!俣劝倏?

現(xiàn)在我們將上述解釋放到「交互設(shè)計(jì)」里去理解。交互設(shè)計(jì)里的設(shè)計(jì),就是在交互層的前提下,為一個(gè)事件合理的規(guī)劃/計(jì)劃(行為),并傳達(dá)(媒介)出各種感覺(用戶體驗(yàn))。

所以,在交互設(shè)計(jì)里的設(shè)計(jì)層,本質(zhì)是找到解決問題的手段,包括媒介和行為,主角是設(shè)計(jì)媒介和行為的設(shè)計(jì)師。

我們繼續(xù)用前面的兩個(gè)案例,理解交互設(shè)計(jì)的設(shè)計(jì)層。

案例1:為了完成「餐廳點(diǎn)餐」的交互設(shè)計(jì),我們依據(jù)交互層這個(gè)前提,開始找到解決問題的手段,并為之設(shè)計(jì)媒介和行為。

在一些餐廳,用戶還是通過紙質(zhì)菜單,用口述的方式完成點(diǎn)餐。這里的媒介是紙質(zhì)菜單和服務(wù)員,行為是口述。

在另外一些餐廳,用戶用手機(jī)掃碼點(diǎn)餐、下單、結(jié)賬、評(píng)價(jià)等。這里的媒介是餐廳點(diǎn)餐的二維碼和用戶的手機(jī),行為是用手機(jī)掃碼、點(diǎn)餐、結(jié)賬等一系列動(dòng)作。

案例2:為了完成「地鐵上聽音樂」的交互設(shè)計(jì),在非智能手機(jī)的時(shí)代,我們基本上是通過一個(gè)可存儲(chǔ)的音樂播放設(shè)備和耳機(jī)完成這個(gè)目標(biāo)的,那時(shí)候的媒介是播放器和耳機(jī),行為是打開播放器播放音樂、在播放器調(diào)整音樂。

隨著互聯(lián)網(wǎng)和智能手機(jī)的普及,藍(lán)牙傳輸技術(shù)的升級(jí)(aptX/LDAC等),以及用戶訴求的升級(jí)和多樣化,我們可以設(shè)計(jì)出更多貼近交互層(用戶、目標(biāo)、場(chǎng)景)的媒介和行為。比如音樂APP、藍(lán)牙播放器、藍(lán)牙耳機(jī)、線控耳機(jī)等。

此外,筆者認(rèn)為:媒介和行為是相輔相成的關(guān)系,二者在交互設(shè)計(jì)的過程中會(huì)互相促進(jìn)和限制。舉個(gè)例子,一些帶線控的藍(lán)牙耳機(jī)自動(dòng)連上手機(jī)后,按一下耳機(jī)上的播放鍵,就能直接啟動(dòng)音樂APP 開始播放了。這個(gè)「開始播放」的行為就可以設(shè)計(jì)在耳機(jī)上,而不僅僅是音樂APP里。

小結(jié)

用第一性原理,我將交互設(shè)計(jì)拆解成交互層和設(shè)計(jì)層,并結(jié)合辛向陽教授定義的交互設(shè)計(jì)5要素,得出結(jié)論:交互的本質(zhì)是信息的交流與互動(dòng),由用戶、目標(biāo)、場(chǎng)景構(gòu)成;設(shè)計(jì)的本質(zhì)是找到解決問題的手段,由媒介、行為構(gòu)成。

交互設(shè)計(jì)的本質(zhì):設(shè)計(jì)師為用戶設(shè)計(jì)出在某個(gè)場(chǎng)景下信息交流與互動(dòng)的媒介和行為,從而達(dá)成目標(biāo)。

如何做好交互設(shè)計(jì)

1. 把握交互設(shè)計(jì)的行業(yè)差異化

本文從我個(gè)人的角度和經(jīng)驗(yàn),給大家分享了我對(duì)交互設(shè)計(jì)這個(gè)底層概念的理解,在我研究的過程中,最大的體會(huì)是,交互設(shè)計(jì)不僅僅表現(xiàn)在屏幕上,其實(shí)在線下場(chǎng)景下,同樣有很多體現(xiàn),比如現(xiàn)在熱門的服務(wù)設(shè)計(jì),我覺得它是對(duì)交互設(shè)計(jì)的場(chǎng)景化應(yīng)用和延伸。

由此看來,交互設(shè)計(jì)會(huì)因行業(yè)和產(chǎn)品形態(tài)的不同,而存在差異化。拿B端產(chǎn)品來說,用戶行為是完成某一項(xiàng)規(guī)范化的工作,而這項(xiàng)工作,往往具備行業(yè)和崗位專業(yè)性,設(shè)計(jì)師需要更好地理解行業(yè)和專業(yè),才能貼近交互層(用戶、目標(biāo)、場(chǎng)景),設(shè)計(jì)出好的媒介和行為。

2. 具備相關(guān)思維

項(xiàng)目思維。交互設(shè)計(jì)師的工作往往貫穿調(diào)研、需求、設(shè)計(jì)、研發(fā)、測(cè)試等環(huán)節(jié),我們需要把每一個(gè)設(shè)計(jì)Case 當(dāng)成自己的項(xiàng)目一樣去對(duì)待,而項(xiàng)目經(jīng)理就是自己,充分發(fā)揮主動(dòng)解決問題的意識(shí)和能力。

用戶思維、產(chǎn)品思維、邏輯思維等。這3個(gè)思維網(wǎng)絡(luò)上有很多解釋,在這里就不贅述了。

3. 充實(shí)知識(shí)儲(chǔ)備

點(diǎn)擊下方標(biāo)題,查看已更新的知識(shí)篇文章:

4. 提升專業(yè)技能和底層能力

《從今天起培養(yǎng)這5個(gè)好習(xí)慣,讓你在 2019 年快速成長(zhǎng)!》

寫在最后

本文從構(gòu)思到寫完,斷斷續(xù)續(xù)有1個(gè)多月了,總希望找到一個(gè)合適的方式去解讀交互設(shè)計(jì),把這個(gè)概念說明白,但事實(shí)是越研究越覺得復(fù)雜,我需要了解的還有很多。

所以,我寫這篇文章的目的不僅僅是分享我對(duì)交互設(shè)計(jì)的淺見,還希望用「第一性原理」這個(gè)拆解、分析、解決問題的思維方式,去研究「什么是交互設(shè)計(jì)」這個(gè)問題。

交互設(shè)計(jì)這個(gè)概念或領(lǐng)域,遠(yuǎn)比我寫的要復(fù)雜和深入,我在研究「交互設(shè)計(jì)」路上才剛起步,希望能與讀者朋友一起交流這個(gè)話題。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制  用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

UI中切圖與命名規(guī)范,收藏!

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

規(guī)范的命名方式可以提高開發(fā)人員的開發(fā)效率和整個(gè)開發(fā)團(tuán)隊(duì)的友好合作,減少溝通成本。結(jié)合經(jīng)驗(yàn)與收錄的資料,分享給大家。

一. 切圖命名英文縮寫的三個(gè)要求


1.較短的單詞可通過去掉“元音”形成縮寫

2. 較長(zhǎng)的單詞可取單詞的頭部幾個(gè)字母形成縮寫

3.還有一些特定的英文單詞縮寫


二. 命名規(guī)則


切圖命名以模塊為前綴,如:模塊_類別_功能_狀態(tài).png


模塊:

登陸頁面(login) 公共(common) 需求a(need) 需求b(demand) 發(fā)現(xiàn)(discover) 消息(message)    我(me)


類別:

導(dǎo)航欄(nav) 菜單欄(tab) 按鈕(btn)  圖標(biāo)(icon)  背景圖片(bg)  默認(rèn)圖片(def)


狀態(tài):

selected(選中) disabled(不可點(diǎn)) pressed(按下) normal(一般)


舉例說明:

IOS:

以750*1334為基稿設(shè)計(jì),按實(shí)際項(xiàng)目開發(fā)為標(biāo)準(zhǔn),需切出@2x和@3兩套圖,把在公共頁面中的導(dǎo)航欄里面有一個(gè)按鈕(40x60px)的選中狀態(tài)切圖,直接輸出的切圖為@2x圖,@2x的1.5倍圖為@3x。


輸出成果為:

common_nav_btn_back_s@2x.png(40x60)和common_nav_btn_back_s@3x.png(80x120);

意思為:公共_導(dǎo)航_按鈕_返回_選中


Android:

以720*1280為基稿設(shè)計(jì),由于尺寸不同且多樣,需要切多套圖適配不同機(jī)器,分別為mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,直接輸出的切圖為xhdpi;它們分別對(duì)應(yīng)的倍數(shù)關(guān)系為1、1.5、2、3、4。


輸出成果為:

common_nav_btn_back_s_mdpi.png(20x30)、

common_nav_btn_back_s_hdpi.png(30x45)、

common_nav_btn_back_s_xhdpi.png(40x60)、

common_nav_btn_back_s_xxhdpi.png(60x90)、common_nav_btn_back_s_xxxhdpi.png(80x120);


命名示列:

啟動(dòng)  (default):    

default.png   啟動(dòng)圖片;

default_logo.png   啟動(dòng)logo


登陸(login):

login_bg.png   登陸背景圖片

login_logo.png   登陸logo

login_input_n.png   輸入框

login_input_s.png   輸入框選中狀態(tài)

login_btn_n.png    登錄按鈕

login_btn_s.png    登錄按鈕選中狀態(tài)


注冊(cè)(register):

login_register_rb_n.png    單選框按鈕

login_register_rb_s.png    單選框按鈕選中狀態(tài)


導(dǎo)航欄(nav):

common_nav_btn_menu_n.png    菜單按鈕

common_nav_btn_menu_s.png    菜單按鈕選中狀態(tài)

common_nav_btn_back_n.png    返回按鈕

common_nav_btn_back_s.png    返回按鈕選中狀態(tài)

common_nav_btn_close_n.png    關(guān)閉按鈕

common_nav_btn_close_s.png    關(guān)閉按鈕選中狀態(tài)

common_nav_btn_eidt_n.png    編輯按鈕

common_nav_btn_eidt_s.png    編輯按鈕選中狀態(tài)

common_nav_btn_delete_n.png    刪除按鈕

common_nav_btn_delete_s.png    刪除按鈕選中狀態(tài)

common_nav_btn_message_n.png    消息按鈕

common_nav_btn_message_s.png    消息按鈕選中狀態(tài)

common_nav_btn_search_n.png    搜索按鈕

common_nav_btn_search_s.png    搜索按鈕選中狀態(tài)


列表(list):

hpcollege_list_collect.png    列表頁收藏按鈕


左側(cè)導(dǎo)航欄(leftbar):

leftbar_info.png     個(gè)人中心


菜單(tab):

common_tab_need_n.png     需求a按鈕

common_tab_need_s.png     需求a按鈕選中狀態(tài)

common_tab_find_n.png     發(fā)現(xiàn)按鈕

common_tab_find_s.png     發(fā)現(xiàn)按鈕選中狀態(tài)

common_tab_demand_n.png    需求b按鈕

common_tab_demand_s.png    需求b按鈕選中狀態(tài)

common_tab_me_n.png    我的按鈕

common_tab_me_s.png    我的按鈕選中狀態(tài)


首頁(home):

home_bg.png     首頁背景

home_banner.png     首頁廣告圖


點(diǎn)9圖(.9):

rounded rectangle.9.png    圓角矩形


常用詞語:

selected:選中/s

pressed:按下/pre

disabled:不可點(diǎn)/d

normal:正常/n

common:公共

default:登錄頁

discover:發(fā)現(xiàn)

message:消息

me:我

navigation  bar:導(dǎo)航欄/nav

tab:菜單欄

button:按鈕/btn

icon:圖標(biāo)

background-image:背景圖片/bg

default-image:默認(rèn)圖片/def

cut-off  rule:分割線/cor

login:登陸

register:注冊(cè)

list:列表

home:首頁

banner:廣告

browse:瀏覽

details:詳情

like:喜歡

dislike:不喜歡

search:搜索

content:內(nèi)容

collect:收藏

eidt:編輯

comment:評(píng)論

message:提示信息/msg

ranked:排名

location:定位

tags:標(biāo)簽

left:左

right:右

center:中

popup:彈出/pop

image:圖片/img

viedio:視頻/vd

audio:音頻/ad

title:標(biāo)題/tit

address:地址/add

number:人數(shù)

time:時(shí)間

sustem:系統(tǒng)

refresh:刷新

user:用戶

more:更多

border:邊框

next:下一步

sign:簽到

code:密碼

clear:清除

scroll:滾動(dòng)條

hover:鼠標(biāo)停留

common:公共

hot:熱點(diǎn)

zoomin:放大

zoomout:縮小

service:服務(wù)

presonal  data:個(gè)人資料/Pdata

male:男性

female:女性

report:舉報(bào)

input:輸入/ip

dropdown  menu:下拉菜單/ddm

radio button:?jiǎn)芜x框/rb

check  box:復(fù)選框/cb

progressbar:進(jìn)度條/pbar

download:下載

arrow:箭頭

share:分享

upload:上傳

release:發(fā)布

tabbar:標(biāo)簽欄

autonym:實(shí)名

藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

商業(yè)化思維:如何創(chuàng)造價(jià)值,驅(qū)動(dòng)產(chǎn)品/業(yè)務(wù)運(yùn)轉(zhuǎn)?

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

商業(yè)化思維的本質(zhì)就是:創(chuàng)造價(jià)值,通過為客戶創(chuàng)造價(jià)值和交換價(jià)值來驅(qū)動(dòng)產(chǎn)品以及業(yè)務(wù)的運(yùn)轉(zhuǎn)。那么,如何為用戶創(chuàng)造價(jià)值和交換價(jià)值呢??jī)r(jià)值屬性會(huì)跟著用戶屬性的不同而產(chǎn)生變化,所以,在探究這個(gè)問題之前,要根據(jù)將用戶劃分為不同的群體,再從不同的方面著手。

商業(yè)化思維這個(gè)字眼乍看上去很高大上,確實(shí)往大了說,商業(yè)化思維可以套用到各種宏觀微觀的商業(yè)模式當(dāng)中。但我們的目的是讓商業(yè)化思維能夠成為一個(gè)活動(dòng)運(yùn)營真正日常可用的能力項(xiàng),所以我們對(duì)這個(gè)部分要解讀的商業(yè)化思維的定義稍微做一些邊界設(shè)定。

——基于商業(yè)化思維的本質(zhì):創(chuàng)造價(jià)值。

我們將探討:如何通過創(chuàng)造價(jià)值去驅(qū)動(dòng)一個(gè)產(chǎn)品/業(yè)務(wù)?

通過創(chuàng)造價(jià)值驅(qū)動(dòng)產(chǎn)品/業(yè)務(wù)運(yùn)轉(zhuǎn)是一種完全不同于體驗(yàn)驅(qū)動(dòng)(也就是產(chǎn)品思維)的模式,也是絕大部分互聯(lián)網(wǎng)從業(yè)者少有接觸的(電商&廣告類的業(yè)務(wù)接觸可能較多一些),能夠綜合使用價(jià)值驅(qū)動(dòng)和體驗(yàn)驅(qū)動(dòng)來幫助你策劃一個(gè)業(yè)務(wù)形態(tài),就會(huì)極大拓展你的思路(比如:你能夠策劃出趣頭條類似的廣告費(fèi)轉(zhuǎn)移為用戶成本的模式)。

同時(shí),也能夠朝著我們的核心目的:讓一個(gè)業(yè)務(wù)叫座又叫好去演進(jìn)。

再次回顧一下產(chǎn)品思維和商業(yè)化思維模式的概念:

  • 體驗(yàn)驅(qū)動(dòng)(產(chǎn)品思維):如何讓用戶使用便捷、有趣、解決用戶的某種問題和需求?
  • 價(jià)值驅(qū)動(dòng)(商業(yè)化思維):如何為用戶/客戶創(chuàng)造價(jià)值和交換價(jià)值?

用戶/客戶分類

那么如何為用戶創(chuàng)造和交換價(jià)值?

價(jià)值屬性是跟著用戶屬性在變化的,要探討如何創(chuàng)造和交換價(jià)值,我們需要先對(duì)用戶/客戶做一個(gè)分類:

C用戶:個(gè)人用戶。

  • 素人用戶:就是最普通的個(gè)體用戶,看新聞的、買東西的、薅羊毛的、刷視頻的普通大眾們。
  • 達(dá)人用戶:依賴一些內(nèi)容平臺(tái)生存的,往往以創(chuàng)造內(nèi)容換取價(jià)值的內(nèi)容生產(chǎn)者角色。

B用戶:機(jī)構(gòu)/商家/團(tuán)體等任何非個(gè)人用戶。

  • 職業(yè)經(jīng)理人B用戶:一般是大企業(yè)/機(jī)構(gòu)里的業(yè)務(wù)負(fù)責(zé)人/對(duì)接人,他們并不在意公司的業(yè)績(jī),主要在意的是領(lǐng)導(dǎo)的認(rèn)可。
  • 生意人B用戶:一般是小企業(yè)/個(gè)人店鋪的直接負(fù)責(zé)人或者就是老板本人,整虛的對(duì)他們從來沒有用,他們只想要賺錢。

一般互聯(lián)網(wǎng)的各種業(yè)務(wù)形態(tài),會(huì)面對(duì)的用戶種類基本上就是以上四種,代表著完全不同的四種價(jià)值訴求。

我們對(duì)這四種角色分別進(jìn)行價(jià)值創(chuàng)造以及交換的理解和研究,就能夠幫助你在業(yè)務(wù)規(guī)劃當(dāng)中,真正有效的運(yùn)用到商業(yè)化思維。

當(dāng)然這只是商業(yè)化思維最基礎(chǔ)的入門,感興趣的可以基于這個(gè)原理再深入研究。

C用戶——素人用戶的價(jià)值

在面對(duì)素人用戶的時(shí)候,商業(yè)化思維主導(dǎo)的用戶價(jià)值和產(chǎn)品化思維主導(dǎo)的用戶價(jià)值有一些交叉和模糊的地帶,為了便于理解和明確另外一種思維模式,我們相對(duì)粗暴的定義商業(yè)化思維的價(jià)值更多在于“創(chuàng)造”,區(qū)別于產(chǎn)品化思維的“滿足”。

怎么理解呢?

用戶有購物的需求,打造一個(gè)電商購物產(chǎn)品屬于“滿足”需求。而在購物需求滿足之后,我們讓用戶去進(jìn)行商品分享,通過用戶分享進(jìn)來的訂單我們給予一定的分擁,這就“創(chuàng)造”了額外的賺錢的價(jià)值,可以交換用戶社交關(guān)系鏈曝光的價(jià)值。

當(dāng)然,實(shí)際并沒有這么明確的區(qū)分,用戶購物本身也是一種商業(yè)行為,商品的品牌溢價(jià)、促銷手段(買三減一)等也都可以歸類為價(jià)值創(chuàng)造的范疇。不過,這個(gè)不重要,我們關(guān)鍵要理解的是創(chuàng)造價(jià)值的思維模式。

常見的可以額外創(chuàng)造的素人用戶價(jià)值:賺錢、省錢、炫耀、情感共鳴等不屬于用戶剛性需求(購物,變美,解決問題)的這類可以額外創(chuàng)造的價(jià)值。

而常見的你可以置換的用戶價(jià)值:額外的成本付出、用戶的個(gè)人關(guān)系鏈(自主推廣)、用戶的時(shí)間、用戶的內(nèi)容創(chuàng)造等。

商業(yè)化思維在素人用戶部分,提供一種截然不同的業(yè)務(wù)策劃模式:并不是考慮用戶的需求是什么,然后針對(duì)性的策劃一個(gè)產(chǎn)品。而是先思考你想要交換的用戶價(jià)值是什么,然后,思考你如何創(chuàng)造額外的價(jià)值可以有效的置換到用戶的價(jià)值。

在這個(gè)思維模式下,我們并不以體驗(yàn)和操作為優(yōu)先去考慮業(yè)務(wù)形態(tài),用戶付諸成本是核心考慮因素,成本小于價(jià)值這個(gè)業(yè)務(wù)模式就有效,反之則無效。

這個(gè)思維模式也解釋了:為什么很多體驗(yàn)優(yōu)秀的產(chǎn)品就是沒有用戶愿意去使用?

目前業(yè)內(nèi)新興的一些社交產(chǎn)品擁有比微信更優(yōu)秀的體驗(yàn),但是產(chǎn)品在社交上創(chuàng)造的額外價(jià)值并沒有大過用戶的關(guān)系鏈遷移成本(想要去交換的價(jià)值)。而一些價(jià)值巨大但體驗(yàn)糟糕的產(chǎn)品用戶還是愿意一遍又一遍的嘗試想要成功走通——一個(gè)分傭50%的商品,再復(fù)雜的操作用戶也愿意去鉆研和使用。

當(dāng)然,通過成本-價(jià)值的模式去思考和規(guī)劃業(yè)務(wù)模型,并不妨礙我們同步去進(jìn)行產(chǎn)品體驗(yàn)的完善,以幫助進(jìn)一步減少用戶在操作上付諸的成本。

商業(yè)化思維在業(yè)務(wù)中的一種典型運(yùn)用場(chǎng)景,基于一個(gè)明確的用戶價(jià)值交換業(yè)務(wù)目的,我們進(jìn)行價(jià)值交換過程的建立,以找到合適的業(yè)務(wù)模式。

例如:我們希望用戶能夠主動(dòng)進(jìn)行分享(而這個(gè)過程往往基于已經(jīng)滿足了用戶基本需求的狀態(tài)上,比如說一個(gè)電商網(wǎng)站用戶已經(jīng)完成了購物,但是我們還想要額外榨干用戶的價(jià)值),貢獻(xiàn)他們的社交關(guān)系鏈價(jià)值。

首先,我們需要進(jìn)行的思考是:用戶進(jìn)行分享需要付諸的成本是什么?

——分享到朋友圈后造成的個(gè)人形象影響,思考和檢索適合的分享對(duì)象的成本,分享動(dòng)作的操作成本(可以通過體驗(yàn)優(yōu)化極大降低)。

那么思考,基于業(yè)務(wù)特性,我們能夠提供給用戶合適的交換價(jià)值是什么?

——可以通過和商家分?jǐn)偝杀镜念~外現(xiàn)金激勵(lì)?基于稀缺或者高價(jià)產(chǎn)品的炫耀內(nèi)容?或是商品本身附帶的情感屬性?明確的定義清楚這個(gè)具體的價(jià)值是什么。

然后完整的對(duì)比,你創(chuàng)造的額外價(jià)值是否大于綜合成本,當(dāng)然這個(gè)對(duì)比不是一個(gè)絕對(duì)的數(shù)學(xué)對(duì)比過程,還摻雜了很多主觀因素。

所以,一定程度的用戶調(diào)研或者簡(jiǎn)單一些的自我洞察能夠幫助你得出有效的結(jié)論。如果做不到價(jià)值大于成本,那么這個(gè)業(yè)務(wù)就是不成立的。其實(shí)這個(gè)思維模式的邏輯是顯而易見的,但又往往被忽略。所以,很多分享10元滿減優(yōu)惠券的策劃被創(chuàng)造出來,而根本沒有人思考過10元滿減優(yōu)惠券的價(jià)值其實(shí)遠(yuǎn)遠(yuǎn)低于我分享到朋友圈的成本。

琢磨一下以上的過程,是不是提供了一種全新的思路。幫助你的不僅是簡(jiǎn)單的思考“我想讓用戶做什么,所以理所當(dāng)然的策劃一個(gè)產(chǎn)品去引導(dǎo)用戶”,而是真正的考慮清楚業(yè)務(wù)是否成立的根基,然后再從容不迫的去優(yōu)化體驗(yàn)。

時(shí)刻保持“成本-價(jià)值交換”的思維模式,不僅能夠幫助你打造有效的價(jià)值交換業(yè)務(wù)形態(tài),還有一個(gè)非常有用的場(chǎng)景。

基于一個(gè)明確的用戶訴求,我們進(jìn)行價(jià)值交換過程的分析,以找到業(yè)務(wù)的關(guān)鍵點(diǎn)。

我們還是用電商業(yè)務(wù)場(chǎng)景來舉例:在電商場(chǎng)景中,用戶付諸的最大成本是金錢,而購物操作的成本實(shí)際上優(yōu)先級(jí)并不靠前。用戶在價(jià)值交換過程中最優(yōu)先的價(jià)值是:“買到想要的東西”和“足夠的劃算”。

所以,在電商業(yè)務(wù)的重點(diǎn)一定是:提供更豐富的商品庫和更優(yōu)惠的價(jià)格,能夠極大提升價(jià)值的含金量。

而優(yōu)化購物操作體驗(yàn),頁面動(dòng)線邏輯等是其次的,可以一定程度減少用戶成本但解決不了價(jià)值不足的問題。

這也解釋了:為什么一個(gè)創(chuàng)造了諸多優(yōu)秀產(chǎn)品(常規(guī)產(chǎn)品主要面對(duì)的用戶成本確實(shí)是操作成本,而價(jià)值是比較單一明確的,例如郵箱)的大廠投入了諸多心血打磨產(chǎn)品體驗(yàn)但最終還是在電商戰(zhàn)場(chǎng)戰(zhàn)敗了?

一個(gè)擅長(zhǎng)做價(jià)值交換的電商大廠在一個(gè)社交產(chǎn)品(用戶的主要價(jià)值是社交,成本是難以獨(dú)立完成的關(guān)系鏈遷移)上投入了大量的推廣資源和利益誘導(dǎo)確留不下用戶。

你看,大家都在說的基因的本質(zhì)問題,其實(shí)本質(zhì)并不復(fù)雜。當(dāng)然大廠的成敗并不只取決于思路的差異,還有歷史以來積累的資源類型和用戶心智,這些也都是基因的構(gòu)成部分。

我們也不需要操心這么多,學(xué)會(huì)運(yùn)用這個(gè)新的思路足以在業(yè)務(wù)策劃中幫助自己抓住真正的重點(diǎn)。

C用戶——達(dá)人用戶的價(jià)值

首先明確我們這里所討論的達(dá)人用戶,并不是普通用戶當(dāng)中樂于分享和創(chuàng)造低質(zhì)量?jī)?nèi)容的那群人(當(dāng)然也有高質(zhì)量的但并不普遍),而是以內(nèi)容生產(chǎn)為職業(yè),創(chuàng)造真正專業(yè)有價(jià)值內(nèi)容,能夠構(gòu)成你的平臺(tái)核心競(jìng)爭(zhēng)力的那群人。

區(qū)別于普通用戶,我們希望置換的達(dá)人用戶價(jià)值是比較高的,平臺(tái)依賴這些達(dá)人用戶去不斷供給符合平臺(tái)導(dǎo)向的優(yōu)質(zhì)內(nèi)容,而內(nèi)容生產(chǎn)的成本極大,也就需要更大的價(jià)值來進(jìn)行置換。
達(dá)人用戶常見價(jià)值訴求:變現(xiàn)、曝光、獨(dú)特的內(nèi)容生產(chǎn)能力、有效的粉絲互動(dòng)和管理能力。

達(dá)人用戶需要付諸的成本:內(nèi)容生產(chǎn)成本。

基于創(chuàng)造價(jià)值大于成本的邏輯,要打造優(yōu)秀的面相達(dá)人用戶的業(yè)務(wù),就可以從幾個(gè)方面著手(增加提供的價(jià)值):

提供足夠價(jià)值的變現(xiàn)能力:

專業(yè)的達(dá)人往往以此生存,和普通用戶一樣的分傭價(jià)值只能作為額外的補(bǔ)充價(jià)值,并不能達(dá)到達(dá)人的標(biāo)準(zhǔn)。

所以,如果你的業(yè)務(wù)希望依靠變現(xiàn)價(jià)值來讓達(dá)人自發(fā)留下,那么你需要考慮的核心問題和需要尋找打造的案例就是:有沒有達(dá)人可以在你的平臺(tái)賺錢養(yǎng)活自己。

當(dāng)然如果沒有內(nèi)容獨(dú)家協(xié)議的限制,達(dá)人可以依靠多平臺(tái)存活,對(duì)你的要求就不會(huì)那么高,但變現(xiàn)的價(jià)值也一定是生存級(jí)別的(幾千元)而不是福利級(jí)別的(幾百元甚至以下)。達(dá)不到這個(gè)標(biāo)準(zhǔn),你的業(yè)務(wù)邏輯確實(shí)就不成立。

提供足夠多的曝光量級(jí):

當(dāng)然這個(gè)和你的用戶規(guī)模以及流量分配機(jī)制有關(guān),需要考慮的問題是:你給的曝光是不是有效的曝光?你的達(dá)人用戶能否有效的把曝光轉(zhuǎn)化為強(qiáng)關(guān)系的粉絲,或者是個(gè)人品牌認(rèn)知用戶?

這個(gè)目的達(dá)不到只是粗暴的給曝光并沒有用(例如:很多內(nèi)容平臺(tái)會(huì)找我要稿子,一些平臺(tái)只會(huì)放作者名字而不愿意曝光作者個(gè)人公眾號(hào),我就非??咕転樗麄兲峁└寮?。

很多冷啟動(dòng)的業(yè)務(wù)面對(duì)的是達(dá)人內(nèi)容量級(jí)和用戶量級(jí)循環(huán)驅(qū)動(dòng)增長(zhǎng)的問題,在這個(gè)邏輯下一定程度的達(dá)人內(nèi)容補(bǔ)貼是常用的手段。但不能偏離的是,你的激勵(lì)要做用戶這個(gè)循環(huán),要求仍然是激活的內(nèi)容一定要對(duì)用戶有價(jià)值而不只是湊數(shù),達(dá)人的補(bǔ)貼規(guī)模也要達(dá)到生存級(jí)別。

提供獨(dú)有的內(nèi)容生產(chǎn)能力(生產(chǎn)素材):

或者說獨(dú)特的有效的粉絲互動(dòng)管理能力等產(chǎn)品層面的價(jià)值也是一種辦法。但說實(shí)話國內(nèi)互聯(lián)網(wǎng)KOL行業(yè)發(fā)展多年已成定局,大的MCN機(jī)構(gòu)已經(jīng)壟斷了大的流量和真正專業(yè)的內(nèi)容生產(chǎn)者,平臺(tái)遷移成本極低;大流量主產(chǎn)品能力的抄襲門檻又不算高。

所以,除非你能純粹的全面培養(yǎng)素人成為達(dá)人,否則這類型的手段可能只作為補(bǔ)充,要真的撬動(dòng)達(dá)人價(jià)值還是要回歸到以上兩個(gè)點(diǎn)。

降低創(chuàng)作的成本:

當(dāng)你的產(chǎn)品不足以讓一個(gè)達(dá)人在這里養(yǎng)活自己,那么你可能就很難得到獨(dú)家的內(nèi)容。

要讓達(dá)人愿意在你這里搬遷內(nèi)容或者一定程度的定制創(chuàng)作,可走的路就只有盡量減少內(nèi)容生產(chǎn)的成本——快速搬遷,極低門檻的排版能力,和行業(yè)通用規(guī)則一致的產(chǎn)品形態(tài)等等。

接下來,我們看一下另外一個(gè)截然不同的面對(duì)B客戶的領(lǐng)域。

B客戶相比于C客戶,目的更加明確,愿意投入更大的成本交換更大的價(jià)值。在B的領(lǐng)域,商業(yè)化思維的主導(dǎo)就更加明確,價(jià)值的創(chuàng)造和交換成為了唯一的話題,產(chǎn)品體驗(yàn)起到的作用微乎其微,除非你提供的價(jià)值本身就是產(chǎn)品的體驗(yàn)(比如說:一些企業(yè)服務(wù)工具)。

B客戶——生意人價(jià)值

要理解生意人B的價(jià)值訴求,先從一個(gè)個(gè)人經(jīng)歷的故事開始:

曾經(jīng)牽頭過一個(gè)面向B商家服務(wù)的工具平臺(tái),商家支付費(fèi)用使用工具和流量等整合的服務(wù)。

在工具平臺(tái)搭建的早起,我們以非常產(chǎn)品導(dǎo)向的思維進(jìn)行了規(guī)劃,重點(diǎn)考慮的是工具的各種功能、平臺(tái)使用體驗(yàn)、對(duì)平臺(tái)的流量等價(jià)值貢獻(xiàn)等問題,設(shè)定了工具平臺(tái)的點(diǎn)擊率、跳轉(zhuǎn)率、轉(zhuǎn)化率等關(guān)鍵考核指標(biāo),在這些導(dǎo)向下不斷的去優(yōu)化工具平臺(tái)。

然后,我們召開了第一次的商家推廣大會(huì),準(zhǔn)備了精美的PPT,詳盡的介紹了工具平臺(tái)各種先進(jìn)的能力,復(fù)雜的邏輯和優(yōu)秀的體驗(yàn),其華麗程度首先把我們自己都感動(dòng)了。

但是,現(xiàn)場(chǎng)反應(yīng)平平,幾乎所有商家全程都在玩手機(jī),似乎對(duì)我們精彩的演講絲毫不感興趣。

會(huì)后我們找到幾個(gè)資深的商家咨詢了原因,其中一句關(guān)鍵的點(diǎn)播對(duì)我們產(chǎn)生了至關(guān)重要的影響:

“我們只想知道在你這里能不能賺錢,投入多少回報(bào)多少,流量成本吧如何,比其他平臺(tái)有沒有優(yōu)勢(shì)。其他的真的不太在意。”

這一句話真正引起了我們關(guān)于“什么是商業(yè)化?”“怎么樣才叫做生意?”的思考。

面對(duì)著實(shí)打?qū)嵰湍阕錾獾纳碳遥磺行问交奶摕o的東西都沒有任何意義,只有唯一關(guān)鍵的話題:賺錢(當(dāng)然不同的業(yè)務(wù)模式又有其他的一些核心價(jià)值例如獲客等但邏輯都是可以套用的)。

回去以后我們快速調(diào)整了整個(gè)業(yè)務(wù)的導(dǎo)向,弱化了所有關(guān)于體驗(yàn)的考核指標(biāo)——點(diǎn)擊率,轉(zhuǎn)化率(還要保留的原因是:這個(gè)產(chǎn)品還涉及到C端的用戶體驗(yàn)),而把一切涉及到投入產(chǎn)出,能不能掙錢的指標(biāo)——流量成本,拉新成本,費(fèi)用的投入產(chǎn)出比,作為主要的考核導(dǎo)向來指導(dǎo)所有的工作方向。

至此為起點(diǎn),這個(gè)產(chǎn)品開始真正的在市場(chǎng)上迎來了爆發(fā),每一次宣講會(huì)后(新的宣講會(huì)我們只強(qiáng)調(diào)投入產(chǎn)出效果)開放的名額都被一搶而空。

以上的故事即是我對(duì)與生意人B合作的商業(yè)化思維理解:剝離掉生意場(chǎng)各種復(fù)雜的規(guī)則和概念,要撬動(dòng)生意人B的投入,實(shí)際上也是在和他們做生意。能不能幫他們賺錢是唯一應(yīng)該考慮的問題。任何經(jīng)過包裝的,浮夸的,虛無的內(nèi)容在真實(shí)的投入產(chǎn)出效果下都沒有任何意義。

B客戶——職業(yè)經(jīng)理人價(jià)值

當(dāng)你合作的對(duì)象從一個(gè)想要賺錢的生意人變成了一個(gè)大公司內(nèi)部的職業(yè)經(jīng)理人,你將面對(duì)的價(jià)值又從單純的賺錢變成了更復(fù)雜的職業(yè)經(jīng)理人價(jià)值。

一個(gè)職業(yè)經(jīng)理人心里在意的價(jià)值第一優(yōu)先級(jí),并不是幫助公司更多的盈利和獲取價(jià)值(雖然這個(gè)理念并不道德但這是現(xiàn)狀你不得不面對(duì)),而是他在和領(lǐng)導(dǎo)匯報(bào)這次合作價(jià)值的時(shí)候是否能得到認(rèn)可。

所以,面對(duì)職業(yè)經(jīng)理人這樣的B端客戶,并不能僅僅考慮實(shí)現(xiàn)業(yè)務(wù)目標(biāo),你還需要從他的角度考慮:能否過讓這次的合作有更多的標(biāo)桿價(jià)值、項(xiàng)目意義能夠挖掘和包裝出來,以幫助他形成一個(gè)漂亮的匯報(bào)文件。

所以,和B端客戶做生意,需要更多講故事的能力。除了業(yè)務(wù)目標(biāo)的承諾外,你還能夠在方面銷售合作談判的時(shí)候,能夠完整的描述出:未來他在做匯報(bào)時(shí)候能夠拿到的完美的報(bào)告是什么樣子的?

以此去考慮:你在一開始要銷售方案應(yīng)該如何設(shè)計(jì)?業(yè)務(wù)應(yīng)該增加哪些模塊?合作應(yīng)該提供哪些支持?就能夠更好的幫助你搞定一個(gè)職業(yè)經(jīng)理人的客戶。

以上便是基于活動(dòng)運(yùn)營應(yīng)該掌握的最基本的一些商業(yè)化思維業(yè)務(wù)運(yùn)用介紹,除了常規(guī)的運(yùn)用外,更重要的還是要強(qiáng)調(diào)互聯(lián)網(wǎng)非技術(shù)工種人員應(yīng)該都要具備“創(chuàng)造體驗(yàn)”和“創(chuàng)造價(jià)值”兩種思維模式,能夠真的幫助你創(chuàng)造出叫好又叫座的策劃。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制  用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

好看的天氣類界面,您不能錯(cuò)過!

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

天氣類界面欣賞!微信圖片_20190311090105.jpg微信圖片_20190311090130.jpg微信圖片_20190311090159.jpg微信圖片_20190311090202.jpg微信圖片_20190311090127.jpg微信圖片_20190311090134.jpg微信圖片_20190311090137.jpg微信圖片_20190311090141.jpg微信圖片_20190311090144.jpg微信圖片_20190311090147.jpg微信圖片_20190311090150.jpg微信圖片_20190311090153.jpg微信圖片_20190311090156.jpg微信圖片_20190311090207.jpg微信圖片_20190311090209.jpg微信圖片_20190311090212.jpg微信圖片_20190311090215.jpg微信圖片_20190311090217.jpg微信圖片_20190311090221.jpg微信圖片_20190311090224.jpg微信圖片_20190311090227.jpg微信圖片_20190311090230.jpg微信圖片_20190311090235.jpg微信圖片_20190311090243.jpg微信圖片_20190311090255.jpg微信圖片_20190311090311.jpg微信圖片_20190311090316.jpg微信圖片_20190311090320.jpg微信圖片_20190311090326.jpg微信圖片_20190311090328.jpg微信圖片_20190311090332.jpg微信圖片_20190311090334.jpg微信圖片_20190311090337.jpg微信圖片_20190311090240.jpg微信圖片_20190311090246.jpg微信圖片_20190311090248.jpg微信圖片_20190311090252.jpg微信圖片_20190311090302.jpg微信圖片_20190311090306.jpg微信圖片_20190311090309.jpg

 

藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

為什么你的設(shè)計(jì)改了又改?這4個(gè)方法幫你一稿過

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

大多數(shù)設(shè)計(jì)師在實(shí)際工作中,經(jīng)常會(huì)碰到設(shè)計(jì)稿改來改去,改得焦頭爛額,甚至懷疑自己的設(shè)計(jì)水平,這是為什么呢?又有什么解決的方法?這篇文章為你答疑解惑。

「設(shè)計(jì)」這一門工種,似乎是永遠(yuǎn)避免不了「改稿」這一環(huán)節(jié)的,即便是非常頂尖的設(shè)計(jì)師,不為甲方不為外部原因所妥協(xié),也會(huì)在自我實(shí)踐中尋求改變。但是,「改設(shè)計(jì)」也未必是越改越好,如果溝通不當(dāng),也會(huì)存在越改越糟的結(jié)果。所以,作為設(shè)計(jì)師,一方面我們要吸取不同的意見,另一方面也要全面提升自己的知識(shí)架構(gòu)、堅(jiān)守自己的原則。

接下來以「UI設(shè)計(jì)」為例,剖析我們?nèi)粘9ぷ髦小父牧擞指摹沟膯栴}。在實(shí)際工作中,UI設(shè)計(jì)師通常會(huì)面臨來自老板、產(chǎn)品、運(yùn)營、開發(fā)等各方人員的意見,也常常會(huì)因?yàn)樽煮w的粗細(xì)、間距的大小、顏色的選擇等等問題各執(zhí)一詞、爭(zhēng)論不休,就像下圖一樣:

為什么會(huì)這樣呢?其實(shí),在UI設(shè)計(jì)中,頻繁改稿主要存在三種情況:

  • 第一種:在與產(chǎn)品經(jīng)理需求對(duì)接的時(shí)候溝通不到位導(dǎo)致理解有偏差,產(chǎn)生方向性錯(cuò)誤,這是信息傳遞的問題;
  • 第二種:設(shè)計(jì)師經(jīng)驗(yàn)不足、設(shè)計(jì)能力有限導(dǎo)致產(chǎn)品經(jīng)理的需求得不到最佳程度的實(shí)現(xiàn),這是UI設(shè)計(jì)師本身的問題;
  • 第三種:UI都已經(jīng)做到一半或者已經(jīng)輸出了,產(chǎn)品需求又變動(dòng)了,這是產(chǎn)品經(jīng)理或老板的需求不確定的問題。

針對(duì)以上問題,在實(shí)際項(xiàng)目中怎樣避免陷入頻繁改稿的死循環(huán),從而提高工作效率、推動(dòng)項(xiàng)目進(jìn)展,提升自己作為設(shè)計(jì)師的成就感呢?

認(rèn)清工作流,保持全方位的溝通

首先我們來了解一下UI設(shè)計(jì)的工作流,只有清楚自己崗位的流程,才能更好地拿捏設(shè)計(jì)。每個(gè)公司的類型和規(guī)??赡芏疾惶粯?,但基本一致,無非就是5個(gè)階段:需求 – 設(shè)計(jì) – 開發(fā) – 測(cè)試 – 上線。如果按職位劃分就是:產(chǎn)品經(jīng)理 – 交互設(shè)計(jì)師 – UI設(shè)計(jì)師 – 前后端開發(fā)工程師 – 測(cè)試人員 – 產(chǎn)品上線。

所以我們UI設(shè)計(jì)師是處于流水線中游的狀態(tài),向上對(duì)接產(chǎn)品,向下對(duì)接開發(fā)。在這個(gè)流程中,要做到減少設(shè)計(jì)修改的頻率:

向上要明確產(chǎn)品經(jīng)理的需求,將原型需求準(zhǔn)確恰當(dāng)?shù)囊曈X化;

向下要考慮開發(fā)實(shí)現(xiàn)以及時(shí)間成本,因?yàn)槿绻粋€(gè)設(shè)計(jì)做的非常絢麗,但是開發(fā)實(shí)現(xiàn)不出來或者很難實(shí)現(xiàn)或者實(shí)現(xiàn)的時(shí)間成本很大,那么肯定需要對(duì)設(shè)計(jì)方案做出調(diào)整,采納折中方案。

所以,不想讓自己的設(shè)計(jì)改了又改,那么一定要全方位的多溝通,一定不要「閉門造車」。

確定需求,吃透交互原型

UI設(shè)計(jì)師接到產(chǎn)品原型后,一定要弄清這幾點(diǎn),再開始設(shè)計(jì):

1. 原型是否確定,會(huì)不會(huì)存在變動(dòng)?

我們?cè)诮邮盏疆a(chǎn)品經(jīng)理遞交過來的交互原型稿之后,先和對(duì)方確定收到的需求是否完整,是否是最終稿件以及是否會(huì)存在變動(dòng)。一般來講,在大型企業(yè)里面流程都比較規(guī)范,產(chǎn)品經(jīng)理輸出最終原型之后,后期變動(dòng)的可能性較低。但在中小型企業(yè),通常因?yàn)轫?xiàng)目時(shí)間緊張,流程不夠完善,反復(fù)的可能性較多。一些大型需求,產(chǎn)品經(jīng)理有可能會(huì)分模塊、一部分一小點(diǎn)的流轉(zhuǎn)到UI設(shè)計(jì),這樣存在的問題隱患比較多,因?yàn)榻?jīng)驗(yàn)較少的產(chǎn)品經(jīng)理全局概念較差,雖然口頭上說這一部分的需求已經(jīng)完善了,實(shí)際上當(dāng)所有需求匯總之后極有可能需要再次調(diào)整。所以作為UI設(shè)計(jì)師,我們盡可能不要去接局部輸出的原型,需要再次確認(rèn)無誤后,我們?cè)僦衷O(shè)計(jì),這樣就避免了原型需求的變動(dòng)造成設(shè)計(jì)的變動(dòng)。

還有一點(diǎn),在產(chǎn)品經(jīng)理給到交互原型時(shí),我們是被動(dòng)的接受,還是在需求溝通之中也能及時(shí)參與呢?最好在產(chǎn)品需求的評(píng)審階段,對(duì)應(yīng)的UI設(shè)計(jì)師可以積極參與討論,一起溝通。一來可以熟悉產(chǎn)品思考的整個(gè)過程,二來可以在原型的溝通中站在設(shè)計(jì)的角度及時(shí)發(fā)現(xiàn)問題,提出建議,避免在原型定稿后再去修改的尷尬。

2. 項(xiàng)目的時(shí)間周期

在接到產(chǎn)品的原型后,一定要及時(shí)確認(rèn)項(xiàng)目的時(shí)間周期,通常產(chǎn)品經(jīng)理會(huì)主動(dòng)告知項(xiàng)目的周期,詢問UI設(shè)計(jì)完成時(shí)間,我們根據(jù)需求的復(fù)雜程度給出UI輸出的預(yù)計(jì)時(shí)間,再根據(jù)這個(gè)時(shí)間節(jié)點(diǎn)來劃分每一天完成的工作量。如果產(chǎn)品經(jīng)理給的時(shí)間周期比較短,那么盡可能的闡述原因申請(qǐng)?jiān)O(shè)計(jì)時(shí)間。如果時(shí)間過于倉促的話,設(shè)計(jì)思考的時(shí)間就少,考慮的問題很難全面,不利于界面效果的最佳呈現(xiàn),導(dǎo)致后續(xù)改稿的可能性也很大。

3. 理清設(shè)計(jì)意圖,處理好信息層級(jí)

接到產(chǎn)品原型,一定要理清設(shè)計(jì)意圖,處理好信息層級(jí)。

當(dāng)產(chǎn)品經(jīng)理遞交給我們確定的需求原型之后,切莫盲目開始設(shè)計(jì),UI設(shè)計(jì)并不是把原型框架進(jìn)行簡(jiǎn)單的排列,我們需要理清設(shè)計(jì)意圖,熟悉功能架構(gòu)、掌握交互邏輯,明白產(chǎn)品經(jīng)理想要解決什么問題,達(dá)到什么程度以及具體的設(shè)計(jì)方向。

信息層級(jí)這個(gè)問題,好像我們?cè)趯?shí)際工作中經(jīng)常會(huì)提起,但是要做到恰如其分的標(biāo)準(zhǔn)還是有點(diǎn)難度的。準(zhǔn)確把握界面的信息層級(jí)還需要跟產(chǎn)品經(jīng)理多方面的溝通,因?yàn)橛行r(shí)候我們以為的,并不是產(chǎn)品想要的,所以一定要多次確認(rèn),才能精準(zhǔn)把握。

△ 上圖左側(cè)是lofter首頁列表,右側(cè)是我統(tǒng)一梳理層級(jí)關(guān)系之后的效果

改動(dòng)的重點(diǎn):

  • 將配圖采用四周留白的卡片式布局,讓界面更通透,增強(qiáng)呼吸感,視覺焦點(diǎn)更為集中;
  • 優(yōu)化標(biāo)題與標(biāo)簽話題的展現(xiàn)形式,通過文字大小及字色深淺拉開主題文字與話題標(biāo)簽的層級(jí)關(guān)系;
  • 將熱度與喜歡、評(píng)論、轉(zhuǎn)發(fā)的實(shí)時(shí)數(shù)量跟隨圖標(biāo)后面,增加用戶參與的積極性。

多個(gè)設(shè)計(jì)稿比較,讓每一處設(shè)計(jì)有理有據(jù)

在實(shí)際設(shè)計(jì)過程中,當(dāng)碰到一個(gè)設(shè)計(jì)模塊拿捏不準(zhǔn)的時(shí)候,可以在 sketch 或者 ps 中建立多個(gè)畫板,將幾種不同的設(shè)計(jì)方案平鋪展開,進(jìn)行視覺對(duì)比分析。如果自己拿不準(zhǔn),可以叫組員或者其他部門的「小白」來進(jìn)行選擇投票或者提出改善性建議。不要小看「小白」,不要覺得他們不懂設(shè)計(jì),提的建議對(duì)設(shè)計(jì)無用。其實(shí)不然,我們的設(shè)計(jì)最終目的是給人用的,而且要好用,所以一定要多結(jié)合小白用戶的多方面意見,才能讓自己的設(shè)計(jì)更經(jīng)得起推敲。

上圖為筆者在處理個(gè)人中心界面效果拿捏不準(zhǔn)的時(shí)候,布局了多個(gè)效果進(jìn)行對(duì)比,通過對(duì)比的呈現(xiàn)后,就可以清晰判斷每一個(gè)界面存在的問題。

另外,UI設(shè)計(jì)中,不要停留于表面,不要用「好看或不好看」去做簡(jiǎn)單評(píng)斷,在設(shè)計(jì)過程中我們的界面布局、顏色把控、字符間距、icon設(shè)置等多方面都要經(jīng)得起推敲:為什么這樣設(shè)計(jì)?換一種設(shè)計(jì)合不合適?

只有讓每一處設(shè)計(jì)都有理論的支撐,深思熟慮后,才會(huì)讓設(shè)計(jì)更切實(shí)際,才能讓人信服,才能實(shí)現(xiàn)產(chǎn)品指數(shù)的增長(zhǎng),也更能體現(xiàn)設(shè)計(jì)師的價(jià)值。

以產(chǎn)品為核心,尊重各方立場(chǎng)

當(dāng)設(shè)計(jì)稿出來之后,一般會(huì)組織 UI評(píng)審,UI設(shè)計(jì)師一定要將自己的設(shè)計(jì)理念表達(dá)清楚,將設(shè)計(jì)中考究的觀點(diǎn)輸送給參與評(píng)審的各方人員,這樣會(huì)讓你的設(shè)計(jì)更有信服力。如果在評(píng)審過程中,產(chǎn)品、運(yùn)營或開發(fā)對(duì)設(shè)計(jì)稿提出不同的意見,我們首先不要急于否定,要確定立場(chǎng):大家都是以產(chǎn)品為核心去思考問題,也不要人云亦云,要清楚他們?yōu)槭裁磿?huì)提出這個(gè)意見,是不是自己的設(shè)計(jì)哪里沒有展現(xiàn)好?即便對(duì)方的建議本身沒有可取性,那么你也要站在你的視角用你的觀點(diǎn)解釋給對(duì)方聽。這決定于每個(gè)設(shè)計(jì)師的自身知識(shí)架構(gòu)和理論支撐,所以一定要讓自己不停地吸收,才能讓自己的設(shè)計(jì)更經(jīng)得起推敲。

以上是我在實(shí)際工作中的一些比較淺薄的總結(jié),如有闡述不周的地方大家可以相互探討。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

字體用的好,感覺不會(huì)少!

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


在設(shè)計(jì)中,字體的樣式往往起到輔助文案?jìng)鬟f的作用,所以如何在不同的設(shè)計(jì)風(fēng)格中用好字體尤為重要。字體如果用得好,在設(shè)計(jì)中常常會(huì)給讀者所需要的感覺,這里我們例舉幾種常見的感覺:


目錄

1.「注」入重量感

2.「空」出高級(jí)感

3.「圓」有親近感

4.「裝」出華麗感

5.「質(zhì)」換畫面感

6.「寫」出文藝感

Image title

一.「注」入重量感

突出重量感是大多數(shù)設(shè)計(jì)師常用的技巧,在設(shè)計(jì)中,為了提高文案或者標(biāo)題的視覺層級(jí),很多設(shè)計(jì)師往往會(huì)從字體的重量感進(jìn)行思考,給字體注入內(nèi)容往往能加大字體視覺重量,字體的重量感也就是版面中的“存在感”,“存在感”一旦提高,視覺層級(jí)也伴隨著提高。


一般我們?cè)谕怀鲎煮w重量感的方法上常常會(huì)選擇線條較粗的字體、加大描邊或者設(shè)計(jì)成立體字來突出“重量”,甚至可以縮小字體間距,營造緊張的感覺,使文字更具“重量"。另外在顏色上,黑色物品相對(duì)于淺色物品在視覺上顯得更重,這一點(diǎn)在字體上也同樣適用的。

Image title

二.「空」出高級(jí)感

字體的高級(jí)感一般體現(xiàn)在品等產(chǎn)品的設(shè)計(jì)上,利用大量的留白,在字體的顏色上盡量選擇近乎無彩色如灰色,做到簡(jiǎn)潔大方、少即是多。而在字體類型的選擇上,襯線體往往比非襯線體更具有格調(diào),宋體往往比黑體更加高雅,利用傳統(tǒng)字體也能給讀者一種信賴感。


看到這里也許有人會(huì)說:“從用戶體驗(yàn)角度思考應(yīng)該使用非襯線體,因?yàn)槠涓鬃x、字形更簡(jiǎn)潔?!倍凇对O(shè)計(jì)師要懂心理學(xué)》一書中表明研究發(fā)現(xiàn):常規(guī)的襯線體和非襯線體兩者在理解難易度、閱讀速度和使用傾向并無差異。

Image title

三.「圓」有親近感

字體所展示出的親近感主要體現(xiàn)在于字體端角的圓滑上,先從生活常見的例子講起,在人類的常識(shí)里尖銳的物品往往會(huì)給人冰冷、危險(xiǎn)和難以靠近的感覺,而圓滑的東西往往讓人有親近感,更利于吸引讀者接近。這里最形象的例子要數(shù)按鈕和圖標(biāo)的演變,按鈕和圖標(biāo)的設(shè)計(jì)從直角到圓角的演變,其中不乏也有以上原因。


在突出親近感時(shí),圓角類型的字體所表達(dá)的感覺如果還不夠強(qiáng)烈,這里不妨可以選用較粗的線條字體再加上暖色系的顏色,這樣親近感就更加強(qiáng)烈了。

Image title

四.「裝」出華麗感

一般文字是用于閱讀,而為了博人眼球,設(shè)計(jì)師也慢慢讓文字字體有了裝飾,利用線條的不規(guī)則粗細(xì)來突出文字的“美”,從而體現(xiàn)出華麗感,華麗感較強(qiáng)的字體大多數(shù)用于女性品牌的產(chǎn)品,裝飾性高的文字,不僅引人注目的效果,還能強(qiáng)調(diào)了產(chǎn)品的“貴”。要注意的是修飾性的文字不利于閱讀,不適合大量文字,容易視覺疲勞。

Image title

五.「質(zhì)」換畫面感

材質(zhì)感的字體往往用在游戲的設(shè)計(jì)上比較多,將武器或游戲場(chǎng)景等有質(zhì)感的東西貼在字體上,間接展示游戲場(chǎng)景、風(fēng)格等。因此,運(yùn)用材質(zhì)的字體往往更具有畫面感,從而影響讀者視覺對(duì)大腦的影響,產(chǎn)生了身臨其境的感覺,于是在腦海中留下對(duì)產(chǎn)品認(rèn)知。


質(zhì)感的字體往往容易讓人感覺到“力量”,這也和第一點(diǎn)注入內(nèi)容說法一樣。

Image title

六.「寫」出文藝感

手寫的字體,會(huì)讓讀者感覺到手的溫暖與膚觸的溫柔,這里被利用到的應(yīng)該算淘寶商家的感謝信了,利用牛皮紙加上手寫字體,可謂是為了好評(píng)誠意滿滿。


手寫的字體還常常與手繪貼圖一起出現(xiàn)在手帳本,或可愛優(yōu)雅、或呆萌粗線條;另外,你或許還能在文藝菜單上看到它,樸實(shí)無華卻清晰溫暖,文藝感十足。

Image title

后言 

沒有最好的字體,只有合適的字體,字體的難度并不在于設(shè)計(jì)和選擇上,而是在于你選擇或設(shè)計(jì)的字體給讀者的感覺是否符合產(chǎn)品所想表達(dá)的亦或是讀者所需要的。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

 

用圖形排版法,解決空白單調(diào)的海報(bào)

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

排版就是要將版面中必要的元素進(jìn)行有序組織、擺放,在空空如也的畫板里把一堆雜亂無章的東西排得好看并不容易,簡(jiǎn)單的對(duì)齊排列?結(jié)果可能是既單調(diào)又呆板,如果全憑感覺加些幾何大色塊,又覺得太大眾,且跟自己的品牌和主題沒有直接的關(guān)聯(lián),怎么辦?今天蔥爺給大家分享一個(gè)實(shí)用的排版方法:圖形排版法。

什么是圖形排版法?說白了其實(shí)就是用圖形來承載文字或者圖片。

圖形排版好處

1、更易排版:在圖形里排版,可選擇性更少,所以更容易。

2、更有趣:用與內(nèi)容或品牌相關(guān)的圖形排版,本身就是個(gè)有趣的創(chuàng)意。

3、更整體:把設(shè)計(jì)元素聚集于圖形內(nèi)排列,自然顯得更整體。

4、更有助于:信息傳達(dá)圖形本身也可以傳達(dá)出一部分信息。

常用于電商設(shè)計(jì)和海報(bào)設(shè)計(jì)中:

▲用電視機(jī)圖形排列主播頭像和介紹文字

▲用膠片圖形排列圖片和文字

▲用展示架圖形排列游戲裝備和文字

▲用紅包和單據(jù)圖形排列促銷信息

▲用房屋的形式排列信息

▲用購物券的形式排列促銷文字

▲用蒸籠圖形排列圖文

▲用廣告牌的形式排列文字和圖標(biāo)

那么,像上面這種采用圖形排版法的設(shè)計(jì)是怎么操作的呢?可以簡(jiǎn)單分為四步:

一、觀察

觀察版面上需要排列元素的多少與形式。舉個(gè)例子,以下是一本農(nóng)產(chǎn)品小冊(cè)子其中1P的文案,冊(cè)子的成品尺寸為w110x200mm。

客戶只提供了這些文字,從上圖可以看到,字?jǐn)?shù)并不少,且都是關(guān)于企業(yè)介紹的段落文字,顯然這些文字要集中排版,不過如果只是像上圖那樣簡(jiǎn)單的對(duì)齊,未免有點(diǎn)單調(diào),最好引入圖片或者圖形加以豐富,由于沒有合適的圖片,所以我決定采用圖形排版法。

二、思考

用什么樣的圖形才能把現(xiàn)有的元素組合起來呢?圖形的提取和選擇有三個(gè)方向:

1.根據(jù)文字的屬性來選擇圖形,比如下圖需要排版的內(nèi)文是一些優(yōu)惠信息,所以設(shè)計(jì)師選擇用優(yōu)惠券的圖形來承載文字。

2.根據(jù)圖片來選擇圖形,比如下圖需要排列的元素中有很多產(chǎn)品,所以設(shè)計(jì)師用盒子與展示臺(tái)的圖形來承載它們。

3.根據(jù)設(shè)計(jì)(品牌)調(diào)性來選擇圖形,下圖是一個(gè)春節(jié)期間的電商側(cè)欄,所以設(shè)計(jì)師用燈籠圖形來作為排版的載體。

現(xiàn)在,我們?cè)倩剡^頭來看看前面說的這個(gè)畫冊(cè)設(shè)計(jì)例子,這里需要排版的元素并無圖片,而企業(yè)簡(jiǎn)介類的文字也提取不出合適的圖形,所以依據(jù)品牌調(diào)性來選擇圖形是最靠譜的,哪些圖形可以使用呢?

由于這是一個(gè)主打天然、健康的農(nóng)產(chǎn)品品牌,所以很容易想到太陽、山、白云、樹、葉子、花等圖形,在這些圖形中,哪一個(gè)最合適呢?

我們可以根據(jù)以下幾條標(biāo)準(zhǔn)來選擇:

1.圖形與品牌調(diào)性要相符;

2.圖形的造型要盡量簡(jiǎn)單;

3.圖形要美觀;

4.要適合承載內(nèi)容;

5.圖形的形態(tài)要適合版面尺寸。

由此可見,葉子圖形是最合適的。因?yàn)槠湓煨妥詈?jiǎn)單比較好承載文字信息,不會(huì)影響到閱讀性,并且也更便于在狹長(zhǎng)版面中運(yùn)用。

三、設(shè)計(jì)與排版

即使確定了采用什么圖形來排版也還有很多要注意的地方,比如同樣一個(gè)元素,可以設(shè)計(jì)成很多不同的圖形,它們所產(chǎn)生的效果也會(huì)有很大差別。一般來說,抽象的、幾何化的圖形會(huì)比具像化的圖形更合適,因?yàn)榍罢吒?jiǎn)潔、更適合排版、更有設(shè)計(jì)感,下圖是樹葉圖形的兩個(gè)不同設(shè)計(jì)方向。

顯然右邊簡(jiǎn)化后的效果比左圖效果更合適。圖形設(shè)計(jì)好后當(dāng)然就要把文字排上去了,文字排版的方式有兩種,一種是沿著圖形的內(nèi)輪廓繞排(如左圖),一種是在圖形輪廓內(nèi)自由排版(如右圖)。

使用第一種排版方式能使文字與圖形結(jié)合得更自然,適合字?jǐn)?shù)比較多且呈段式的文字;使用第二種排版方式的優(yōu)點(diǎn)是不需要完全受限于輪廓,更靈活,適合字?jǐn)?shù)比較少的文案,很顯然,在本例中更適合采用輪廓繞排。

提示:在AI中,把文字工具移動(dòng)到圖形的路徑處,當(dāng)出現(xiàn)如下圖標(biāo)時(shí),單擊鼠標(biāo)左鍵便可以輸入文字了,而且每一行文字的起始都會(huì)沿著圖形的內(nèi)輪廓排列。

在菜單欄文字選項(xiàng)中點(diǎn)擊區(qū)域文字選項(xiàng),即可調(diào)出參數(shù)框,如下圖:

四、補(bǔ)充與優(yōu)化

當(dāng)然,如過版面中只是光禿禿的一個(gè)圖形加上其中的文字,還是會(huì)有些單調(diào),所以需要再加以補(bǔ)充、優(yōu)化,首先要在輪廓之外也放一些文字,比如頁碼和標(biāo)題等,然后背景也可以與圖形呼應(yīng),比如這里用了與葉子呼應(yīng)的森林圖片(背景做了高斯模糊處理)。

現(xiàn)在我們可以看到,版面的右上角明顯有點(diǎn)空,而且整體上還缺少一些對(duì)比關(guān)系,于是我把葉子的圖形復(fù)制出兩片,分別排列在主體右上角和左下角作為點(diǎn)綴,到這里這個(gè)小頁面的設(shè)計(jì)就完成了。

總結(jié)

圖形排版法可以使版面變得更有趣、更有創(chuàng)意,但是用不好也容易造成呆板、生硬的感覺,所以,最好不要把所有文字都限制在圖形范圍內(nèi),上面的例子雖然簡(jiǎn)單,但基本上回答了運(yùn)用圖形排版會(huì)遇到的主要問題。最后請(qǐng)大家記住,版面中沒有哪一個(gè)元素是獨(dú)立的,要始終站在整體的角度來設(shè)計(jì)每一個(gè)局部。

藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

日歷

鏈接

個(gè)人資料

存檔