毅耘資
返回列表
靈魂大法!界面設計四大招
靈魂大法!界面設計四大招2018-03-06毅耘科技1396

靈魂大法!界面設計四大招

【毅耘科技】

在設計界面的時候要注重整體條理的把控,注重主要信息和次要信息的分布的同時,我們還需要使用元素來凸起產品的獨特征和雄厚性。

一個好的產品首先需要保證他的易用性,不要讓用戶想,直接就能找到他想要的信息。

那怎么讓一個好用的產品錦上添花,發揮出潛在的光芒呢?

這個小結我和大家一路解構一下元素在界面中的主要性,重新打開設計的再創造力!

常用的體例有哪些?

最為基礎的就是我們常說的點、線、面就是元素的組成體例。

先說說點線面

在哲學上的定義:點就是宇宙的起源,沒有任何體積,被擠在宇宙的“邊緣”;點是所有圖形的基礎。線就是由無數個點連接而成的。面就是由無數條線組成.。

在視覺層面上我們可以這樣理解

靈魂大法!界面設計四大招

點:點綴(目的雄厚畫面,活躍氣氛)

線:聯系(具有指導性,貫穿畫面)

面:重點(主要信息呈現,有分量感)

靈魂大法!界面設計四大招

一句話把重點串聯起來就是點線面
靈魂大法!界面設計四大招

靈魂大法!界面設計四大招

從點線面中我們運用到了元素,而這些元素就是我們構成畫面的最主要的因素。

元素不僅起到了點綴作用,雄厚了產品內容,并且元素讓產品設計散發了他獨特的光芒和銳氣。

在設計過程中我們要學會提取點元素。一個好的產品他的點元素是同一的,貫穿于整個產品風格。

好了,那我們就開始解構元素大法的奧義吧~

第一招:極簡即逼格

靈魂大法!界面設計四大招

在頁面的設計中我們可以選擇最為簡單的幾何圖形作為元素,設計出來的界面特色更為濃烈。在使用這種幾何元素的時候,注重產品的氣質尤為主要。把握好頁面的功能關系,準確將元素化為點線面融入到界面中。界面節奏會越來越雄厚化!

下面我們來解構一下幾組界面的設計

靈魂大法!界面設計四大招

 

圖中是運動型的界面,融入了動感的菱形四邊形元素,使界面倏忽生動而活躍了起來。其中有點式的四邊形也有面式的四邊形及線式的四邊形。

經過分析效果得出

靈魂大法!界面設計四大招

點狀化的四邊形則運用在頁面提醒中

線式的四邊形運用在功能類別的展示中

面式的四邊形運用在功能點上

有道詞典APP

設計也運用到了相似的角度設計,從而有用的體現出有道的詞典的獨特征。運用了即詞典翻閱的橫切面,小我感覺這個角度是從這來的吧~

同樣在輸入框和功能劃分中運用到劃分式的四邊形線。在功能按鈕在則運用到了面狀式的菱形四邊形。和上面的設計是一樣的道理。

靈魂大法!界面設計四大招

靈魂大法!界面設計四大招

第二招:品牌中找靈魂

靈魂大法!界面設計四大招

產品的LOGO是品牌的象征,在LOGO中去延展出元素,能使整個產品的品牌傳達性更為一致。

下面是我比較喜好的一款APP“想去”,口號主打為“買的起的設計”的一款電商app。

這款APP將LOGO的線式箭頭融入到了迎接頁、菜單鍵、下拉動畫、默認圖片中,很好的將產品的獨特征反應給用戶,讓用戶深刻的記住了產品的形象。這樣的設計能使產品在眾多APP中散發出自己獨特的光芒。

很有趣的是上拉刷新動畫是鯊魚追逐小魚的線條,將LOGO元素結合在動畫中。有時候老會去刷新,只為看一眼這么萌的動畫。

靈魂大法!界面設計四大招

第三招:將形象化為魂魄

靈魂大法!界面設計四大招

產品的主題形象其實就是產品的用戶角色,好的形象能反應出產品的用戶行為。讓用戶身臨其境,找到共同點和愛好。將用戶的性格、行為、場景化身在產品角色中,這樣的產品才能化腐朽為神奇!找到自己的靈魂。

首先我介紹一下這是自己負責的內涵段子項目,內涵段子的形象就是段子哥,將段子哥映入到指導頁中,讓用戶置身于場景中體味到產品形功能的特征。一個角色一個故事,這就是親和力!在設計中延展出了段子哥的表情設計并運用在視頻加工工具中,更多的然產品形象推廣出去。這就是段子的魅力!讓用戶不在寂寞。

靈魂大法!界面設計四大招

天貓

他的形象可堪稱天神下凡!怎么說是非凡呢?下面我們看看他形象來源。

這產品的LOGO提取可稱是乾坤大挪移啊,LOGO一出,就轟動了江湖,這可以看出元素的提取是多么的主要?。?!
靈魂大法!界面設計四大招

提取了形象后,同一運用在產品的頁面中,宣傳中。將天貓的理念是傳遞的淋漓盡致。

靈魂大法!界面設計四大招

靈魂大法!界面設計四大招

飯飯APP夙起的版本,形象也是深入人心,我一向還保留著。

靈魂大法!界面設計四大招

曾經火爆的社交簽到軟件“街旁”,也運用到了形象化的設計。將產品生動的顯現給用戶,也留下了深刻的印象。
靈魂大法!界面設計四大招

舉了這么多的例子,相信大家對于形象給產品帶來的性格特點和指導性有所了解吧,下面我們來介紹一下生命的另一種體現體例。

第四招:運動賦予生命

靈魂大法!界面設計四大招

在界面設計中我們常常會因為一些小動畫,而這些小動畫元素讓整個設計賦有了生命感!好的設計是能讓用戶感知到他的溫度。

“MONO”是一款輕量閱讀的APP。他上面運用到了極簡的圓形,并把簡單的圓用呼吸的小動畫進行了再加工。讓產品顯得更為有生命力。同一的圓形點設計不僅雄厚了產品視覺,更使用戶在使用的過程中有驚喜感,增添用戶的活躍度與粘性。
靈魂大法!界面設計四大招

有點意思這款APP是我2014年設計的版本,將小動畫元素融入到產品的菜單中。

取巧性的區分了菜單圖標點擊和未點擊的效果,讓表情元素融入到操作中。從而與體驗結合的更為緊密。
第二個小動畫的創意也是操作性的設計。用戶在評價一個段子是不是好笑的時候,希望得到一個反饋。那么在設計中將點擊后的效果,做成了百分比的加載動畫從而翻譯了一個操作后的數據。這樣的小動畫能讓用戶更為有參與感,使用戶更愿意去產生這樣一個點評。

靈魂大法!界面設計四大招

番外:菜單三進擊!
靈魂大法!界面設計四大招

寫到這得時候想到了APP中常見的就菜單的設計了

目前菜單圖標設計是各種各樣,我也許分了三類。從基礎類—品牌類—互動類別,當然這也是產品界面元素特別很是主要的一部分。

基礎類,其實就是系統級的圖標,識別性強但沒有啥特色,比較直觀。大家可以看看蘋果自帶的這些菜單的設計,基本都是以線描和反白的效果為主。

靈魂大法!界面設計四大招

到了后期三方的APP各自萌芽出自己的品牌性格,有了較為特色的菜單圖標。從而區別了產品之間的記憶。
靈魂大法!界面設計四大招

到了現在,移動互動時代的來臨,各種穿戴設備、智能家居的興起。更為注重互動的體驗感,而在APP界面元素菜單中運用到了動效。讓人機交互有了更多的想象空間!

大家可以體驗一下新版的58同城APP,在動效上有了許多的嘗試。

靈魂大法!界面設計四大招

今天說了啥,元素大法,你會了嗎?

這些方法希望能幫助大家擴散思維,不僅在需要注正視覺上的同一性,還要增強設計的驚喜感。一個產品是否合格在于他有沒有按規章在設計,而產品的傳遞正是這一個一個亮點才使得產品深入人心。

總的來說,做用戶想要的,讓用戶得到他所驚喜的!

靈魂大法!界面設計四大招

作者:王鐸(MICU設計)投稿

本文標題:靈魂大法!界面設計四大招

本文網址:http://www.sontosi.com/news_detail/id/891.html

原創網址:小程序開發公司< 毅耘科技 >版權所有,轉載標明出去,并以鏈接形式鏈接網址http://www.sontosi.com/

文章標簽: 合肥小程序開發 合肥小程序

毅耘科技(www.sontosi.com)提供小程序開發,微信開發,商城小程序,小程序定制開發,新零售O2O模式,餐飲,社區,門店,教育,預約,微信小程序微信商城,解決方案,一站式全商業小程序平臺,是專業為企業提升價值的公司

相關文章

友情鏈接: 合肥網站優化  知識付費平臺  合肥網站建設  手機商城系統  合肥app開發 
安徽毅耘科技有限公司 版權所有 Copyright ? 2017 All Rights Reserved 法律聲明 皖ICP備17006053號    XML地圖/ 網站地圖
關閉 内页底部: 五十老熟妇乱子伦免费观看,A片无码免费视频在线观看,日本人成网站18禁止久久影院,国产毛1卡2卡3卡4卡免费观看
<蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>