關於HIGASHIYA和菓子屋
HIGASHIYA和菓子屋是一個日本網站，專門販賣日本和菓子。所謂的和菓子就是一些日式糕點，通常很甜，常見內陷有紅豆、麻署等，常常拿來配茶一起吃。和菓子的外觀非常多樣子，有長形、圓形、魚形甚至桃子型等等，並且外觀都會包裝的非常有日式精簡美，簡單樸實卻又落落大方，HIGASHIYA和菓子屋除了提供線上購物、產品介紹外還有和菓子的豆知識（冷知識），裡面說明了和菓子外盒包裝的一些禮儀，對於節慶想和菓子卻不知道外盒需附上什麼樣的禮儀裝飾比較適合的日本人，就顯得非常親切了。
初次遇見HIGASHIYA和菓子屋
剛踏進HIGASHIYA和菓子屋就被他那簡潔的風格所吸引，在照片中看到精美的包裝會讓我納悶裡面包的是什麼？可能是因為我不是日本人的緣故，所以我並沒有在第一時間就明白這是一個線上和菓子店，等到我一直陸續往下看那些精美的圖片時，我才漸漸知道這是一間線上和菓子店，對於愛甜食的我當然就很容易吸引我停留在網站上，而且對於首頁照片的不規則排列（說不規則卻又有那麼一點規則），很容易讓我想到雜誌，感覺就很不像我在看網站，反而像在看和菓子雜誌，讓網站的趣味度無形中提高了，而且也因為設計很像雜誌，在產品價值上無形中也把質感拉高了許多，雖然說和菓子在我印象中一直都是很有"價值"的食物，但是想象一下如果要把中式糕餅弄的這麼簡潔有質感，我還真覺得有點棘手呢！
網站色系
#ffffff #000000
LOGO設計這回事
HIGASHIYA和菓子屋的LOGO帶有濃濃的日本風味，一眼就可以看出類似家徽的圖騰，雖然無法明確說出是哪一家的家徽，但是卻容易辨別出國別應該八九不離日本，對於整體LOGO來說，旁邊搭配的英文字採取較寬的間距，不知怎麼的我覺得有點戲劇性效果，會讓我聯想到PIXAR那個小檯燈畫面，我到現在還無法理解這樣的字距含義在哪，除了感覺格局較大以外，我還覺得帶有幾分專業感，因為一般文字打上去是不會有這樣特殊的字距，而且加上字型是有特殊性質的，仔細看A會讓我聯想到甲骨文象形文字之類的，這樣的獨特性會讓字距拉開的LOGO更加特殊，而且由於這些地方都是很小的細節，無形中就會替LOGO加值不少。
選單設計這回事
在選單部分除了每個選單文字上下都擁有1倍行距以外，可以看到每一個選項前面都有專屬的小圖示，那些圖示都會帶出選項的內容，無形中將產品露出，而且旁邊就是選項，滑鼠移過還會有反黑效果（如上圖中的羊羹），這樣的設計除了可以增加用戶體驗，讓網友馬上瞭解選項內的內容，這種不用網友思考的設計是一種很棒的用戶體驗設計，但是通常這樣的設計是必要很小心，如果前置圖示與內容關聯性太小，反而會造成網友困惑，就會讓選單變的難以理解，原本是希望網友不需思考就可以使用的“良性用戶體驗”，反而就會變成“很糟糕的用戶體驗”。
內文排列方式分析
對於日本網站的內文排列，我一直都充滿景仰的心情，因為不管怎麼看都會覺得井然有序，不會零亂，就算頁面資料文字很多，也可以看起來很清爽，這其中一定存在著什麼日本設計排版的魔法方程式！我們現在就來仔細研究一下HIGASHIYA和菓子屋這個網站的內文排列方式。
首先我們來研究一下首頁的圖片排列，圖片與圖片間的間距大概兩倍行高的寬度，實際丈量約26px，再來我們看看左上角，這個畫面是滑鼠停留在圖片上的樣子，除了在照片上蓋上透明黑色凸顯上頭的白色文字，標題除了字體大於內文以外，間距也有所不同，內文約1倍行高，但是標題的部分就有1.5倍行高，所以標題與內文距離就比內文的兩行間距還要在高一些，這樣做會讓標題更加凸顯，而且因為標題字體較大，所以居然較高的行距來做比例上的協調，這樣些微的差距就會照成視覺上舒適度的不同，微妙的運用字體大小與行距將會獲得意想不到的效果與質感！
在內頁排版部分，我覺得比較可惜的是這裡的內文選單太過平淡(如上圖左側)，使得選單與內文的區隔沒有很大，雖然中間間隔一樣差不多26px，但是我個人覺得距離有點不夠遠，很容易與內文融合在一起，再加上選單並不會跟隨頁面(如小倉屋左側主選單)，所以往下看的時候會有一種強迫觀看的感覺，必須要自己往上捲或按鍵盤上的Top鍵，這樣的瀏覽方式我就覺得很不順暢，如果可以在每一個段落下放個Top或者右下角有個固定的Top設計，我相信這樣對網站親和力上應該是有加分無減分的。撇開內文選單不提，內文的標題與內文排列方式就比首頁圖片上的更加明顯，除了標題再加大以外，標題與內文間距又拉的更開了，從原本的1.5倍行距現在拉到了3倍行距，仔細測量後是35px，另外內文也有分一般內文與註記，註記部分除了開頭有一個※號外，就是字體有加粗，除了與內文區隔以外，也有強調的涵義在。說完了文字，換說圖片，圖片與圖片的間距又比標題和內文還要寬，這樣設計的原因也是在於取得區塊與區塊的平衡，就如同標題與內文以及圖片與文字區塊，圖片的區塊比例更大了，所以區塊與區塊間的間距自然也會跟著加大再加大。
上圖是同篇文章的中間片段，這個區塊出現了標題、表格狀排列、註記等四種內文排列方式，標題與內文在上段已敘述過，接著表格部分，第一行的文字都有底線，一般文字有底線很容易聯想到超連結，的確這五個有底線的部分都可以點擊，但效果卻是更換下方的表格，所以你可以看到上圖中第一個底線下方有一條粗線，即代表目前所觀看的表格是哪一底線文字內的資訊，這樣設計方式其實是由tab所簡化而成，但是對我來說有點太過簡化，以至於我跟本無法辨別出它是一個tab設計，這是這個網站第二處我覺得需要改善的地方。再來我們接著看表格內容，這裡的標題與內文字並沒有與其他地方有太大差異，但是透過格線的運用改變了區塊的大小，也調整了整體的比例，但是如果是我自己來設計這裡的文字排列，我會讓內文對齊第二個底線文字的第一個字，並且不會讓灰色分隔線特別凸出來，這是個人與這個網站設計比較不同之處。
再來在關聯性列表的部分，我們可以看到上圖數目4下方分為三個項目，分別以[]包附，接著項目下方又各有兩點，前置的菱形符號與內文中間有很大的距離，這樣距離我個人認為有點太大了，但是會這麼大的原因是，設計師希望內文對齊[]內的第二個字，讓整體看起來整齊些，有發現到這點了嗎？不過如果是我，我會把菱形符號對齊[]內的第一個字，讓這兩點與項目有個主從關聯性，雖然只是微微往內縮排一點點，但是最後的視覺效果將有很大的差別。
表單設計這回事
這部份是我對這個網站最失望的部分，因為整體來說所有的表單和購物車部分都像最後硬塞上去的，沒有一致的設計模式，而且與其他頁面設計的質感落差非常大，完全感覺不出這是一個相同的網站，我非常希望這個網站可以改善這個部分，不然整體網站就敗在表單設計質感沒有出來，真的是十分地可惜與無奈。
