手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

首頁

fltk,qt,codesys控件界面設(shè)計(jì)和開發(fā)及測試

藍(lán)藍(lán)設(shè)計(jì)的小編

Fltk是一個(gè)輕量級的界面庫,但網(wǎng)上相關(guān)內(nèi)容較少,多已過時(shí)。學(xué)習(xí)這個(gè)的很多都是嵌入式開發(fā)者,但是現(xiàn)在Qt等發(fā)展得很好,估計(jì)用Fltk的更少了吧。不過有一些單位,比如:列車顯示屏上,就在用fltk開發(fā),藍(lán)藍(lán)設(shè)計(jì)就在和中車下屬的某研究所做相關(guān)的開發(fā)項(xiàng)目。也同時(shí)在做codesys界面設(shè)計(jì)和開發(fā),這是新一代顯示器上用的。fltk上要設(shè)計(jì)美觀的和創(chuàng)新的界面,在實(shí)現(xiàn)上的確有點(diǎn)困維, 這個(gè)軟件不太支持透明,圖標(biāo)的實(shí)現(xiàn)效果需要一個(gè)像素一個(gè)像素的繪試。在圖片的使用上,老的顯示屏上的cpu內(nèi)存有限,貼圖好看但太占內(nèi)存,如果在fltk中重畫,會(huì)花很多時(shí)間。

fltk是一個(gè)在界面設(shè)計(jì)方面有局限性實(shí)現(xiàn)效果的軟件,相對來講codesys這個(gè)平臺就方便多了。

三條路徑成為經(jīng)驗(yàn)豐富的設(shè)計(jì)師

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

高級設(shè)計(jì)師并不是一個(gè)終點(diǎn)。新年目標(biāo):三條路徑成為經(jīng)驗(yàn)豐富的設(shè)計(jì)師

956790.png

如何理解“風(fēng)格”的含義

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

什么是?格?


最早的?格是在藝術(shù)品上形成的,它呈現(xiàn)出了具有代表性的特征,藝術(shù)家由于不同的生活經(jīng)歷、藝術(shù)素養(yǎng)、差異化審美,通過作品去表達(dá)自己的情感、反映社會(huì)環(huán)境…例如莫奈,在他的油畫中運(yùn)用對色彩、光影的理解,擺脫之前的寫實(shí)主義畫?,領(lǐng)導(dǎo)印象派的誕生,我認(rèn)為?格,無法用一個(gè)簡單的詞匯去定義,舉個(gè)例子,比如我感覺一個(gè)人很強(qiáng)勢,這是通過他平常的做事方式,衣服的搭配,走路的姿態(tài),說話的語氣去塑造出來的這種感覺,同理在設(shè)計(jì)中要想形成?格也應(yīng)該是從多方面去塑造,我并不認(rèn)同換個(gè)顏色=換個(gè)?格這種事情,縱觀各領(lǐng)域中app同質(zhì)化嚴(yán)重,表面上顏色不同,排版不同,實(shí)際上都是一樣。Image title

拿數(shù)據(jù)說話,從哪拿

藍(lán)藍(lán)設(shè)計(jì)的小編

如果你真能知道,數(shù)據(jù)在哪里,數(shù)據(jù)怎么讀,互聯(lián)網(wǎng)對你而言,沒有秘密,想做什么事情,會(huì)簡化很多倍。

很多人說,我沒數(shù)據(jù)怎么辦???其實(shí)數(shù)據(jù)俯拾皆是,互聯(lián)網(wǎng)各種信息都是公開的,甚至是泛濫的。

百度指數(shù),谷歌趨勢,這是眼見的。

淘寶的熱榜,以及銷量分布,很多數(shù)據(jù)都可以拿到。

第三方數(shù)據(jù)報(bào)告,是,有水分,但是很多是值得看的。

各大公司的財(cái)報(bào),招股說明書,不是說為了買股票才看,看業(yè)務(wù)趨勢,看行業(yè)走勢,很多值得看的東西。

那么,有人說,我不看這些數(shù)據(jù),我看我們產(chǎn)品數(shù)據(jù),但是開發(fā)人員推三阻四總不給做,其實(shí)公開的數(shù)據(jù)統(tǒng)計(jì)工具已經(jīng)很強(qiáng)大了,百度統(tǒng)計(jì),CNZZ,谷歌統(tǒng)計(jì)(話說會(huì)用谷歌統(tǒng)計(jì)的真不多),那么有人說了,我要的這些統(tǒng)計(jì)沒有;其實(shí)未必是沒有,很多是因?yàn)槟悴粫?huì)用,比如百姓網(wǎng)在北京Qcon架構(gòu)師大會(huì)上分享了如何利用谷歌統(tǒng)計(jì)分析各地用戶的訪問速度分布,讓我也很受啟發(fā),那份文檔在互聯(lián)網(wǎng)上是公開的,自定義代碼只有兩行,關(guān)鍵是思路。


如何在設(shè)計(jì)中充分利用數(shù)據(jù)

藍(lán)藍(lán)設(shè)計(jì)的小編

36大數(shù)據(jù)

知道了大家關(guān)注什么這就是非常棒的信息,但是想象一下他們?yōu)槭裁磿?huì)關(guān)注這些話題,以及對我們又有什么幫助,或者更好的是:如何才能更加滿足他們?

理解好“為什么”能讓我們?yōu)橛脩魟?chuàng)造更多的參與體驗(yàn),從而增加我們的產(chǎn)品或服務(wù)的整體價(jià)值。

“不要只在意數(shù)據(jù),心里還要有一個(gè)特定的目標(biāo)?!?

如何在設(shè)計(jì)中充分利用數(shù)據(jù)


設(shè)計(jì)中的視覺流與節(jié)奏規(guī)律

藍(lán)藍(lán)設(shè)計(jì)的小編

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


當(dāng)有人登錄到你的網(wǎng)站,你想讓瀏覽者做什么?看哪里?注意到什么信息?而這些信息的順序又是什么?

理想情況下,你想讓人們先注意到最重要的信息,然后是次重要信息。你甚至想讓你潛在客戶確信他們看到的信息,并且想要通過點(diǎn)擊“購買”按鈕來購買內(nèi)容。你也希望人們出現(xiàn)在正確的時(shí)間,看到合適的信息,那么你要做的就是控制好你設(shè)計(jì)中的視覺流


通過設(shè)計(jì),視覺流決定和引導(dǎo)了視覺的方向:起先應(yīng)該看哪兒,接下來應(yīng)該注意什么,眼睛應(yīng)該在哪停留,并且要停留多久。


設(shè)計(jì)模式:缺乏視覺流引導(dǎo)的設(shè)計(jì)


在之前的帖子中我講過視覺重量并且我提到過Rudolph Arnheim的結(jié)構(gòu)網(wǎng)。你應(yīng)該細(xì)讀一下,大概意思是說在矩形畫布的中心和畫布的四個(gè)角就像磁鐵一樣吸引著你的眼球。隨著這些視覺焦點(diǎn)便會(huì)產(chǎn)生軸線,你的眼睛也會(huì)跟著它從一個(gè)焦點(diǎn)到另一個(gè)焦點(diǎn)。

Arnheim的結(jié)構(gòu)網(wǎng)不是唯一的一種模式,視線會(huì)隨著這個(gè)結(jié)構(gòu)自然的移動(dòng)。古騰堡的古騰堡圖表(大家可以自行學(xué)習(xí)一下,小編不在這里做過多解釋,平面設(shè)計(jì)里的邏輯,了解后對各位在做設(shè)計(jì)可能會(huì)有幫助), F形布局模式和Z字形布局模式都會(huì)引導(dǎo)觀者的視線隨著設(shè)計(jì)模式自然移動(dòng)。


注意:這些模式是根據(jù)我們通常閱讀順序從左到右總結(jié)出來的,同時(shí)也會(huì)為其它閱讀方式做指導(dǎo)。

古騰堡圖表:在這個(gè)模式中眼睛通常會(huì)從左上角到右下角瀏覽,經(jīng)過 Arnheim結(jié)構(gòu)的視覺中心。而缺少注意力的區(qū)域是一個(gè)被叫做缺乏活躍度的區(qū)域(視覺盲點(diǎn))。所謂的閱讀重力是由于視線趨向于從上到下,從左到右的眼動(dòng)規(guī)律,左上角是第一視覺落腳點(diǎn),右下角是最終視覺落腳點(diǎn),所以右上角和左下角都是一個(gè)強(qiáng)烈的視覺盲點(diǎn)區(qū)域,大多數(shù)是容易被忽略的。

F形的布局模式:在這個(gè)模式中,眼睛從左上角開始,向畫布的右邊移去,然后在向下移動(dòng)一點(diǎn),重復(fù)之前的移動(dòng)模式。而一般這個(gè)模式就像字母F的形狀。 

Z字形布局模式:眼睛從左上角向右移動(dòng)。在視線移到右上角后沿著斜對角向下方走,然后視覺再次像右移動(dòng),直到頁面的右下方。視覺移動(dòng)的軌跡就像字母z。


我想你已經(jīng)看到了眼球追蹤研究和上面說的模式。這些模式很少有來描述文本為主的頁面。它們只是說我們的眼睛通過文本的行列來移動(dòng)。

文中提到的F模式通常是用在搜索結(jié)果的頁面。為什么呢?因?yàn)樵谒阉鹘Y(jié)果頁是以文字為主的頁面,而且是很小的列表信息顯示。 F模式是一種自然的方式來瀏覽這些頁面。


以文字為主的頁面和輕設(shè)計(jì)頁面常常遵循F或者是Z字路徑

添加層次結(jié)構(gòu),方向,運(yùn)動(dòng)與節(jié)奏,和視覺流貫穿在你的設(shè)計(jì)里,而不是照著上面的模式。這些模式是最終要隱藏在你存在的設(shè)計(jì)中。

盡管如此,它們依然是有用的。因?yàn)槟憧梢岳眠@些模式和放置重要的信息在這些地方,使得眼睛自然的看到突出的視覺信息。你可以利用這些通常的模式,但是需要明白它們僅是描述以文字為主的頁面。

無論你是否能控制你的視覺運(yùn)動(dòng),觀眾的眼睛都將會(huì)以某種方式來瀏覽你的作品。當(dāng)然你也可以可以控制你的瀏覽順序。


創(chuàng)作流

你可能會(huì)在一些有關(guān)設(shè)計(jì)和優(yōu)化組合的討論中見到“講故事”這個(gè)詞,這個(gè)詞越來越多出現(xiàn)在這寫論談中。創(chuàng)作流通過提供正確的信息順序可以幫助你來講你的故事。

創(chuàng)作流是講運(yùn)動(dòng)和方向的,并且引導(dǎo)眼睛從作品的一個(gè)部分到你想看的另一部分移動(dòng)。你可以通過視覺重量和視覺方向的組合來創(chuàng)建視覺流。

較大的視覺重量元素(焦點(diǎn))吸引著眼球,并且變成了休息的地方。其他元素通過這些(如箭頭和線)視覺提示傳遞著方向,讓你的眼球從一個(gè)點(diǎn)到另一個(gè)點(diǎn)。

顯眼的元素是創(chuàng)作流的開始,它應(yīng)該是你作品的入口點(diǎn)。通過設(shè)計(jì)那是給眼睛瀏覽作品提供方向線索的地方。

最顯眼的方向線索是一個(gè)箭頭指向某個(gè)地方??雌饋碓谝粋€(gè)方向上的圖像是另一個(gè)強(qiáng)大和簡單的方向線索。其它的包括:

重復(fù)的元素,

節(jié)奏韻律,

隱藏的動(dòng)作,

對角線,

手勢交互線,

方向線,

透視角度,

主題元素,

等級漸變。

你會(huì)注意到上面列出的有關(guān)線的特征。指示方向是線的主要特征之一。當(dāng)然,線也可以通過垂直于另一個(gè)方向的動(dòng)作來切斷朝一個(gè)方向運(yùn)動(dòng)的動(dòng)作。而這時(shí)它們充當(dāng)阻礙,阻止了眼睛的瀏覽視線,甚至?xí)まD(zhuǎn)眼睛的瀏覽路徑。

通過上述的方式來創(chuàng)建方向和運(yùn)動(dòng)方式??梢蕴砑釉刈鳛檎系K物來改變眼睛的移動(dòng)方向。在空曠的空間里創(chuàng)建開放的路徑讓你設(shè)計(jì)的元素輕松瀏覽。


和諧的設(shè)計(jì)流

即使在很小的細(xì)節(jié)上,你都想要路徑和動(dòng)作很好的匹配。例如,放置搜索按鈕在線框之后似乎是有意義的,因?yàn)槲覀兪褂玫淖匀贿^程是先填寫字段,然后單機(jī)按鈕。如果首先將按鈕放置在你瀏覽方向上的第一個(gè)位置上,到最后你依然要返回到開始操作。

箭頭指向的東西是你想讓觀者看的更有意義的事情而不是遠(yuǎn)離它。即使箭頭指向相反,也可以創(chuàng)作視覺流,但不是說這種視覺流對獲得最終的目標(biāo)有意義。

箭頭應(yīng)該指向你想讓眼睛看的地方。


運(yùn)動(dòng)


運(yùn)動(dòng)和方向密切相關(guān)。運(yùn)動(dòng)意味著必有方向,方向意味著運(yùn)動(dòng)。如果你想讓別人看右邊,一種方式就是讓頁面上的東西看起來像右移動(dòng),那么眼睛就會(huì)跟隨它。

這里有一些運(yùn)動(dòng)的類型

字面意義上(物理)的運(yùn)動(dòng):指發(fā)生在身體的活動(dòng)

靜態(tài)運(yùn)動(dòng):眼睛在一定的結(jié)構(gòu)內(nèi)從一點(diǎn)到另一點(diǎn)跳躍移動(dòng)

組合運(yùn)動(dòng):發(fā)生在作品中的設(shè)計(jì)元素引導(dǎo)觀者的眼睛從一點(diǎn)到另一點(diǎn)的視覺瀏覽。


動(dòng)畫可以用來創(chuàng)作頁面上的物理運(yùn)動(dòng)。主導(dǎo)元素,焦點(diǎn)和層級來創(chuàng)建靜態(tài)運(yùn)動(dòng)。你創(chuàng)作的作品視覺流中在焦點(diǎn)與焦點(diǎn)之間添加元素,這些元素來引導(dǎo)方向和運(yùn)動(dòng)規(guī)律。這些能表達(dá)運(yùn)動(dòng)規(guī)律的方向線索和我之前提到的列表是一樣的。(見上面的列表)


節(jié)奏韻律


在作品中,節(jié)奏韻律可以控制瀏覽的步伐;還可以有規(guī)律的運(yùn)動(dòng)。節(jié)奏韻律模式是由元素本身和元素與元素之間的間隔組成的,就像你的耳朵會(huì)跟隨歌曲的韻律移動(dòng),所以你的眼睛也會(huì)跟隨被創(chuàng)作的視覺韻律節(jié)奏來移動(dòng)。

在頁面上添加多個(gè)元素,那么模式和節(jié)奏就會(huì)存在。任意兩個(gè)元素都意味著一個(gè)結(jié)構(gòu)。無論你做什么這個(gè)結(jié)構(gòu)都會(huì)存在,然后你只需要學(xué)會(huì)控制它。

通過重復(fù)的元素重復(fù)創(chuàng)建視覺流和節(jié)奏韻律。在作品中,當(dāng)眼睛看到一個(gè)紅色的圓圈,那么它也會(huì)注意到其它的圓圈,并且會(huì)尋求建立一個(gè)模式。除了重復(fù)之外你可以使用交替重復(fù)和漸變等級來創(chuàng)建節(jié)奏與韻律。


重復(fù):通過可預(yù)測性創(chuàng)建模式

交替模式:通過兩個(gè)兩個(gè)的交替重復(fù)創(chuàng)建模式

等級漸變:通過一序列的有規(guī)律的步驟來創(chuàng)建模式

節(jié)奏韻律是通過眼睛跟隨的元素和元素之間的間隔創(chuàng)建出來的。改變?nèi)我庖粋€(gè)都可以改變這個(gè)模式。變化的模式來增加興趣。模式中強(qiáng)調(diào)的一些元素能夠隨時(shí)打破節(jié)奏和阻止視覺流。



三個(gè)基本的節(jié)奏韻律的類型:

基本的節(jié)奏韻律:發(fā)生在元素之間的間隔是可被預(yù)測的時(shí)候,或者是這類元素在大小和長度上是類似的時(shí)候。每隔一定的距離放置重復(fù)的元素就是一個(gè)例子。

流動(dòng)的節(jié)奏:發(fā)生在元素之間有機(jī)的間隔。這就產(chǎn)生了自然的模式喚起了一種有機(jī)運(yùn)動(dòng)的感覺。斑馬或者老虎身上的條紋就是很好的例子。

漸進(jìn)的節(jié)奏:發(fā)生在表格或圖形的順序通過漸進(jìn)的步驟展示。一些有特點(diǎn)的元素可能階梯式的變化,或者是元素的間隔階梯式的變化。通過漸增或者減少的順序來創(chuàng)作運(yùn)動(dòng)。顏色的階梯式漸變就是一個(gè)很好的例子。

田野里綻放的花朵中間就存在著一種視覺節(jié)奏韻律

上面任何一種節(jié)奏的類型都可以用來設(shè)計(jì)動(dòng)感和組合流。而你選擇哪一種類型的節(jié)奏韻律模式取決于你設(shè)計(jì)的細(xì)節(jié)。如果你的設(shè)計(jì)是想傳達(dá)一致性,基本的節(jié)奏韻律可能是最好的選擇;如果設(shè)計(jì)是想傳達(dá)有關(guān)自然和有機(jī)運(yùn)動(dòng)的,那么選擇第二個(gè)流動(dòng)節(jié)奏模式可能會(huì)更好。


設(shè)計(jì)流和格式塔


下文中我們會(huì)看到格式塔原則有助于設(shè)計(jì)原則。

在設(shè)計(jì)中,主導(dǎo)和焦點(diǎn)區(qū)域會(huì)吸引著眼球。相似性和對比原則則是用來創(chuàng)建節(jié)奏韻律模式。所有

格式塔原則表明元素間的連接和共性都有助于引導(dǎo)眼球從一組中的一個(gè)元素看向另一個(gè)元素。統(tǒng)一的連通性會(huì)引導(dǎo)眼球關(guān)注有關(guān)連接測元素。朝著相同方向同命運(yùn)的運(yùn)動(dòng)元素會(huì)讓眼球跟著它們一起運(yùn)動(dòng)。延續(xù)原則是關(guān)于元素朝一個(gè)方向持續(xù)運(yùn)動(dòng)的特殊原則。


案例


讓我們一起看一下一些網(wǎng)站的截屏,并且思考一下他們是怎么做設(shè)計(jì)流和動(dòng)態(tài),它們有什么樣的節(jié)奏韻律。

還是我之前說的,這僅僅是我個(gè)人的觀念。你可能看到過相同的屏幕截圖,與我意見一樣,又或者和我相比你看到的是不同的設(shè)計(jì)流和節(jié)奏韻律。沒有問題。重要的是我們都在批判性的思考設(shè)計(jì)。


DORIGATI(意大利葡萄酒網(wǎng)站設(shè)計(jì))

當(dāng)我在瀏覽DORIGATI網(wǎng)站的首頁時(shí),我的眼球會(huì)迅速被頁面上頂端的圖片吸引。從頂端的圖片到網(wǎng)站的焦點(diǎn)元素如logo和葡萄酒瓶的圖片不會(huì)花費(fèi)很長的時(shí)間。

在logo和瓶子之間存在著一個(gè)強(qiáng)烈的隱藏式的對角線視覺流,并且你的眼球可以來回在它們之間流動(dòng)。這個(gè)網(wǎng)站可以做到迅速的將公司的名字和產(chǎn)品的連接。

logo下面的曲線似乎是要指出下面的信息,并引導(dǎo)眼球看到目前提供的葡萄酒名字。注意左邊的標(biāo)題和葡萄酒的名字都是相同的藍(lán)色,并且和logo的藍(lán)色相類似。重復(fù)的顏色形成了節(jié)奏韻律,并且鏈接了三個(gè)元素形成了視覺流。

頁面上金色的標(biāo)題下帶有節(jié)奏的顏色(藍(lán)色)再次被使用,相對左邊來說更具裝飾性。日期也使用相似的黃色。

雖然間隔是根據(jù)每個(gè)條目的文本長度來變化,但間隔依然是可預(yù)見的,并且形成節(jié)奏規(guī)律。葡萄酒瓶也是用于連接標(biāo)題和主要內(nèi)容,通過主要圖片形成了一個(gè)垂直流,并且作為橋梁貫穿于中。如果沒有葡萄酒瓶的圖片,那么眼球想要穿過水平線制造的障礙物會(huì)更加困難。


DRESS RESPONSIVELY(服裝網(wǎng)站)

在 Dress Responsively這個(gè)服裝網(wǎng)站的首頁有著強(qiáng)烈的水平視覺流。導(dǎo)航欄和文本內(nèi)容都引導(dǎo)你的視覺水平移動(dòng),使得頁面頂端從左像右瀏覽輕松容易。

我的視線首先會(huì)被“you decide”這個(gè)文本吸引,但后輕松地看向左右方。它可能是logo,導(dǎo)航欄和標(biāo)題中剩下的文本內(nèi)容。

注意在“you decide”文本的結(jié)尾,你的視線也可能轉(zhuǎn)移到下方。重復(fù)地矩形形狀和橘色的圖形,以至于形成了一個(gè)垂直的節(jié)奏。標(biāo)有“wth?”的按鈕與“548 votes”和“see sedtails”按鈕是相互呼應(yīng)的。這個(gè)強(qiáng)烈的垂直視覺流是由于這些按鈕和它們之間的文字內(nèi)容都以左對齊的方式排列形成的。

橘色重復(fù)使用在標(biāo)題和下面頁面中的文字上(圖中未顯示)。在頁面頂端上有重復(fù)的顏色,那么你的眼球就會(huì)跟隨它想頁面下方瀏覽,這就增強(qiáng)了垂直視覺流。


INCREDIBLE TYPES

NCREDIBLE TYPES網(wǎng)站首頁的標(biāo)頭設(shè)計(jì)的是一個(gè)水平的視覺流,而這個(gè)視覺流取決于線條和文本塊。在頁面上,輕量的網(wǎng)格線創(chuàng)建了一個(gè)下拉式的視覺流,并且在水平方向上也形成了一個(gè)節(jié)奏規(guī)律。


標(biāo)題下是一組網(wǎng)格圖片。注意圖片間水平和垂直方向上的空隙,而這個(gè)空隙為你瀏覽圖片提供了通道。它們有助于你的眼睛從一個(gè)圖片瀏覽到另一個(gè)圖片上(水平和垂直兩個(gè)方向上的圖片)。同時(shí)在兩個(gè)方向上形成了節(jié)奏規(guī)律。

在頁腳處文本被分成兩行四列,再次形成了兩個(gè)方向上的視覺流和節(jié)奏規(guī)律。我認(rèn)為水平方向的視覺流比垂直方向上的視覺流更強(qiáng)烈,導(dǎo)致我的視覺從左向右看多于從上往下看,但是兩個(gè)方向的視覺流都是存在的。


LOVE & LUXE

在LOVE & LUXE網(wǎng)站的活動(dòng)賽事中,它有垂直和水平兩個(gè)方向的視覺流。


左側(cè)的粉色列表吸引了我的眼睛,通過它的形狀形成了垂直的視覺流。注意這個(gè)網(wǎng)站的名字是旋轉(zhuǎn)排列的,以致于它也形成了一個(gè)垂直的視覺流。菜單的兩種顏色形成了對比,一個(gè)點(diǎn)選中的標(biāo)簽與未點(diǎn)中的標(biāo)簽形成了強(qiáng)烈的垂直視線。


在本專欄的底部重復(fù)的文,當(dāng)你一節(jié)一節(jié)讀完后形成了一個(gè)垂直的規(guī)律。然而,眼睛在水平閱讀瀏覽的時(shí)候自然又形成了水平的視覺流。


當(dāng)下選中的菜單是用黑色的背景顯示的,由于你的眼球被這種對比吸引所以形成了一個(gè)更為強(qiáng)烈的水平視覺流。因?yàn)樵谒疑辖堑哪莻€(gè)小三角指向右邊。


再右邊,主要內(nèi)容區(qū)域,顏色和日期的大小通過重復(fù)形成了一個(gè)有規(guī)律的垂直視覺流。截屏中只顯示了兩個(gè),但是它們對下頁來說仍然有可預(yù)示性。通過藍(lán)色的日期創(chuàng)建顯示,粉色的標(biāo)題也加強(qiáng)了對規(guī)律作用。


在每兩個(gè)項(xiàng)目中間的分割水平線讓視覺隨時(shí)停留一小會(huì)。在日期和標(biāo)題上重復(fù)的顏色 形成的節(jié)奏規(guī)律會(huì)帶你進(jìn)入下一頁,一旦你準(zhǔn)備好通過這個(gè)水平線,那么你就會(huì)看到另外一個(gè)項(xiàng)目。

圖片會(huì)隨著每個(gè)條目的不同而改變,但是截屏這張圖片會(huì)讓你的視線看向左下方。



總結(jié)


經(jīng)你設(shè)計(jì)后,你能讓觀者在瀏覽網(wǎng)頁時(shí)什么時(shí)間看在哪。在以文字為主和輕圖表的頁面上,觀者的眼球可能會(huì)遵循一些向Z字模式或者是F模式來瀏覽頁面。


然而,你一旦設(shè)計(jì)頁面上的元素并添加圖表,那么那些模式不再適用。訪問者的視覺會(huì)跟隨你創(chuàng)建的視覺流和運(yùn)動(dòng)規(guī)律來瀏覽網(wǎng)頁。


思考一下你要交流的信息優(yōu)先級。想一下在特定順序下看到這個(gè)信息是否更有用??紤]一下在這個(gè)頁面上你想讓用戶首先注意什么地方,然后呢,最后呢?


接著創(chuàng)建視覺線索提示引導(dǎo)人們按照你認(rèn)為最好的瀏覽頁面順序來瀏覽網(wǎng)站。你可以通過添加線或者讓多個(gè)元素通過對齊的方式來引導(dǎo)人們?yōu)g覽順序。重復(fù)的顏色或者是文字的大小形成節(jié)奏規(guī)律來引導(dǎo)視覺流。目前運(yùn)動(dòng)的圖片來指引眼球的方向。


不要讓一個(gè)默有的模式來引導(dǎo)訪問者的眼球。而是創(chuàng)建一個(gè)組合的視覺流引導(dǎo)他們自己瀏覽整個(gè)網(wǎng)頁。

在本系列設(shè)計(jì)原則中還有最后一個(gè)問題我想與你們分享,那就是平衡。有關(guān)通常的組合平衡和帶你了解四種不同類型的平衡(對稱與非對稱,徑向和馬賽克)。

藍(lán)藍(lán)設(shè)計(jì)www.88yangsc.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ù) 


PM 可以從谷歌 Sprint 學(xué)到的設(shè)計(jì)工作法

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



深挖產(chǎn)品設(shè)計(jì)背后的工作方式和工作流程,讓產(chǎn)品經(jīng)理受益匪淺。

Design Sprint Method (谷歌沖刺計(jì)劃)是由谷歌創(chuàng)投的 Jake Knapp 發(fā)明的一種產(chǎn)品設(shè)計(jì)工作法,是指由一支不超過 7 人的團(tuán)隊(duì),在 5 天之內(nèi),通過 5 個(gè)步驟,能夠快速解決產(chǎn)品難題的產(chǎn)品設(shè)計(jì)方法。其基礎(chǔ)概念來自于敏捷開發(fā)、設(shè)計(jì)思考和個(gè)性游戲法,先后被 100 多家創(chuàng)業(yè)公司實(shí)踐,打造了諸如 Slack、 Nest、Blue Bottle Coffee 和 23andMe 等多個(gè)成功的互聯(lián)網(wǎng)產(chǎn)品。Image title

UI設(shè)計(jì)在中國的現(xiàn)狀如何?

ui設(shè)計(jì)分享達(dá)人

目前在國內(nèi)UI還是一個(gè)相對陌生的詞,即便是一些設(shè)計(jì)人員也對這個(gè)詞不太了解。我們經(jīng)??吹揭恍┱衅笍V告寫著:招聘界面美工、界面美術(shù)設(shè)計(jì)師等等。這表明在國內(nèi)對UI的理解還停留在美術(shù)設(shè)計(jì)方面,認(rèn)為UI的工作只是描邊畫線,缺乏對用戶交互的重要性的理解;另一方面在軟件開發(fā)過程中還存在重技術(shù)而不重應(yīng)用的現(xiàn)象。許多商家認(rèn)為軟件產(chǎn)品的核心是技術(shù),而UI僅僅是次要的輔助,這點(diǎn)在人員的比例與待遇上可以表現(xiàn)出來。 但這不是UI設(shè)計(jì)真正的價(jià)值體現(xiàn),只是UI設(shè)計(jì)發(fā)展的一個(gè)必經(jīng)過程。我們以物質(zhì)產(chǎn)品手機(jī)行業(yè)為例,當(dāng)手機(jī)剛剛進(jìn)入市場的時(shí)候不但價(jià)格貴的驚人,而且除了通話以外沒有什么其他功能。由于當(dāng)時(shí)的主導(dǎo)是技術(shù),所以大家都把精力放在信號、待機(jī)時(shí)間、壽命等方面,對于產(chǎn)品的造型,使用的合理性很少關(guān)心。事過境遷,如今技術(shù)已經(jīng)完全的達(dá)到用戶的需求,于是商家為了創(chuàng)造賣點(diǎn),提高爭力,非常重視產(chǎn)品的外觀設(shè)計(jì),除此之外還頻頻推出短信,彩屏,和鉉,彩信,攝像頭等等。這樣一來產(chǎn)品的美觀、個(gè)性、易用、易學(xué)、人性化等等都成了產(chǎn)品的賣點(diǎn)。軟件產(chǎn)品與物質(zhì)產(chǎn)品的發(fā)展是相同的。過去由于計(jì)算機(jī)硬件的限制,編碼設(shè)計(jì)成為軟件開發(fā)的代名詞,美觀親和的圖形化界面與合理易用的交互方式都沒有得到充分的重視,實(shí)際上這個(gè)時(shí)期的軟件叫作軟件程序,而不是軟件產(chǎn)品。



昨夜,微軟發(fā)布了一臺可以被推倒的設(shè)計(jì)師神器,微軟這次硬了!

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

微軟也可以巨硬。

微軟也可以巨硬。

昨晚微軟在紐約發(fā)布了全新一體機(jī)Surface Studio、新一代Surface Book以及新操控配件Surface Dial等系列新品。

Image title

未來的汽車UI將驚艷世界

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

在可以預(yù)見的科技發(fā)展中,汽車將是我們目前所能想象的下一個(gè)最重要的移動(dòng)設(shè)備。汽車的 UI 將會(huì)朝什么方向發(fā)展?跟隨本文一起開一下腦洞吧。

今天多數(shù)汽車UI的設(shè)計(jì),由于不直觀、過時(shí)和缺乏美學(xué)表現(xiàn)力,一直飽受詬病。其他行業(yè)都將設(shè)計(jì)的品質(zhì)奉為標(biāo)準(zhǔn),汽車生產(chǎn)商在這方面則動(dòng)作遲緩。所以,許多設(shè)計(jì)師抓住了這個(gè)機(jī)會(huì),思考未來的汽車界面會(huì)如何改變我們的駕駛體驗(yàn)。

日歷

鏈接

個(gè)人資料

存檔