初代《勇者鬥惡龍》 Wireframe ！！記得點去看原推其他照片，很有意思。 https://goo.gl/PYKHNq
【初代《勇者鬥惡龍》的企劃書手稿曝光】
堀井雄二在推特上發布了當年初代《勇者鬥惡龍》的企劃手稿。
像對話、備註、功能說明等項目，是寫在描圖紙上，然後再疊到地圖上面的。
骨灰時代的作法，不妨看看 :)
推特：https://goo.gl/PYKHNq
wireframe意思 在 嫁給 RD 的 UI Designer Facebook 的最佳解答
wireframe意思 在 [分享] UX Myths #19 You don't need the content to design a ... 的推薦與評價
Myth #19: You don’t need the content to design a website
來源: https://tinyurl.com/34ry2vo
很多的設計者會畫wireframe和comp, 然後裡面放一些"lorem ipsum"的文字
(譯註: 這邊出現了許多專有名詞, 板工在這邊稍微解釋一下,
已經知道這些字意思的人可以略過此譯註,
wireframe:
有分成low fidelity prototype和 high fidelity prototype. 一般來說
就是一些簡單的框架組成, 簡單說明哪裡是放哪些元件. 可參考下圖:
https://www.aptmediainc.com/files/u2/NRA-wireframe.jpg
https://foswiki.org/pub/Development/WireframesForNewReleaseSkin/wireframe.gif
https://www.ssw.com.au/ssw/Standards/Rules/Images/WireframeMockup.jpg
comp:
就是comprehensive XYZ的簡稱, XYZ可以是art,可以是layout. 所以comp通常都是
廣告或graphic design用到的字, 在這邊的意思就是 comprehensive layout/design
它是一種High fidelity prototype, 已經是非常接近成品的外觀. 所以通常是指比
wireframe更高一等級的模版. 例子請見:
https://www.inspired-evolution.com/images/FoodPlaceWebsiteComp.jpg
lorem ipsum:
在graphic design裡, lorem ipsum是指一種filler text.
這種text主要是為了顯示字型樣式, 內容不是很重要 (可能是隨機產生的內容)
所以它的用途基本上就只是告訴你我網站的layout是這樣
因為人常常看到文字段落就忍不住衝動會去讀, 所以lorem ipsum常常使用一種很難閱讀
的拉丁文字來告訴人家 "內有惡字 請勿閱讀" (這種文字很難閱讀是因為他的單字不是
少一個字母就是多一個字母, 總之就是讓你看了不順眼). 當然你硬是要讀還是看的懂,
只是人家用這種文字就是告訴你"內容不是重點", 請轉移注意力到layout上面
)
(Recap: 很多的設計者會畫wireframe和comp, 然後裡面放一些"lorem ipsum"的文字)
但是呢, 用這種文字雖然是可以娛樂人沒錯, 但是同時也不夠真實. 更糟的是, 它讓
人有種錯覺: "內容不是這麼重要"
然而呢, 事實是使用者來逛這個網站, 是來看內容的不是來看你的layout的. 內容可以
說是一個介面設計中最重要的元素. 一個簡單的介面搭配上有品質的內容會比一個很
炫的介面搭配上很糟的內容在usability testing裡表現地更好
(譯註: 這邊的prototype是指要給使用者測試的, 而非designer自己看的過渡品,
所以作者考慮到的是:在測試中, 不要讓使用者去看沒有意義的文字. 然而, 如果今天
你的low-hidelity prototype是只是想要測試網站的flow有沒有問題, 內容可以不用
這麼精美. 不過, 也是不能差太遠就是了, 至少內容跟標題要符合使用者的期待
不要說使用者點了星海爭霸二的連結結果你給他魔獸的內容)
以下是各方認為為什麼要放入實際內容到wireframe的說法:
1. 設計師Luke Wroblewski認為在網站設計裡放入假的內容會導致不符合實際的假設
並且造成嚴重的設計缺陷.
https://www.lukew.com/ff/entry.asp?927
2. Kristina Halvorson認為網站應該是為了內容而設計的, layout的功能是為了輔助
呈現內容
https://www.adaptivepath.com/ideas/essays/archives/000959.php
3. 在Getting Real這本書裡, 37signals 的設計師解釋使用dummy text的危險在哪裡,
並且說: lorem ipsum把內容從文字變成一種視覺效果, 可是這些文字原本應該是
要讓使用者去閱讀或進入的呀
https://gettingreal.37signals.com/ch11_Use_Real_Words.php
4. Getting Real的另外一個段落也提到, 如果你認為每一個畫素,圖示,甚至是字型
都很重要, 那我告訴你, 每一個字母也都很重要
https://gettingreal.37signals.com/ch09_Copywriting_is_Interface_Design.php
5. Jakob Nielsen說: “Text is a UI”
https://www.useit.com/alertbox/twitter-iterations.html
6. "內容應該是優先於設計的, 沒有內容, 一個設計就不能叫做是設計, 它只是裝飾"
Jeffrey Zeldman說.
https://www.zeldman.com/2008/05/06/content-precedes-design/
7. 這篇文章很詳細地告訴你如何從lorem ipsum到real content
https://designinformer.com/lorem-ipsum-killing-designs/
順便附贈:
https://tinyurl.com/32ntvgc
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 118.168.195.127
※ 編輯: Armuro 來自: 118.168.195.127 (08/06 23:04)
※ 編輯: Armuro 來自: 118.168.195.127 (08/06 23:05)
... <看更多>