-
當(dāng)前位置:首頁(yè) > 創(chuàng)意學(xué)院 > 空間設(shè)計(jì) > 專題列表 > 正文
扁平ui設(shè)計(jì)(扁平ui設(shè)計(jì)風(fēng)格 pc)
大家好!今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于扁平ui設(shè)計(jì)的問(wèn)題,以下是小編對(duì)此問(wèn)題的歸納整理,讓我們一起來(lái)看看吧。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè),服務(wù)客戶遍布全國(guó),設(shè)計(jì)相關(guān)業(yè)務(wù)請(qǐng)撥打175-8598-2043,或微信:1454722008
本文目錄:
一、設(shè)計(jì)扁平化APP UI,PS相比sketch的優(yōu)勢(shì)有哪些
兩者涉及的領(lǐng)域不同,沒(méi)什么可比的,sketch就像PS的分支功能,sketch對(duì)于交互、UI上效率大于PS,但是PS在與圖片處理方面性能優(yōu)于sketch,每個(gè)軟件有每個(gè)軟件的優(yōu)缺點(diǎn),取決于你在什么情況下使用。
PS更多的是一個(gè)全面手,不管是平面還是UI,亦或者是其他設(shè)計(jì)方面都能夠做到,但是因?yàn)槭嵌嗝媸?,所以他沒(méi)有哪一方面是特別方便的,可能adobe在定位這款軟件時(shí)候就是這么定位的。
sketch更多的是對(duì)于UI界面設(shè)計(jì)的使用,在圖片處理上很差,但是能夠進(jìn)行矢量圖形制作,導(dǎo)出的文件也能夠保持最大的清晰度。最大的好處是在UI設(shè)計(jì)中不管是切圖還是標(biāo)注還是導(dǎo)出素材文件,都能夠很快捷的完成。
二、2013年UI設(shè)計(jì)開(kāi)始流行扁平化了嗎?
大多數(shù)的設(shè)計(jì)師都傾向于使用大膽鮮艷的顏色。那么,如何讓扁平化設(shè)計(jì)在色彩上與眾不同呢?設(shè)計(jì)師正在不斷地增加色彩層次,將原本的一兩個(gè)層次層加到三個(gè)、四個(gè)甚至更多。這些色彩的亮度和飽和度大都非常高。在進(jìn)行扁平化設(shè)計(jì)時(shí),傳統(tǒng)的色彩法則就不適用了,轉(zhuǎn)而以彩虹色這種流行色來(lái)進(jìn)行配色。扁平化設(shè)計(jì)一般都有特定的設(shè)計(jì)法則,比如利用純色,采用復(fù)古風(fēng)格或是同類色。但并不是說(shuō)這是唯一的選擇,而是這種方式已經(jīng)成為一種流行的趨勢(shì),也更加受大家歡迎。
三、UI設(shè)計(jì)是什么?
什么是UI設(shè)計(jì)?
《百度百科》中對(duì)UI設(shè)計(jì)作了這樣的定義:“UI即User Interface(用戶界面)的簡(jiǎn)稱,UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)?!?span style="display:none">36a創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計(jì)、營(yíng)銷策劃公司
用戶界面(User interface) ,用戶界面是一個(gè)比較廣泛的概念,指人和機(jī)器互動(dòng)過(guò)程中的界面,以手機(jī)為例,手機(jī)上的界面都屬于用戶界面。我們通過(guò)這個(gè)界面向手機(jī)發(fā)出指令,手機(jī)根據(jù)指令產(chǎn)生相應(yīng)的反饋。設(shè)計(jì)這套界面視覺(jué)的人稱呼為UI設(shè)計(jì)師。
我們一般所說(shuō)的UI設(shè)計(jì)多指UI視覺(jué)設(shè)計(jì),主要負(fù)責(zé)APP、Web、H5等頁(yè)面的色彩、布局、icon、字體方面的設(shè)計(jì)工作。但隨著互聯(lián)網(wǎng)的不斷發(fā)展,純視覺(jué)的工作已經(jīng)開(kāi)始日益減少,行業(yè)要求UI設(shè)計(jì)師也要懂點(diǎn)交互設(shè)計(jì)和產(chǎn)品方面的知識(shí),即懂用戶體驗(yàn)設(shè)計(jì)(User experience),國(guó)內(nèi)稱UE,國(guó)外叫UX(全棧設(shè)計(jì)師甚至要懂代碼)。UI設(shè)計(jì)最后產(chǎn)出物是高保真視覺(jué)稿+頁(yè)面標(biāo)注+切圖。
出于成本考慮,有的中小型公司和初創(chuàng)型公司也會(huì)讓UI設(shè)計(jì)師負(fù)責(zé)一些平面類的設(shè)計(jì),如:海報(bào)、宣傳冊(cè)、LOGO等。所以,UI設(shè)計(jì)師如果會(huì)平面設(shè)計(jì)或手繪則是加分項(xiàng),但不是必須項(xiàng),不會(huì)也不用擔(dān)心。
UI設(shè)計(jì)是近年來(lái)關(guān)注度非常高的一個(gè)行業(yè),UI設(shè)計(jì)師也是引發(fā)了很多人的關(guān)注。UI設(shè)計(jì)主要是圖形設(shè)計(jì)和交互設(shè)計(jì)。圖形設(shè)計(jì)就是傳統(tǒng)意義上的美工,以前UI設(shè)計(jì)不受重視,所以美工地位不高,現(xiàn)在隨著UI設(shè)計(jì)的興起,美工也被稱為UI設(shè)計(jì)師。其實(shí)UI設(shè)計(jì)師不是單純意義的美術(shù)工人,而是軟件產(chǎn)品的“外形”設(shè)計(jì)師。交互設(shè)計(jì)主要設(shè)計(jì)軟件的操作流程、樹(shù)狀結(jié)構(gòu)、操作規(guī)范等。
在這個(gè)顏值當(dāng)?shù)赖哪甏琔I設(shè)計(jì)師的水平高低直接決定了互聯(lián)網(wǎng)產(chǎn)品(不倫手機(jī)還是PC)的顏值。撇開(kāi)產(chǎn)品的質(zhì)量,用戶接觸產(chǎn)品的第一印象,就是UI設(shè)計(jì)師的杰作,對(duì)于很多受眾來(lái)說(shuō),一旦產(chǎn)品的顏值/第一印象達(dá)不到標(biāo)準(zhǔn)/審美,那下一步就是直接拜拜了。
一個(gè)好的UI設(shè)計(jì)師,能給予產(chǎn)品一張標(biāo)致的臉,能賦予有趣的靈魂新的價(jià)值,所以說(shuō)UI設(shè)計(jì)絕不是打雜美工。
2.UI設(shè)計(jì)師的分類:
在PC端從事網(wǎng)頁(yè)設(shè)計(jì),我們稱呼WUI(Web User Interface)設(shè)計(jì)師或者網(wǎng)頁(yè)設(shè)計(jì)師。PC端UI設(shè)計(jì),也就是電腦用戶,界面指的就是電腦上的操作界面。像電腦版的QQ,微信,PS等軟件和網(wǎng)頁(yè)的一些按鈕圖標(biāo)等,都屬于PC端UI設(shè)計(jì)。
在移動(dòng)端,從事移動(dòng)設(shè)計(jì)的稱呼為GUI(Graphics User Interface)設(shè)計(jì)師,因?yàn)橐苿?dòng)端會(huì)有大量圖形用戶界面設(shè)計(jì)。也就是說(shuō)手機(jī)上的所有界面都是移動(dòng)端UI設(shè)計(jì)。比如微信聊天界面,QQ聊天界面,手機(jī)桌面,手機(jī)上看到的所有圖標(biāo)界面點(diǎn)了后會(huì)有反應(yīng)都可以理解成移動(dòng)端UI設(shè)計(jì)。
另外還有游戲UI,和其它UI ,比如像VR界面、AR界面、ATM界面、一些智能設(shè)備的界面,比如智能電視、車載系統(tǒng)等等,用戶較少,但又需要,未來(lái)有可能很火,有可能保持現(xiàn)狀。
3.學(xué)習(xí)UI設(shè)計(jì)需要學(xué)習(xí)哪些軟件?
軟件的掌握是一種硬技能,不管我們有多好的想法,都需要好的軟件掌握來(lái)實(shí)現(xiàn)。我們需要掌握軟件的基礎(chǔ)操作,例如Photoshop中的形狀工具、鋼筆工具、文字工具、圖層樣式 。也需要了解曲線、色階這部分圖像調(diào)整功能。下面介紹一些在UI設(shè)計(jì)中常見(jiàn)的軟件。
Photoshop:是一款老牌像素處理軟件。主要處理以像素所構(gòu)成的數(shù)字圖像。在圖像、圖形、文字、視頻、出版等各方面都有涉及。各種設(shè)計(jì)行業(yè)圖形處理都會(huì)用到Photoshop,可以滿足UI界面設(shè)計(jì)的日常需要。
Illustrator :是矢量軟件,廣泛應(yīng)用于印刷出版、海報(bào)書(shū)籍排版、專業(yè)插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁(yè)面的制作等。在處理一些及其復(fù)雜的圖形路徑時(shí)候,可以考慮使用Illustrator ,也有設(shè)計(jì)師所有的圖標(biāo)在Illustrator 中完成,然后連接嵌入到Photoshop。
After Effects:現(xiàn)在扁平化設(shè)計(jì)成為主流,所以動(dòng)效設(shè)計(jì)成為不可或缺的一部分??赏ㄟ^(guò)這個(gè)軟件設(shè)計(jì)動(dòng)效平滑切換界面。
Axure RP:是一個(gè)專業(yè)的快速原型設(shè)計(jì)工具。讓負(fù)責(zé)定義需求和規(guī)格、設(shè)計(jì)功能和界面的專家能夠快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說(shuō)明文檔。
3.學(xué)習(xí)UI設(shè)計(jì)需要構(gòu)建哪些知識(shí)體系?
首先我們要知道在實(shí)際工作中“UI設(shè)計(jì)師主要是做什么事兒?”
APP界面設(shè)計(jì)(IOS和安卓)、網(wǎng)頁(yè)設(shè)計(jì)、banner設(shè)計(jì)、H5界面,這些都必須熟練掌握,也都是重中之重。
經(jīng)過(guò)對(duì)設(shè)計(jì)知識(shí)的重新梳理,我將所需要掌握的基本設(shè)計(jì)技能歸納為以下幾點(diǎn):
色彩:需要理解色彩的基本原理以及配色方法。色彩很難把控,因?yàn)樗苋菀妆贿^(guò)度使用。如果,你還是一個(gè)初學(xué)者,那么盡可能使用柔和的色彩,僅在需要強(qiáng)調(diào)的地方使用更醒目的色彩。
字體與排版:文字往往占據(jù)整個(gè)設(shè)計(jì)內(nèi)容超過(guò)80%的區(qū)域,所以理解如何使用正確的字體和排版方式非常重要。請(qǐng)將內(nèi)容的清晰易讀作為你定義字體和做排版的首要目標(biāo)。
動(dòng)效:動(dòng)效能夠顯著增強(qiáng)一個(gè)應(yīng)用的用戶體驗(yàn)。他們能使你的應(yīng)用更有生氣和迷人,前提是你所設(shè)計(jì)的動(dòng)效快速、流暢,并且是符合用戶預(yù)期的。
圖標(biāo):優(yōu)秀的圖標(biāo)往往與我們每天見(jiàn)到的事物緊密關(guān)聯(lián),比如 相機(jī)、垃圾桶、云等等,能讓人一眼就識(shí)別出它所代表的功能。因此,使用那些具有良好辨識(shí)度的圖標(biāo),避免讓用戶產(chǎn)生混淆。
UI要掌握的知識(shí)技能確實(shí)很多,但是你要是把順序搞錯(cuò)了,你將浪費(fèi)很多時(shí)間,走很多彎路。
先從網(wǎng)頁(yè)設(shè)計(jì)開(kāi)始,同時(shí)學(xué)習(xí)平面設(shè)計(jì)的基礎(chǔ)(三大構(gòu)成,排版配色等)。然后再過(guò)度到APP,這樣你會(huì)相對(duì)容易很多。
圖標(biāo)之類的平時(shí)也需要多畫畫,特別是布爾運(yùn)算要熟練掌握。圖標(biāo)這些可以讓你對(duì)軟件操作更加熟練,對(duì)圖形的把握更加準(zhǔn)確。能夠根據(jù)產(chǎn)品的特點(diǎn)自己繪制一套符合產(chǎn)品個(gè)性的原創(chuàng)小圖標(biāo)。
審美必須長(zhǎng)期去培養(yǎng),做的東西丑,主要是審美差,多看看優(yōu)質(zhì)的設(shè)計(jì)案例,多整理個(gè)人素材庫(kù),看到好設(shè)計(jì)及時(shí)收藏歸類。審美提升這個(gè)過(guò)程是比較漫長(zhǎng)的,只能多看、多分析。累積到達(dá)一定程度,會(huì)豁然開(kāi)朗,立馬開(kāi)竅的。
界面設(shè)計(jì)是最重要、也是最難掌握的。需要多花心思去分析需求,提煉信息,合理的布局排版,遵循交互邏輯,避免犯錯(cuò)。
banner設(shè)計(jì)要加強(qiáng)練習(xí),保證信息傳遞準(zhǔn)確的前提下,提升設(shè)計(jì)形式感,包括文字的變形組合,色彩的搭配,背景氛圍的烘托。這是設(shè)計(jì)師日常工作中非常重要的一部分。
當(dāng)你能輕松的設(shè)計(jì)出合格的界面了,接下來(lái)再搞搞AE小動(dòng)畫,Axure原型等等。記住,一定要抓重點(diǎn),界面設(shè)計(jì)是最核心的。
你一定要做出拿的出手的成套的作品,并且要對(duì)自己做的東西有一個(gè)深刻的理解,要說(shuō)的上來(lái)為什么要這樣去設(shè)計(jì)。
4.UI設(shè)計(jì)師的基礎(chǔ)修養(yǎng)
大局觀
在進(jìn)入一個(gè)未知的領(lǐng)域前,必須先了解這個(gè)領(lǐng)域的架構(gòu),待有了比較全面認(rèn)知后再深挖,這其實(shí)也是大學(xué)專業(yè)課程設(shè)置的思路,先學(xué)習(xí)一門導(dǎo)論課,了解基本概念,再進(jìn)入細(xì)分領(lǐng)域。同理UI設(shè)計(jì),先對(duì)整個(gè)行業(yè)有總體認(rèn)知,再去學(xué)技法層面的內(nèi)容、規(guī)則,慢慢把知識(shí)庫(kù)填充完整,這樣,在學(xué)習(xí)前,就能做到心中有數(shù)。
知識(shí)和技術(shù)基礎(chǔ)
如果說(shuō)程序員一天中大部分時(shí)間都在當(dāng)碼農(nóng),那么設(shè)計(jì)師的時(shí)間都留給了Ps和AI這種圖片處理軟件,而這些也正是“美工”稱呼的來(lái)源。嫻熟的技法,是完美展現(xiàn)設(shè)計(jì)作品的必備條件,作為UI設(shè)計(jì)師,掌握這些常用軟件也就成為了人人都會(huì)的基本功。
繪畫基礎(chǔ)
有人以為,設(shè)計(jì)師只要去圖庫(kù)網(wǎng)站找一些素材,借助工具進(jìn)行修飾即可(這就是真美工了),借鑒固然是一種能力,但當(dāng)你的技法嫻熟到一定程度,就可以嘗試創(chuàng)作,在知識(shí)和技法的積累上創(chuàng)作屬于自己的作品。
各平臺(tái)設(shè)計(jì)規(guī)則
iOS、Android、WP、Windows、Mac OX各個(gè)平臺(tái)都有自己的設(shè)計(jì)規(guī)則和偏好,在移動(dòng)端,連每款機(jī)型的分辨率、狀態(tài)欄高度、導(dǎo)航欄高度、圖標(biāo)尺寸、字體、顏色值都有嚴(yán)格的規(guī)定。遵守這些規(guī)則也是業(yè)內(nèi)的一些最基本的規(guī)矩了。
理解能力
產(chǎn)品經(jīng)理常常會(huì)直接發(fā)需求文檔給設(shè)計(jì),能讀懂產(chǎn)品文檔、快速分析需求,定位出風(fēng)格、色調(diào)、元素,最后迅速把產(chǎn)品需求視覺(jué)化,就是產(chǎn)品經(jīng)理們最愛(ài)合作的設(shè)計(jì)師了。當(dāng)然,與之相對(duì)的溝通能力也非常重要,千萬(wàn)不要發(fā)展成產(chǎn)品經(jīng)理和設(shè)計(jì)師互杠互懟的情況。
5.UI設(shè)計(jì)師的進(jìn)階修養(yǎng)
個(gè)人審美能力
為什么我們總喜歡發(fā)現(xiàn)新的事物并趨之若鶩?讀與設(shè)計(jì)是來(lái)說(shuō)除了應(yīng)用本身生產(chǎn)的優(yōu)質(zhì)內(nèi)容外,設(shè)計(jì)感是很重要的一點(diǎn),那什么是設(shè)計(jì)感呢?投射到設(shè)計(jì)師身上,大概就是設(shè)計(jì)師自身的審美意識(shí)了和認(rèn)同感了。
至于審美意識(shí)要如何培養(yǎng)、提高,日積月累地瀏覽、學(xué)習(xí)、反復(fù)思考、琢磨,一千個(gè)人心中有一千個(gè)哈姆雷特,相信每個(gè)人的積累也會(huì)誕生出不同的東西。
用戶體驗(yàn)
除了設(shè)計(jì)界面的UI設(shè)計(jì)師之外,互聯(lián)網(wǎng)公司會(huì)專門設(shè)置專門的用戶研究中心來(lái)處理用戶體驗(yàn)的種種問(wèn)題。但對(duì)于一個(gè)互聯(lián)網(wǎng)產(chǎn)品的視覺(jué)設(shè)計(jì),懂產(chǎn)品,懂用戶,才能誕生出大眾喜愛(ài)的產(chǎn)品設(shè)計(jì)。
交互設(shè)計(jì)
很多人分不清交互和UI,UI主要做的是圖形用戶界面,也可以稱為GUI設(shè)計(jì)師;交互設(shè)計(jì)主要做處理點(diǎn)事人機(jī)互動(dòng)的界面,任何與機(jī)器打交道的過(guò)程,都需要交互設(shè)計(jì)師來(lái)參與。
但坦白說(shuō),現(xiàn)在的App中,有多少操作能把UI和交互完全清楚地剝離開(kāi)來(lái)呢?一個(gè)好的產(chǎn)品,需要美觀的界面和順滑的交互,也就離不開(kāi)設(shè)計(jì)師兩種能力的相輔相成了。尤其現(xiàn)在,設(shè)計(jì)趨向扁平化的時(shí)期,只要遵循設(shè)計(jì)規(guī)范,交互設(shè)計(jì)甚至能出了設(shè)計(jì)稿后直接給開(kāi)發(fā)去實(shí)現(xiàn),單純UI設(shè)計(jì)的存在感日益弱化。
代碼能力
這幾年互聯(lián)網(wǎng)產(chǎn)品最火的推廣方式是什么?
自然是H5!
那么如果一個(gè)設(shè)計(jì)師既能做好設(shè)計(jì),又能完善布局前端代碼,那么只要有一個(gè)簡(jiǎn)單idea,經(jīng)過(guò)你的手就能完全實(shí)現(xiàn)。這種復(fù)合型人才會(huì)是多少公司爭(zhēng)搶的對(duì)象呢?這就得看你個(gè)人能努力到哪一個(gè)程度了。
四、UI設(shè)計(jì)的風(fēng)格有哪些?
1.半扁平化的設(shè)計(jì)
在過(guò)去的兩年左右,扁平化無(wú)疑是討論最多、最火的設(shè)計(jì)趨勢(shì)。但設(shè)計(jì)趨勢(shì)往往受到媒體,技術(shù),和實(shí)用性的影響,一般都以緩慢漸進(jìn)的方式滲透在我們的設(shè)計(jì)中,周期在1-2年之間。目前已經(jīng)有很多設(shè)計(jì)師對(duì)它進(jìn)行細(xì)微改進(jìn),形成了一個(gè)新的設(shè)計(jì)趨勢(shì)-半扁平設(shè)計(jì)。
半扁平化設(shè)計(jì)說(shuō)直白點(diǎn),其實(shí)就是結(jié)合了materialdesign和flatdesign兩種風(fēng)格的處理手法。使簡(jiǎn)潔的設(shè)計(jì)上多一些空間感,包括懸浮的按鈕和卡片的設(shè)計(jì)。按照Wired的話來(lái)說(shuō),那就是讓像素具備海拔高度,這樣子的話,系統(tǒng)的不同層面的元素,都是有原則、可預(yù)測(cè)的,不讓用戶感到無(wú)所適從。
2.更多三維呈現(xiàn)
在以前,UI或運(yùn)營(yíng)設(shè)計(jì)中常見(jiàn)的都是二維的處理手法。元素以平面的方式展示給我們,但是今年會(huì)慢慢趨于更多3D的效果,使內(nèi)容更加有縱深感從而也提升了設(shè)計(jì)的趣味性,尤其是運(yùn)用在運(yùn)營(yíng)設(shè)計(jì)上會(huì)讓畫面顯得更加豐富。
3.幾何圖形的點(diǎn)綴
從2016年年底就有一些設(shè)計(jì)作品或者設(shè)計(jì)包裝采用不同顏色的幾何圖形進(jìn)行點(diǎn)綴。它不是作為設(shè)計(jì)內(nèi)容的主角,而是起到渲染畫面氛圍的作用。用色一般鮮亮大膽,會(huì)給人視覺(jué)上的沖擊,多用于運(yùn)營(yíng)設(shè)計(jì)。
4.漸變色的運(yùn)用
漸變色的運(yùn)用范圍很廣,它可以當(dāng)作背景使用,也可以在logo或者按鈕上使用。今年的漸變不再是像擬物化時(shí)代為了還原物體本身的空間所做的處理。這里的漸變多為大撞色的使用,為了營(yíng)造氛圍和產(chǎn)品氣質(zhì)使用。
5.大標(biāo)題,大間距的處理
預(yù)測(cè)今年將會(huì)有越來(lái)越多優(yōu)秀的產(chǎn)品跳脫出系統(tǒng)本身規(guī)范的束縛,開(kāi)始更大膽的設(shè)計(jì)。不在局限于本身規(guī)范里最大字號(hào)不能超過(guò)多少px,間距最好在稍稍px之內(nèi)等等…而是針對(duì)不同場(chǎng)景,不同用戶群體,不同的內(nèi)容去特殊處理。
以上就是關(guān)于扁平ui設(shè)計(jì)相關(guān)問(wèn)題的回答。希望能幫到你,如有更多相關(guān)問(wèn)題,您也可以聯(lián)系我們的客服進(jìn)行咨詢,客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。
推薦閱讀:
vi設(shè)計(jì)扁平風(fēng)(扁平風(fēng)設(shè)計(jì)產(chǎn)品)
餐飲品牌設(shè)計(jì)扁平風(fēng)(餐飲品牌設(shè)計(jì)扁平風(fēng)格圖片)
扁平vi設(shè)計(jì)ps(扁平化設(shè)計(jì)ps制作教程)
上海專業(yè)vi設(shè)計(jì)是什么(上海專業(yè)vi設(shè)計(jì)是什么專業(yè))
聊城找抖音代運(yùn)營(yíng)公司地址(聊城找抖音代運(yùn)營(yíng)公司地址電話)