首頁

交互小技巧!淺聊四個主流的頁面間跳轉(zhuǎn)動效

周周

website-redirection-interaction-animation-1

@米_亓 :最近一直在做交互規(guī)范總結(jié)的工作,在不斷梳理頁面間跳轉(zhuǎn)邏輯的同時,發(fā)現(xiàn)頁面間的邏輯關(guān)系并不能和頁面間跳轉(zhuǎn)的動效很好的結(jié)合上。雖然只是零點幾秒的切換動效,卻能在一定程度上影響用戶對于頁面間邏輯的認知。為了輸出詳細的規(guī)范,花了大量時間把玩現(xiàn)在公司線上的產(chǎn)品以及國內(nèi)外優(yōu)秀的APP,尤其是蘋果、谷歌自己開發(fā)的APP。(如果某些方面在設(shè)計規(guī)范中并沒有給出答案,就在原生APP中找答案吧!)

小而美:清晰的可穿戴設(shè)備界面

用心設(shè)計

各種不同的穿戴設(shè)備

從簡單的健康追蹤設(shè)備,到能夠與手機系統(tǒng)同步的功能齊全的手表,設(shè)計這些小屏幕界面時,有許多變種需要考慮。

1

2016年UI設(shè)計的新趨勢

用心設(shè)計

部分原生控件上只存在風格上的差異,對用戶無顯著影響。

Material Design 不會大興其道,更不可能逆襲(用 Material Design 設(shè)計的 App 在 iOS 上使用),iOS 的實用主義設(shè)計會顯著影響 Material Design。

桌面常見的交互形式也將更多影響移動端,要支持 iPad Pro 這樣的生產(chǎn)級設(shè)備,iOS/Android 會為了兼容桌面場景作出優(yōu)化。

c4cbf0cb72a767782964c90aebc3ae2d_b

有數(shù)據(jù)的apps——手機端的數(shù)據(jù)表達式

用心設(shè)計

搜羅了 App 分類的過程中,發(fā)現(xiàn)較能體現(xiàn)數(shù)據(jù)應(yīng)用表達的,多數(shù)分布在:財務(wù)、 健康、醫(yī)療、商務(wù)、工具、效率這幾類;其中以財務(wù)、健康、商務(wù)類的應(yīng)用為最 廣泛,今天就枚舉這三大類的圖表應(yīng)用來和大家一起看看。

有數(shù)據(jù)的apps——手機端的數(shù)據(jù)表達式

iOS 9人機界面指南(三):iOS 技術(shù) (下)

用心設(shè)計

本文譯自蘋果官方人機界面指南 iOS Human Interface Guidelines (2015年10 月21日),由騰訊ISUX設(shè)計師翻譯整理,非發(fā)文者一人之作。譯文首發(fā)于ISUX博客,如在閱讀過程中發(fā)現(xiàn)錯誤與疏漏之處,歡迎不吝指出。后續(xù)章節(jié)會陸續(xù)更新,敬請期待。

iOS 9人機界面指南(二):設(shè)計策略

超實用!移動端界面中的版式設(shè)計原理(上)

周周

mobile-ui-typesetting-principle-1-1

justinlam:“我總覺得頁面不太好看但是我又說不出來”,“我不懂設(shè)計,但是我就是覺得不協(xié)調(diào)”,“你覺得這好看?你的審美要加強啊”這些聽著熟悉的話往往是產(chǎn)品和設(shè)計產(chǎn)生矛盾的開端。還有一種評價叫說不出哪里好也說不出哪里不好,相信很多人也有過感同身受的無奈。

怎樣使通知(Notification)更加智能化

用心設(shè)計

我(原作者)的手機又震了。當時我正在冰島的一個什么地方,離我的車有十多里地遠,四下無人。我正拿著馬上就要沒電的手機查看著Google Maps。

“Spotify剛剛向Afternoon Acoustic歌單添加了兩首歌曲哦”,真是時候。一條來自Periscope的消息:“@kayvon和你分享了一段視頻…”,還有Mailbox的 兩封新郵件通知,Twitter上多了個follower,Slack里的一條消息,總共9條通知。當你拿著一部電量只剩下2%的手機,被困在一個荒無人 煙、網(wǎng)絡(luò)連接十分不穩(wěn)定的地方時,當你只想那見鬼的地圖能快些加載時,這些通知真的很是讓人欲哭無淚。

過去20年里,科技進步的太多太多,但通知服務(wù)似乎還停留在上個世紀。

01-mobile-app-design-notification-smart.png

移動端界面中的版式設(shè)計原理(上)

用心設(shè)計

對任何信息進行排布的時候,首先必須要掌握的是對齊/重復(fù)/親密/對比,貫穿設(shè)計的四大原則。

對齊除了能建立一種清晰精巧的外觀,還能方便開發(fā)的實現(xiàn)。基于從左上至右下的閱讀習(xí)慣,移動端界面中內(nèi)容的排布通常使用左對齊和居中對齊,表單填寫的輸入項使用右對齊。

全部躺槍!UI設(shè)計師容易忽略的四個現(xiàn)實

周周

ui-designer-overlook-the-reality-1

@Akane_Lee :我遇到非常多這樣子的設(shè)計師,他們從不考慮「這樣設(shè)計稿交出去,工程師做不做得出來」的問題,也不愿意去了解什么叫「限制」和「規(guī)則」。如果你也想從畫圖標的變成UI設(shè)計師,這篇干貨千萬要收藏。

打磨細節(jié)!超實用的移動端縮略圖設(shè)計攻略

周周

mobile-list-thumbnail-design-1

在列表中使用縮略圖,這樣一個簡單的需求,看似平淡無奇的設(shè)計,也有如此多的細節(jié)和原理可以挖掘。原文中推敲的過程非常值得學(xué)習(xí)和借鑒,來看今天@TerryFan 這篇譯文。

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.yvirxh.cn

存檔