顯示具有 潮流趨勢 標籤的文章。 顯示所有文章
顯示具有 潮流趨勢 標籤的文章。 顯示所有文章

2015年7月28日 星期二

網頁設計這樣就對了!十招教你做出最棒的網站!

RWD響應式網頁的設計,已經成為現在做網站的基本條件之一。另外SDT小編再與大家分享十招網頁設計的概念,有了這些祕招,你也能做出最潮的時尚網站!



【第一招】圖大!還要更大!

source:http://www.borngroup.com/















自從響應式網站風行後,我們常常看到進入網站就是非常大的圖(或影片),使用者對於影像的接受度,遠遠超過贅述的文字,一張好的圖,除了能夠立馬就吸引到觀眾的目光,加深印象外,更直接替代掉廢話連篇。



【第二招】多媒體體驗

source:http://barstories.jackdaniels.com















運用Html5網頁技術,可以將多媒體置入網頁之中,讓使用者有耳目一新的感受,同時也加強互動的概念,但還是要特別注意效能表現,免得過多的效果反而讓網站不好用。



【第三招】視差效果設計

source:http://www.quoplus.com/














視差設計也是今年設計的一個風潮,將網頁瀏覽時的上下(或左右)移動,設計在視覺上和背景間的差距呈現,可以創造出更多的驚喜。例如上面的耳機網站中,就運用這樣的技巧在展現各種耳機顏色,質感非常棒!



【第四招】用動畫說故事

source:http://habitatweb.mx/















前面有提到多媒體的部分,而在新的html5設計上,也更多了"動畫"的呈現模式,將會動的元素,搭配網頁瀏覽時的文字內容,讓使用者在觀看時,更能一步步引導,深化腦內的印象度。



【第五招】扁平化設計

source:http://colinanddewi.com/















扁平化設計在APP的表現上早就已經是引領潮流的王道,而在網頁設計上,也有著相同趨勢,無論是 icon 、圖像、字體、按鈕,都已變化為簡潔的扁平設計,反而會讓使用者有一種質樸輕鬆的使用經驗。



【第六招】打破格子吧!

source:https://pixelgrade.com/demos/rosa/















source:http://www.world-of-swiss.com/

















以往的網頁設計,強調版面規劃完整、直線切版、將網頁內容一塊一塊的呈現在首頁上,但現在因應手機版的使用度越來越高,突破框架式的思考也才符合未來的設計概念,同時也更能展現網頁的特殊設計風格。




【第七招】運用拼貼

source:http://dynamit.com/































相對於突破框架式的設計,還是有許多網站的設計,是以拼貼的方式來表現,但這個拼貼,不代表就是非常規律的格子,反而是有設計風格的多樣化拼貼,如此更能展現網站圖像式的內容,吸引使用者目光。



【第八招】引導按鈕元件

source:http://humcreative.com/about/















進入一個網站最怕就是迷路,因此許多網站都將導航列(Navigation bar)放在最上方,明顯之處。不過現在也有設計人希望將這些引導的按鈕,置入在網頁之中,創造出更多的使用者互動與趣味。不過重點還是要記住:千萬不能讓使用者迷路阿!



【第九招】導入Google地圖

source:http://nitwinski.com/













Google map提供API可以串接,也讓自己網站可以多樣化的呈現與地圖相關的資訊。



【第十招】多層次呈現

source:http://necotrans.com/















利用多個圖層的相互疊壓,創造出獨特的設計風格,這種方式也比較適合資訊很多的網站,有效率的運用空間來對使用者說明所有內容。

SDT小編結語:

有了這十招的醍醐灌頂,對網頁設計或是需要規劃網站的人來說,應該是個很不錯的建議,不過就像所有的武功絕招一樣,學習每個技巧或觀念還是要能夠應用與消化,而不是硬把不適合的東西加入網站設計之中,這樣只會讓使用者覺得眼花撩亂。還是要仔細思考自己的網站對象是誰?誰來使用?目的為何?才能真正做出一個同時具備實用與設計感的好網站。



以上非翻譯文章,小編概念與原文作者並不一定完全相同
圖文參考資料來源:http://99designs.com/designer-blog/2015/01/16/top-web-design-trends-2015/

2014年3月31日 星期一

2014最新的APP UI、UX設計潮流


 2014年,10大APP設計趨勢

1.Layered Interface 分層介面















當軟硬體功能越來越強大時,許多分層設計方式其實早就已經被定義好,利用分層介面,清楚展示現在層級與該操作的步驟,我們只需要在質感上面做提升。
因此系統內建功能提供的運作方式,設計師都必須非常清楚了解,才能將這些功能發揮到極致。使用者也不會每到一個APP都要學習新的操作方式。


2.Divide by elements and spacing, not lines 

透過元素與空間來做版面劃分,而非直接使用線來區隔















運用更多的元素或是空間來做區隔,而部是死板板的線,這就像是室內空間設計一樣,你總不會希望進房間內看到一大堆牆壁來做隔間吧。


3.Swipe , Swipe , and Swipe  我刷、我刷、我刷刷刷















手持裝置是複合手勢的操作模式,以往許多人設計APP時,都太過於拘泥在"點 (Tap)"這樣的動作,但其實我們可以將許多的功能應用或隱藏在APP 多功手勢之中,例如刪除時,往左滑往右滑之類,更能符合軟硬體提供的功能需求。
但這有個前提,就是一隻APP最好不要提供超過2種除了Tap以外的手勢,不然使用者可能會被搞得頭昏腦脹。


4.Thump-focused interactions 強調互動性重點 














當設計之初,我們就必須考慮到這支APP會被使用的環境,也許在通勤的車上,也許在走路之中,因此操作方式、點擊內容與大小,設計時就必須思考進去。
你能想像在搖晃的車中,APP的按鈕又小到不好按,或是太多按鈕常常會點到別的功能時,真的會讓人瘋狂。
因此針對焦點式的互動操作設計,能夠精準又方便操作APP,一直都是最重要的使用者設計。

5.Simple color schemes  簡單配色














Less is More ,從開始接觸到規畫APP這個工作,小編就不斷的提醒大家單純反而能達到更多的效益,當一個畫面複雜到都不知從何開始時,怎麼會想要繼續閱讀下去?越簡單的設計,往往越吸引人。
不過!這樣的設計,才是最難的,要運用簡單元素卻創造出高質感,需要深厚的功力。


6.Icons - Stroke & fill  用邊框與填充來設計圖標















在Icon的設計上,會更傾向於使用 "Stroke" 與 "Fill"來設計,這樣可以讓使用者更快了解目前這功能是作用中還是未作用中,以上圖來解釋,左半邊的圖像就是Stroke,而對應相同功能,右半邊圖像是Fill。

7.Animations -Do it or don't do it  動畫呈現導覽














運用簡單動畫呈現功能導覽。
一般人下載APP之後的第一個疑問就是:這要怎麼用??如果能快速且簡單的教會你的使用者,如何用這支APP,那它被留存在手機(平板)裡的機會將會大大提升。運用動畫教學,是最快也最容易理解的方式。

8.One app , one typeface 一支APP,僅需要一種字體















應該許多設計師都了解,字體對於設計風格有決定性的影響,一支APP裡面應該是一致性的設計風格,因此當太多字體充滿APP時,會讓人沒有整體感受,並且嚴重破壞美感。
可惜的是設計師們常常被要求過多的設計,反而造成原本的高質感都不見了。


9.Blur effects 模糊效果














使用模糊效果時,不只可以運用到原本圖層功能,增加設計美感與深度外,更重要他可以做另外一種階層引導,可以讓使用者清楚知道目前的使用方式與狀態。

10.Phablets平板手機風靡















2014年將是Phablets (Phone + tablet)大放異彩的時刻,就連APPLE都準備要出大螢幕手機的情況下,是手機還是平板的界限將模糊到根本分不清。過去常常是將平板或是手機的設計分開來思考,但未來,應該是要將兩者設定為同樣的設計出發點


其實這些設計趨勢中,有幾項已經常常運用在我們之前就看到的很多APP之中,並非是新的功能,但因為軟硬體設備支援的程度越高,相對的就越能發揮他在使用上,所產生的便利度或是敏捷性,進而也提昇使用者經驗的整體感受。



以上非翻譯文章,小編概念與原文作者並不一定完全相同
參考資料來源:goldengekko、slideshare

2014年2月25日 星期二

想知道2013最火紅最賺錢的APP是誰嗎?



APP Annie 針對2013的APP與iOS、Android兩大陣營調查統計報告出爐!一起來看看去年整年度,究竟市場上有甚麼特殊的趨勢或變化,或許也可以帶給我們未來策略思考的方向

Top 9 APP Trends of 2013 (九大動向)


動向一:Google play的APP下載量,首度超越APP Store (APPLE)

去年Android陣營的 "硬體團體戰" 與 "軟體開放戰" 策略總算慢慢顯露出成效,就下載量來看,首度超越了蘋果的APP下載總數。
不過Android老問題依然存在:怎麼賺錢??下載數都比人家多了,但創造出來的利潤,卻連蘋果的一半都不到!
















動向二:日本超越美國,成為全世界APP市場收入冠軍!

日本在大量的遊戲與google play的帶動下,在去年APP整體收益上大幅成長3.3倍,而前三名中就有兩個亞洲市場(日本、南韓),證明亞洲的潛力已經開始浮出檯面,未來可能也會有繼續成長的空間


















動向三:以金磚四國的成長來看,2014年有可能會有新的市場竄起

巴西、俄羅斯、中國、印度(金磚四國),在去年的下載量上有八倍成長,而收入也有七倍,就成長幅度來說,相較於日、美、韓來說,幅度更大了許多,也就是說他們的成長力道比起領先國家,更為驚人。另外APP Annie還看好幾個發展潛力十足的國家市場:包括香港、台灣、墨西哥、印尼和泰國。
以台灣Google Play來看,收入已是全球排名第六!























動向四:手機遊戲市場已遠遠超越掌上型電玩主機市場

人手一機(甚至多機)的時代,已從過去的掌上主機,改變為智慧型手機,去年第一季iOS的手遊市場營收就已經超越掌上主機。到了Q3,兩大陣營遊戲市場加起來更是掌上主機的三倍之多。

















動向五:免費服務加值的APP收費(in app purchases),證明還是主流模式

這讓小編想到台灣的俗語:免錢的最貴。以免費來做敲門磚,再以APP內的加值服務/商品收費,這已經成為收費的主流方式。
以遊戲類APP來說,2012年這個模式已經創造86%收入,而去年更是達到93%。若是非遊戲類別中,像是資訊類、音樂類、新聞類及約會app上,也占有超過一半以上(57%)的收入比例。


















動向六:通訊類APP開始朝向整合媒體平台進攻

由於通訊APP發展迅速,加上許多吸引年輕族群策略(包括手機遊戲元素、可愛生動的表情圖像、免費與加值服務下載等),已經讓通訊APP開始思考下一步,當擁有了這麼多的使用者後,接下來他們就開始與音樂、電子書和電子商務等多元化功能,整合為一個完整的媒體服務平台,建立堅固的商業營利模式。





















動向七:音樂類APP收入成長驚人
去年音樂類由Pandora Radio領軍,在美國造成音樂APP旋風,營收成長高達77%,大多數的前10名APP中,幾乎都含有音樂串流或是音樂創作的元素。

















動向八:照片、影音類的APP也成為社會關注焦點
去年這類的APP前10名下載量也成長55%,由於新的社群媒體竄起,讓照片、影音成為服務主要內容,以提高用戶的創造力、參與黏著度、鼓勵內容分享等。已經對原本舊的媒體生態形成一種威脅。
















動向九:行動銀行、行動支付、財務管理類APP正在崛起
包括手機支付、串接銀行資訊、虛擬貨幣(比特幣)等相關類型的金融APP,在去年下載數量也有55%成長,其中在google play上的成長幅度更是大。

















2013 Top APPs (APP排名)

1.全球市場

(左邊為遊戲類,右邊為非遊戲類)












以整體收入排名








2.大陸市場

以下載量排名












以整體收入排名












APP Store 國家排名

以下載與收入排名















Google play 國家排名

以下載與收入排名














台灣進入Android消費的排行榜中。


資料來源:APP annie
以上資料非完全翻譯原文,若有觀念上的落差請自行參照原文。

2013年12月2日 星期一

比黃金還值錢!?全球都在瘋「比特幣」!


甚麼是比特幣(Bitcoin)?

比特幣是一種全球通用加密的虛擬數位貨幣(又名位元幣),概念是2008年由一個名為"中本聰(Satoshi Nakamoto)"的人所提出(有一說這個人根本也是虛擬出來的)。
2009年1月3日50個比特幣問世。

他以開放、對等、共識、直接參與的理念為基準,結合開源軟件和密碼學中塊密碼的工作模式,在P2P對等網絡和分布式數據庫的平台上,開發出比特幣發行、交易和賬戶管理的操作系統。其系統讓遍布整個對等網絡用戶端的各節點,按照其種子文件達成網絡協議,從而確保在貨幣發行、管理、流通等環節中公平、安全、可靠。並承諾比特幣將成為類似電子郵件的「電子現金」。



在不需要審批、人人都有權發行的前提下,避免通貨膨脹,並無法偽造;支付完成之後,用戶就失去對該比特幣的所有權。這部分就跟把實體的錢幣花掉是一樣的方式。

與傳統貨幣不同,比特幣運行機制不依賴中央銀行、政府、企業的支持或者信用擔保,而是依賴對等網絡中種子文件達成的網絡協議,去中心化、自我完善的貨幣體制,理論上確保了任何人、機構、或政府都不可能操控比特幣的貨幣總量,或者製造通貨膨脹。它的貨幣總量按照設計預定的速率逐步增加,增加速度逐步放緩,並最終在2140年達到2100萬個的極限。

有多種途徑使用比特幣,通過電子貨幣交易所、服務商和個人等渠道,就能兌換為當地的現金或金幣;也可以直接使用它購買物品和服務。隨着接受比特幣支付的個人、組織、商家和企業的迅速增長,其匯率在四年內上漲了數千倍。

怎麼得到比特幣?

(1)用挖的
對沒聽錯!它要用挖的!
倒不是真的叫你拿個鋤頭去山上挖挖看,既然他是虛擬貨幣,當然就是採用電腦開採方式(Mining),運用電腦計算程式數據,來獲得不定比例的比特幣,就跟真的挖礦一樣,有時也是要看運氣的。

◎先要有一個比特幣錢包
可以到官方網站下載  http://www.bitcoin.org ,以後挖到的錢或是使用,都從這錢包收支。

◎挖礦軟體
下載挖礦的軟體。(可以把這個軟體想像成一座礦山)

◎擁有"強大:"的電腦與顯卡
最早之前,當大家還不知道比特幣的時候,使用自家電腦也許就能開挖了。但現在,由於大家都開始挖,因此電腦配備已經是當年的900萬倍。簡單來說,就是用高階的GPU晶片(CPU已經沒辦法處理了),加上高階的顯示卡,來運算(開採)比特幣的數據,就有機會可以挖到礦啦。

(2)免費獲取
許多網站可以提供小額的比特幣,只要完成一些任務就可取得
http://dailybitcoins.org/
http://boklund.nu/bunnyrun/
http://bitcoiner.net/
http://netlookup.se/free-bitcoins/
http://cointicket.org/index.php
以下幾個站可以每天看廣告獲取BTC:
http://www.bitvisitor.com/
http://www.bitcoin4you.net/earnBit.php
http://earnfreebitcoins.com/visit

(3)類股市交易
由於比特幣是具有價值的,因此他也可以再一些網站中進行交易買賣。

比特幣到底有沒有價值?

由於比特幣並非哪個國家或銀行發行,因此他的價值就決定在 "是否被多數人(國家)認可",目前大多數國家都尚未承認這個貨幣的合法性。
但在2013年9月份,德國財政部認定比特幣為"價值單位(unites of value)",代表它已經是合法的金融工具,再加上已經有越來越多人願意嘗鮮,使用比特幣交易(包括食衣住行等),未來可能會顛覆數位金融的概念。

最新比特幣已經來到 1:1170美金!這真的要比黃金還值錢阿

但虛擬貨幣的漲跌不等同一般貨幣,常常一天之內高高低低,甚至之前因駭客因素,差點讓他一文不值,這也是比特幣要面臨的最大考驗。


參考資料:Wiki、IBTIMES、WIRED

2013年4月3日 星期三

【Easy try on】簡單穿搭每一天 App程式



對於上班族、學生或趕著約會的人們,每天最容易遇到的問題就是該穿甚麼才好。這次APP Store上出了一款新的App:【Easy try on】讓我們每天都能輕鬆搭配各種最潮服飾,只要將自己的衣服存放在app裡,就能每天穿搭不同款式並且分享給自己的朋友喔。

今天大家就跟著小編的腳步一起來試玩【Easy try on】囉!



▼在Fitting Room試衣間方面,首先可先選擇你的model性別或不更改。


▼再來就像是小時候玩的紙娃娃一樣,選擇你想穿搭的衣服。
   或者你可以選擇多件類似的衣服,再進行搭配。

▼當搭配完當日的服裝後,你可按下save存檔,這時可以選擇存在行事曆上或直接上傳至網路分享給所有好友。

▼若要看之前存在行事曆上的每日搭配,可到calendar查看。

▼在服飾上面,當然不只有那些系統內建的衣服,easy try on 提供你拍攝自己的服飾。連model、背景都能更換,這個功能挺好玩的。
(以下新增model為例)。

▼增加model時,可選擇從相簿選取或自己拍攝(以下為相簿選取)。



▼選完後會看到原圖,此時可以對它放大與移動位置。


▼按ok後,就會自動依照系統人形去裁剪囉!

▼雖然人的某些地方有被裁剪到,不過沒關係,此APP有提供修圖功能。
選擇魔術棒可把被裁剪到的地方復原,若不小心復原太多也能使用橡皮擦擦掉。
儲存完後,即可到Fitting Room更改model。

 

▼同件衣服也能玩出不同效果。
 

▼可依照心情,更改不同背景。
 

 ▼甚至能夠惡搞男model,穿上女裝 XD。



試玩easy try on後:
以一個每天都在煩惱該穿什麼才好的上班族來說,easy try on真的省時又方便,不用自己當model花時間換裝,又可以把App當作行動衣櫥,走到哪就試穿到哪。

不過在新增方面若是有匯入照片時提供的物件形狀,就更加方便囉。
另外它的修圖功能挺好玩的,但會因為追求完美而花太多時間在上面阿!
在新增的物件儲存後若能再加以修改那就不會有以下照片的情況了

還是只有我沒有把照片塗好QQ

總之是個有趣的APP,推薦給大家
============================

評測設備:iPhon4s
iOS版本:6.0
費用:NT$30

美觀:★★★★★★★★★☆
操作:★★★★★★★★☆☆
實用:★★★★★★★★☆☆
價格:★★★★★★★★★☆
整體推薦:: ★★★★★★★★☆☆


QR Code: