← Back to team overview

ubuntu-phone team mailing list archive

Re: [Ubuntu-touch-coreapps] [Design][RSS reader] Organic grid example

 

"every item's width, height,x,y should be part of the calculation, yep, and
all items must be created dynamically then.

And don't forget about cycling - first idea how to implement this is custom
model, which has virtual size and real size. Virtual size is very big
number, and when ListView asks item to display, we will return something
like    modelInternalItems[ index % real size ]
Or our custom random view can control situation and asks correct item for
drawing.

I must think about it.


2013/5/31 Joey Chan <qqworini@xxxxxxxxx>

> I may try Flickable + Flow,  I think, all Items are not list  in a
> straight line and items' size is "random".
>
> but there will be a problem if Flow is being used, which is the gaps
> between items cannot be control in a Flow, because Flow is auto-layout.
>
> also, I was thinking about "manual-layout" to implement Lisette's design,
> this is an algorithm problem because every item's width, height,x,y should
> be part of the calculation
>
>
> 2013/6/1 Roman Shchekin <mrqtros@xxxxxxxxx>
>
>> Joey, do u mean flickable?
>>
>>
>> 2013/5/31 Joey Chan <qqworini@xxxxxxxxx>
>>
>>> Thanks for sharing  :)
>>>
>>> Next step I will try not to use listview to display those content,
>>> because listview is not "random" enough  :P
>>>
>>>
>>> 2013/5/31 Lisette Slegers <lisette.slegers@xxxxxxxxxxxxx>
>>>
>>>>  Thanks! :) Ping me if you want a re-cap of anything.
>>>>
>>>> Joey shared a great looking prototype on his screen with us, that is
>>>> what I was talking about.
>>>>
>>>> Thanks,
>>>>  Lisette
>>>>
>>>>
>>>> On Fri, May 31, 2013 at 4:49 PM, Roman Shchekin <mrqtros@xxxxxxxxx>wrote:
>>>>
>>>>> Looks great!
>>>>> Someone now must develop a prototype?
>>>>>
>>>>> P.S. sorry, I again missed our meeting due to work :(
>>>>>
>>>>>
>>>>> 2013/5/31 Lisette Slegers <lisette.slegers@xxxxxxxxxxxxx>
>>>>>
>>>>>>  Hi! As we discussed in the RSS Reader hangout today, here is an
>>>>>> example of an organic grid. Consider this a wireframe and a tool to
>>>>>> prototype and try different approaches, not a final visual design:
>>>>>>
>>>>>>
>>>>>> https://docs.google.com/drawings/d/1S4uK3ajc5WoYwZXIpUsxD0rw5r40aVK-NcbUHJwzVwY/edit?usp=sharing
>>>>>>
>>>>>> I have switched off comments for this doc, so that we can keep track
>>>>>> of all comments in this mailing list instead.
>>>>>>
>>>>>> The example image is at the top, and the same image with a visible
>>>>>> grid and the item size in grid units right underneath. There are items in 3
>>>>>> different sizes, and each size has several variations.
>>>>>>
>>>>>> For the first one, 21x14, you see the four possible variations of any
>>>>>> item consisting of text and image. The other ones only show one of the four
>>>>>> variations. There are also items that contain only text (we probably need
>>>>>> text-only items for all sizes to accommodate articles without images). All
>>>>>> items have one grid unit space between the text and image.
>>>>>>
>>>>>> As for distributing items on the grid, we could explore 2 options.
>>>>>>
>>>>>> Option 1 is to distribute items on the page roughly as they are
>>>>>> distributed in the example, and assign the appropriate item size and
>>>>>> variation dynamically and depending on the text / images that appear in the
>>>>>> article. As you can see, the 'end' of the grid example fits with the
>>>>>> 'beginning', so we can build a never ending grid that is as long as we need
>>>>>> it to be. It can also start at any point to make it look less repetitive.
>>>>>>
>>>>>> Option 2 is to randomly distribute the items on the page. This is
>>>>>> more organic in principal (and might use the screen space in the most
>>>>>> efficient way), but we need to try if it results in readable and beautiful
>>>>>> layouts.
>>>>>>
>>>>>> As we discussed just now, option 1 is quicker to implement and will
>>>>>> allow us to test the grid with real content sooner.
>>>>>>
>>>>>> Another thing to consider: what happens if the topic is refreshed and
>>>>>> new items are added to the page? If a user has been reading a topic, and
>>>>>> new items are added, it would be disruptive to find that the existing items
>>>>>> have moved, so once an item has been placed on the page, it should stay
>>>>>> there.
>>>>>>
>>>>>> Let's see if this works with real content; can't wait to see more of
>>>>>> those awesome prototypes! :)
>>>>>>
>>>>>> Lisette
>>>>>>
>>>>>> --
>>>>>> Mailing list: https://launchpad.net/~ubuntu-touch-coreapps
>>>>>> Post to     : ubuntu-touch-coreapps@xxxxxxxxxxxxxxxxxxx
>>>>>> Unsubscribe : https://launchpad.net/~ubuntu-touch-coreapps
>>>>>> More help   : https://help.launchpad.net/ListHelp
>>>>>>
>>>>>>
>>>>>
>>>>
>>>> --
>>>> Mailing list: https://launchpad.net/~ubuntu-phone
>>>> Post to     : ubuntu-phone@xxxxxxxxxxxxxxxxxxx
>>>> Unsubscribe : https://launchpad.net/~ubuntu-phone
>>>> More help   : https://help.launchpad.net/ListHelp
>>>>
>>>>
>>>
>>
>

References