守望者

摘:大家在設計時不要只研究競品,這里我不是說看競品和參考不重要,而是提醒大家在設計時要有目的,要構建自己的設計原則,便于我們設計、優化時自查。

在做設計時,你是否出現以下情況:
“離開競品參考就不知道如何設計”
“領導叫優化產品,只能想到優化圖標、間距,腦子一團亂麻”
?
為什么會出現這樣的情況呢?
究其根本是我們沒有設定設計原則,導致我們沒有清晰的優化和設計目標,因此如果你也有有出現上面的情況,那么建議大家可以去研究下適合你們公司的設計原則。
?
接下來要和大家分享的主要有三個方面:
1、設計原則的重要性
2、學習大廠的設計原則
3、構建自己的設計原則
?
?

一、設計原則的重要性

設計原則就像做人的原則一樣, 有原則的人做事果斷、能明確知道哪些事兒能做,哪些不能做,有原則的人我們會覺得他靠譜;而沒有原則的人,做事主要看心情,心情好就做得好,心情不好就不做,沒有原則的人我們會覺得他不靠譜。
?
設計也是一樣,如果你的產品沒有設計原則,那么我們的設計就主要依靠設計師的經驗和參考,如果這兩者都沒到位,那么就會出現我們上面說的不知道如何設計的問題。如果你有原則,那么我們一切設計都可以根據設計原則來定,參考只是一個輔助。比如很多的設計原則都有簡潔,如何做到簡潔?
?
在《簡約至上》一書中就針對的說了簡約四要素:刪除、組織、隱藏、轉移。
?
?
那么我們在設計或優化產品時,就可以從這四個策略出發。
?

1、刪除

在書中提到“簡化設計最明顯的方式就是刪除不必要的功能”,不過作為設計來說功能屬于產品層面的,我們很難去決定這個功能的去留,但我們可以刪除一些不必要的交互、不必要的輔助信息、不必要的視覺裝飾、不必要的控件、不必要的文案等。

比如上圖這種引導,消息中心、金剛區、紅包、掃一掃、客服一眼就能看出,并沒有必要做引導,可以刪除。所以在優化時我們就可以根據原則進行檢查,這樣才能更好的發現問題。
?

2、組織

書中還提到”組織往往是簡化設計的最快捷的方式”,組織我們在界面設計中常常會用到。他可以用在界面整體框架的重新組織,也可以用在某個模塊內部的內容組織,只有通過組織,將模塊或者內容按照優先級排列,在設計時我們才能夠突出重點鮮明,不然你的界面就真的是在原型圖上色了。

比如左圖是直接按照原型圖進行設計,未經過組織,從界面上看沒有重點,只是信息的羅列,同時一屏可展示的信息較少。而右圖將審核狀態提出,同時將出行信息樣式進行簡化縮短卡片高度,讓用戶能夠輕松的抓住信息的主次,提高瀏覽效率。?
?

3、隱藏

書中提到”隱藏部分功能是一種低成本的方案,具體隱藏哪些功能,就看是不是主流用戶很少使用,但是又很必須的功能或內容”,如果是我們就可以將其隱藏起來,當需要使用時我們在將其打開。

比如馬蜂窩個人中心將不常用的功能區進行隱藏,當需要使用時在將其打開即可,提高界面的利用率。?
??

4、轉移

書中提到”轉移這個策略其實是一種“騙術””,它就像能量守恒一樣,只是讓復雜的操作或內容從一個地方轉移到另外一個地方去,讓我們感覺變簡單了。比如我們現在的智能機只有一個按鍵,現在的全屏連一個按鍵都沒有,相對于老式的實體鍵盤機他變簡單了,但是他并不簡單,他只是將這些操作轉移到了虛擬的控件中。而在界面設計中也是一樣,我們可以將復雜的內容轉移給系統。?
比如淘寶的語音搜索,就將手動輸入的不便捷轉給了系統,我們只需要打開說就可以了;菜鳥的圖片識別,也將輸入轉給了系統,讓我們不再打字了,通過轉移他讓我們的用戶感覺簡單了。以上就是遵循簡潔原則我們做出的相應策略,當你在簡化產品時你就可以從這四個策略進行考慮。
??
策略一:該界面是否有不必要的功能、控件、樣式等可刪除;
策略二:信息層級是否表達清晰,用戶是否容易理解,如果不能那么就可以按照一定規則進行組織;
策略三:是否有主流用戶不常用,但是會用的功能或內容,可將其隱藏。
策略四:該功能是否可以轉移到其他地方,讓用戶感覺很簡潔。
?
最后,大家是否發現,有無設計原則區別是很明顯的,沒有原則我們在優化時更多的是會去找競品,而有原則我們在優化時會更有節奏,同時就算沒有競品,我們也可以去找方法,這樣也有利于我們更好的創新,所以設計原則真的很重要。?
?
?

二、學習大廠的設計原則

上面提到的簡潔原則只是產品設計眾多原則中的一個,為了設計一個好的產品,我們還需要設定其他的原則,具體如何設定呢?最快捷的方法就是學習各大廠產品沉淀下來的原則,然后在根據自身項目的情況、要求來選擇適合的。在學習大廠的規范時,我們主要看三個方面:設計指南介紹、設計原則、案例介紹。
?
?
設計指南:主要讓我們了解他們設定這個設計原則,是出于什么目標,這樣我們就可以想想是否適合我們。
設計原則:把各大廠的設計原則整理起來,便于我們對比。
案例介紹:案例介紹這塊推薦大家著重去看,便于理解。
?
下面我推薦大家優先看微信小程序、Ant Design的設計原則,因為他們的設計原則有詳細的案例說明,更能便于我們理解,看完之后還推薦大家去收集一些其他的設計原則進行對比,拓寬自己的眼界,這樣才能更好的構建自己的設計原則。?
?

1、微信小程序

比如我們學習微信小程序的設計原則時,首先查看其設計指南:基于輕快的特點,旨在微信生態體系內,建立友好、高效、一致的用戶體驗,同時最大程度適應和支持不同需求,實現用戶與小程序服務方的共贏。

然后,我們在來看他的設計原則:友好禮貌、清晰明確、便捷優雅、統一穩定,都是基于他設計指南的要求得出來的。

然后,繼續拆分,就可以拆分出具體的設計策略,比如要做到友好禮貌的原則,要求我們的設計要重點突出、流程明確。要做到便捷優雅,就要求我們設計時減少輸入、避免誤操作、利用借口提高性能等。

最后,我們在詳細看他舉的例子,能夠幫助我們更好的理解具體該如何思考和運用。比如友好禮貌的第一個策略,重點突出,他要求“每個頁面都應有明確的重點,以便于用戶每進入一個新頁面的時候都能快速地理解頁面內容。在確定了重點的前提下,應盡量避免頁面上出現其它與用戶的決策和操作無關的干擾因素?!?/p>

?
然后,我們看看他提供的案例對比圖,是不是能夠很清晰的看到左圖頁面簡明扼要,重點突出,無過多的干擾,而右圖焦點過多,邏輯不清晰。其每個設計原則后都配了類似的案例,相信你如果認真看完,收獲一定比較大。
??

2、Ant Design

在和大家一起看看Ant Design的設計指南,他是基于價值觀(自然、確定性、意義感、生長性)衍生出的一般設計技巧,包括如何高效組織信息、幫助建立用戶與界面的互動等原則性要求。

Ant Design的設計原則有:親密性、對齊、對比、重復、直接了當、足不出戶、簡化交互、提供邀請、巧用過渡、即時反應。

?
大家通過圖可以看到,Ant Design的設計原則會更加具體,對于設計的指導性更強,我們通過上面的圖基本有個大致的了解,其中親密性、對齊、對比、重復、直截了當、簡化交互,不管是成熟產品還是0到1的產品,在設計時基本都是要考慮的。接下來我們繼續來看案例介紹,比如親密性的原則,他指出”如果信息之間關聯性越高,它們之間的距離就應該越接近,也越像一個視覺單元;反之,則它們的距離就應該越遠,也越像多個視覺單元。親密性的根本目的是實現組織性,讓用戶對頁面結構和信息層次一目了然。”
然后他通過通過「小號間距8px」、「中號間距16px」、「大號間距24px」這三種規格進行層次的劃分。
?
通過對比你會發現,Ant Design中的親密性是為了突出重點,劃分界面層次,將信息更好的組織。而微信中的友好禮貌,也是為了重點突出、流程明確,將信息更好的組織在一起。
?
不同的是站的角度不同,表達方式不一樣,Ant Design從設計角度出發,通過看他的設計原則,基本就知道該如何設計,指導性更強,而微信小程序從用戶角度,強調友好禮貌,一切設計都是從用戶的角度出發。因此你在設定前一定先想好是從什么角度來確定原則,從而才好確定具體如何表達。
??

3、對比各大廠的設計原則

還是那句要想設定一個合適的設計原則,你需要多看多對比,找出他們的共同之處,那么這個共同之處我們就可以將其提煉出來,然后在根據實際進行選擇、補充。

下面我找了Apple、Airbnb、Element、Facebook的設計原則,大家可以在結合微信、Ant Desgin進行對比下。

通過提煉,我們可以大致得到一些公共的設計原則:統一、簡潔,這幾乎是每個設計原則必備的,而其他的原則就需要根據你產品當前所處的階段進行補充了。
(PS:關于各大廠的設計原則,請到文章底部查看。)

??
??

三、構建自己的設計原則

上文第二點我們提到,構建自己的設計原則我們首先需要確定自己的設定的角度,是在用戶角度設定,還是設計角度設定。比如對于初創產品來說,大家的精力都還在功能至上的階段,這時候要去開研討會設定設計原則有點不可能。因此這個階段的設計原則的設定,更多的是自己定自己用,給自己起到指導和自查的作用。
?
下面我就以站在設計自用的角度來看看該如何設定設計原則呢?
通過對比提煉,我們可以發現,簡潔、統一幾乎是每個設計原則都有的,盡管他們的名字、原則細化的程度不同,但是其最終的目標都是讓界面更易操作、降低用戶的理解成本,有統一的視覺體驗等。?
?
?
這樣我們就得到了一個基礎的原則,然后我們可以在根據實際的情況進行加減。比如Airbnb的全球化、Apple的整體美學、Facebook的人性化就是根據公司當前的發展愿景提出的。
?
由于我們公司大多都是0-1的產品,要求更多的就是有用、操作便捷、效率高,因此我根據我當前的需要,整理了一份基礎的設計原則,便于自己更好的進行設計。
?
?
當然也許你剛開始設定的原則可能會有問題,實操性不強,這就需要我們不斷學習,不斷的去更新我們的設計原則了,這樣每次做設計或優化時會更有目的。?
?
?

四、劃重點

最后想和大家說的是,大家在設計時不要只研究競品,這里我不是說看競品和參考不重要,而是提醒大家在設計時要有目的,要構建自己的設計原則,便于我們設計、優化時自查。?
?
?
參考引文
(1)微信小程序設計原則? http://dwz.date/aTcq
(2)Ant Design設計原則? http://dwz.date/aTcr
(3)Apple設計原則? http://dwz.date/aTcs
(4)Airbnb設計原則? http://dwz.date/aTcw
(5)Facebook設計原則? http://dwz.date/aTcx
(6)Element設計原則? http://dwz.date/a5Fy
(7)設計原則集合? http://dwz.date/aTc2
(8)《簡約至上:交互式設計四策略》? Giles Colborne
??
??
原文地址:海鹽社(公眾號)
作者:風箏KK

轉載請注明:學UI網 » 沒有競品參考就不知道如何設計,什么情況?

登錄收藏
 
你可能喜歡的:
Material Design Data Format 數據格式Material Design Data Format 數據格式
剖析“界面設計”之頁面基本元素(上)剖析“界面設計”之頁面基本元素(上)
Material Design Confirmation &Acknowledgement 確認&通知Material Design Confirmation &Acknowledgement 確認&通知
設計系統的道與術——下篇設計系統的道與術——下篇
3點提升發布流程設計3點提升發布流程設計
不懂如何設計小程序?來看這份超全面指南!不懂如何設計小程序?來看這份超全面指南!
【面試題】喵街tab商城頁改版總結【面試題】喵街tab商城頁改版總結
提高落地頁轉化,按鈕在左?按鈕在右!提高落地頁轉化,按鈕在左?按鈕在右!
Material Design States 狀態Material Design States 狀態
Material Design Selection 選擇Material Design Selection 選擇
?
类似钱咖的高额赚钱 河北20选5开奖结果走势 管家婆期期准免费资料彩图开奖结果 股票上证指数 江西快三哪个平台能玩 福建十一选五开奖结果走势图 百度 第三方理财平台 排列3试机号今天 北京pk赛车开奖历史 北京股票期货配资 广西快乐十分开奖结果